web前端jQuery,jsp,jstl等开发小细节分享

  1. 云栖社区>
  2. 博客>
  3. 正文

web前端jQuery,jsp,jstl等开发小细节分享

tony~tian 2015-03-24 11:32:00 浏览1163
展开阅读全文

jQuery中类型判断:

 if(typeof(price) == "undefined"){
        isexistprice=false;
 }

typeof后面跟一个表达式,要不要括号都可以。它将返回一个字符串,表示表达式的类型,而类型只有六种可能:number、string、boolean、object、function、undefined

实际的类型可以参考微软的一份JScript帮助文档中的“JScript 的数据类型”,其中还有null,但null经过typeof返回的类型是object。而一个变量,如果没有赋值时,它的类型为undefined,但它值为null。

var x; alert(typeof(x));if (x==null) alert("OK");

内部对象比这六个多,其中五个有对应的,它们都在首字母大写:Number、String、Boolean、Object、Function。undefined没有对应对象。

1.jstl:使用jstl的lib库fn判断包含关系

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
...
<c:choose>
  <c:when test="${fn:contains(sessionScope.jspALLstr,sessionScope.a1)}">
    <option value="sa">--aa--</option>
  </c:when>
  <c:otherwise>
     <option value="ad">--dd--</option>
  </c:otherwise>
</c:choose>    
...
<c:if test="${fn:contains(sessionScope.music,'小提琴')}">...</c:if>
... 
  注:①前者为大集合对象,②大集合对象必须放前边

contains的否定:

test="${not fn:contains(sessionScope.CANoConsistentFlag,airline)}"

fn的functions:

<span id="usercolorspan"  style="color: #ff00ff; letter-spacing: 2px; font-size: 14px; font-weight: bold;" title="${sessionScope.user.userName }" >
 <c:choose>
   <c:when test="${fn:length(sessionScope.user.userName) > 9}">
      ${fn:substring(sessionScope.user.userName,0,9)}...
   </c:when>
   <c:otherwise>
      ${sessionScope.user.userName }
   </c:otherwise>
 </c:choose>
</span>

注:为了不同浏览器之间的兼容,推荐使用title属性 ,确保能显示提示文字

fn:有很多操作对象的方法,如length获取对象长度,substring切割string,split等等。

2:页面实现滚动:

<marquee behavior="scoller" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="2" direction="left" >
欢迎您
<c:choose>

实现信息滚动,behavior设定滚动的方式,scoller为:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复 

direction
设定活动字幕的滚动方向:down:向下,left:向左,right:向右,up:向上

scrollamount为滚动速度

3:c:set对象赋值

  <c:out value="${loginflag }"/> 
    <c:set value="hk2" target="${user}" property="userName"/>
  <c:out value="${user.userName}"/>
<!--set-->  
<c:set var="vs" value="${fn:splIT('s1,s2,s3,s4,s5', ',')}" />
<!--get-->
<c:out value="${vs[3]}" />

注:<c:set var="varName" [scope="{ page|request|session|application }"]>  默认的是:page 范围 

<c:out value="${ding}" default="如果ding变量不存在,则将显示此信息"/>[target==null或target非Map和bean或bean属性不存在,容器抛出异常]

4:IE的支持css:

1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
 2.\9      :所有IE浏览器都支持
 3._和-  :仅IE6支持
 4.*        :IE6、E7支持
 5.\ 0   :IE8、IE9支持,opera部分支持
 6.\9\ 0  :IE8部分支持、IE9支持
 7.\ 0\9  :IE8、IE9支持
.element{
color:#666\9; //IE8 IE9
* color:#999;   //IE7
_color:#EBEBEB; //IE6
}

5:

//所有的数据行有一个.CaseRow的Class,得到数据行的大小 
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行 

6.

word-wrap 属性允许长单词或 URL 地址换行到下一行。
word-wrap: normal|break-word;
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

word-break 属性规定自动换行的处理方法。
提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
word-break: normal|break-all|keep-all;
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。


7:

FONT: 12px/1.5em Verdana, "Lucida Grande", Arial, Helvetica, sans-serif

字体12像素 行高 1.5em 字体 Arial 可以参考下面资料:

我们常用的font属性有下面这六种:

