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

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
}

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

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只能在半角空格或连字符处换行。

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;}

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

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

/[^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)));"  />

</**积累../>

时间： 2024-10-04 04:52:01

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

web前端jQuery，jsp，jstl等开发小细节分享的相关文章

java开发小细节分享

web前端-移动端HTML5微商城项目实战分享案例

web前端-jQuery的功能为什么用不了，求大神！！

WEB前端开发都应知道的jquery小技巧及jquery三个简写_jquery

web前端开发用户体验:jQuery框架

基于jQuery实现多标签页切换的效果(web前端开发)_jquery

web前端开发JQuery常用实例代码片段(50个)_jquery

WEB前端开发想要月薪2W吗？先掌握这些技能

《Web前端开发最佳实践》——2.5　Web前端代码开发和调试