font-style设定斜体 如:font-style: italic;
font-weight设定文字粗细 如:font-weight: bold;
font-size设定文字大小 如:font-size: 12px;
line-height设定行距 如:line-height: 150%;
color设定文字颜色(注意不是font-color) 如:color: red;
font-family设定字体 如:font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

上述的属性,我们可以概括写在一行font属性里。需要注意的是color属性我们需要单独定义。

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}

8:

vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,
不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

9

/[^0-9*#-]/ig
正则表达式后面的ig,i是表示区分大小写,
g是全局模式


10:

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,
这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,
CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。
这个表达式就好像是在这个元素的一个成员函数中一样。 
css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,
以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用,从IE5开始得到支持,
后因标准、性能、安全性等问题,微软从IE8 beta2标准模式开始,取消对css expression的支持。
<style>
#userinfortable tr{
background:expression((this.parentNode.rowIndex)%2==0?"#3DB7CC":"#B3F4FF");

background-color:expression('red,blue'.split(',')[rowIndex%2]);

}


11:设置表格背景色为区分,鼠标滚动[不建议数据量多显示使用,效率低]:

 <tr  onmouseover="currentColor=this.style.backgroundColor;this.style.backgroundColor='#99ccff'" onmouseout="this.style.backgroundColor=currentColor">

var rows = document.getElementById("userinfortable").getElementsByTagName("tr");
	alert(rows.length);
	for(var i=0,j=rows.length;i<j;i++){
	   rows[i].backgroundColor = rows[i].style.backgroundColor = (i&1)?"#FFF0F0":"#F0F0FF";
	   rows[i].onmouseover = function(){this.style.backgroundColor = "#69cdff";}       
	   rows[i].onmouseout = function(){ this.style.backgroundColor = this.backgroundColor;
}

var mainTables = $('#mainTable').children('tbody.t');
var seatnoobj =$(mainTable).find(".seatno")[j];
var tr = $(seatnoobj).parent("td").parent("tr");
var isemdissu = $(tr).find("#isemdeissu").val();

12:

onMouseOver="this.focus();" 意思是当鼠标划到上面(通常是一个输入框)的时候,获得输入焦点。
onFocus="this.select();"意思是当获得输入焦点的时候,选择全部内容。
这两句的效果是连续的,最终就是当鼠标划过的时候,获得输入焦点,并且全选已输入的内容
onblur 事件会在对象失去焦点时发生
onfocus 事件在对象获得焦点时发生
onkeydown是按下的时候触发的,这个时候键值没有输出来。
onkeyup是按键抬起的时候执行的,

13:

使用:$( "#id" ).prop( "checked", true );
$( elem ).attr( "checked" )
1.6版本前返回值为boolean,1.6+返回值为string,为属性的实际值,而不是boolean.
新的浏览器返回的是“checked”,老的浏览器返回的是true,所以不能使用attr 
.prop()方法被用来处理boolean attributes

14输入特定字符:

 function  check_numeric(eventobject)      //数字鉴定,只能是数字才能输入  
  {      

       //alert(window.event.keyCode);  //打印键盘的asc码
       if  ((window.event.keyCode >= 48 && window.event.keyCode <= 57) || (window.event.keyCode >= 96 && window.event.keyCode <= 105)
       || (window.event.keyCode == 8) || (window.event.keyCode ==  46) || (window.event.keyCode == 37) 
       || (window.event.keyCode == 39|| (window.event.keyCode == 36) || (window.event.keyCode == 35)
       || (window.event.keyCode == 9) ||(window.event.keyCode == 190)) {  
        //只能输入大键盘0~9和小键盘0~9的数字和BACKSPACE、DELETE、左、右、HOME、END、TABLE键       
             return  true;  
          }  
       else  
         {  
            return  false;  
         }  
  } 

或者onkeypress 正则表示:

<input type="text" id="verificationcodelogin" name="verificationcodelogin" tabindex="3" maxlength="3" class="t_input" value="" style="ime-mode:disabled;"  onblur="checkuserverificationcode(this);" onkeypress="return (/[\d-]/.test(String.fromCharCode(event.keyCode)));"  />

 

 
</**积累../>

 

网友评论

登录后评论
0/500
评论
tony~tian
+ 关注