jQuery
2011-08-10 13:20 呦菜 阅读(2513) 评论(0) 编辑 收藏 举报1 基本选择器
$(“#id”)
根据给定的id匹配一个元素
$(“.class”)
根据给定的类名匹配元素
$(“element”)
根据给定的元素名匹配元素
$(*)
匹配所有元素
$(selector1,selector2,...,selectorN)
$(“#a,#b,.c”)
将每一个选择器匹配到的元素合并后一起返回
2 层次选择器
$("ancestor descendant")
$(“.a #b ”)
选取ancestor元素里的所有descendant（后代）元素
$("parent > child > p")
只选取parent元素下的child（子层级）元素，与$("ancestor descendant")有区别，前者选择所有后代元素（含且不限于子层级）
$('prev + next')
选取紧接在prev元素后的next元素
$('prev ~ siblings')
选取prev元素之后的next元素
3 过滤选择器
3.1 基本过滤选择器
$("selector:first")
选取第一个元素
$("selector:last")
选取最后一个元素
$("selector:not(selector2)")
去除所有与给定选择器匹配的元素
$("selector:even")
选取索引是偶数的所有元素，索引从0开始
$("selector:odd")
选取索引是奇数的所有元素，索引从0开始
$("selector:eq(index)")
选取索引等于index的元素，index从0开始
$("selector:gt(index)")
选取索引大于index的元素，index从0开始
$("selector:lt(index)")
选取索引小于index的元素，index从0开始
$(":header")
选取所有的标题元素，如h1,h2,h3等等
$(":animated")
选取当前正在执行动画的所有元素
3.2 内容过滤选择器
$(":contains(text)")
选取含有文本内容为"text"的元素
$(":empty")
选取不包含子元素或者文本的空元素
$(":has(selector2)")
选取含有选择器所匹配的元素的元素
$(":parent")
选取含有子元素或者文本的元素
3.3 可见性过滤选择器
$(":hidden")
选取所有不可见的元素
$(":visible")
选取所有可见的元素
3.4 属性过滤选择器
$("selector[attribute]")
$(“div[data-num]”)
<div data-num=”3”/>
选取拥有此属性的元素
$("selector[attribute=value]")
选取属性的值为value的元素
$("selector[attribute!=value]")
选取属性的值不等于value的元素
$("selector[attribute^=value]")
选取属性的值以value开始的元素
$("selector[attribute$=value]")
选取属性的值以value结束的元素
$("selector[attribute*=value]")
选取属性的值含有value的元素
$("selector[selector2][selectorN]")
用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围，如$("div[id][title$='test']")选取拥有 属性id，并且属性title以"test"结束的<div>元素
3.5 子元素过滤选择器
$(":nth-child(index/even/odd/equation)")
选取每个父元素下的第index个子元素或者奇偶元素，index从1算起
$("selector:first-child")
选取每个父元素的第一个子元素
$("selector:last-child")
选取每个父元素的最后一个子元素
$("selector:only-child")
如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配
3.6 表单对象属性过滤选择器
$("selector:enabled")
选取所有可用元素
$("selector:disabled")
选取所有不可用元素
$("selector:checked")
选取所有被选中的元素（radio,checkbox）
$("selector:selected")
选取所有被选中的选项元素（select）
4 表单选择器
$(":input")
选取所有的<input>,<textarea>,<select>,<button>元素
$(":text")
选取所有的单行文本框
$(":password")
选取所有的密码框
$(":radio")
选取所有的单选框
$(":checkbox")
选取所有的复选框
$(":submit")
选取所有的提交按钮
$(":image")
选取所有的图像按钮
$(":reset")
选取所有的重置按钮
$(":button")
选取所有的按钮
$(":file")
选取所有的上传域
$(":hidden")
选取所有不可见元素
jQuery中的DOM操作
1 查找元素节点
var $x = $("selector").text()
.html()
.html(“AA”)
2 查找属性节点
var $x = $("selector").attr("property")
.attr(“d”)
3 创建节点
var $x = $("html")
4 插入节点
$("selector").append()
向每个匹配的元素内部追加内容
$("selector").appendTo()
等价于.append()操作符左右互换
$("selector").prepend()
向每个匹配的元素内部前置内容
$("selector").prependTo()
等价于.prepend()操作符左右互换
$("selector").after()
在每个匹配的元素之后插入内容
$("selector").insertAfter
等价于.after()操作符左右互换
$("selector").before()
在每个匹配的元素之前插入内容
$("selector").insertBefore()
等价于.before()操作符左右互换
5 移动节点
本书P70例：
<script>
var $one_li = $("ul li:eq(1)"); //获取<ul>节点中第2个<li>元素节点
var $two_li = $("ul li:eq(2)"); //获取<ul>节点中第3个<li>元素节点
$two_li.insertBefore($one_li); //移动节点
</script>
6 删除节点
6.1 remove()方法
$("selector").remove()
remove()方法将删除selector所有后代节点，元素用remove()方法删除后，仍可以继续使用。另外remove()方法也可以通过传递参数来选择性地删除元素，如$("ul li").remove("li[title!=xxx]");
6.2 empty()方法
$("selector").empty()
清空selector的所有后代节点
7 复制节点
$("selector").clone()
如$(this).clone().appendTo("ul")。若要使复制后的新元素带有原元素所拥有的行为，需要传递参数true。如$("selector").clone(true)
8 替换节点
$("selector").replaceWith()
将所有匹配的元素都替换成指定的HTML或者DOM元素
$("selector").replaceAll()
等价于.replaceWith()操作符左右互换
9 包裹节点
$("selector").wrap()
将所有匹配的元素单独包裹
$("selector").wrapAll()
将所有匹配的元素用一个元素包裹
$("selector").wrapInner()
将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来
10 属性操作
$("selector").attr()
获取（一个property参数）和设置元素属性（两个参数，property和value），如$("p").attr("title","your title")。如果同时设置多个属性，格式如$("p").attr({"title" : "your title" , "name" : "test"})
$("selector").removeAttr()
删除元素属性
11 样式操作
$("selector").attr()
替换样式
$("selector").addClass()
追加样式
$("selector").removeClass()
移除样式
$("selector").toggle()
行为重复切换
例：
<script>
$x.toggle(function(){
//code1
},function(){
//code2
})
</script>
交替执行code1和code2
$("selector").toggleClass()
控制样式上的重复切换，如$("p").toggleClass("anotherClass")
$("selector").hasClass("anotherClass")
判断selector中是否含有anotherClass
12 设置和获取HTML、文本和值
$("selector").html()
获取html代码
$("selector").html(html)
设置html代码（替换标签中内容），html()方法不可用于XML文档
$("selector").text()
获取纯文本内容
$("selector").text(text)
设置文本内容（替换标签中内容），text()方法可以用于XML文档
$("selector").val()
获取元素的值
$("selector").val(value)
设置元素的值，（外：defaultValue属性可获得html默认属性，P80例:if (txt_value==this.defaultValue){...}）
$("select").val("option")
设置select控件的选中状态，类似有：$(":checkbox").val("check1","check2"); $(":radio").val("radio1");
（外：可以使用attr()方法实现同样功能，如：$("select option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);）
13 遍历节点
$("selector").children()
获取匹配元素的子元素集合，以数组返回（只考虑子元素，不考虑子元素以下的后代元素）
引申：循环取得每个子元素html内容的方法：
<script>
var $ul = $("ul").children();
for (var i=0 len=$ul.length; i<len; i++){
alert($ul[i].innerHTML);
}
</script>
$("selector").next()
获取匹配元素后面紧邻的同辈元素，以数组返回
$("selector").prev()
获取匹配元素前面紧邻的同辈元素，以数组返回
$("selector").siblings()
获取匹配元素前后所有的同辈元素，以数组返回
P88使用此方法的例子：
<script>
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
})
</script>
$("selector").closest()
获取最近的匹配元素，首先检查当前元素是否匹配，如匹配则返回元素本身，否则逐级向上查找父元素知道匹配为止，如果找不到则返回空的jQuery对象。P89例
<script>
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})
</script>
其他遍历节点的方法（find(), filter(), nextAll(), prevAll(), parent(), parents()等）本书从略
14 CSS-DOM操作
$("selector").css("property")
获取元素样式的property属性的值
$("selector").css("property","value")
设置元素样式的property属性的值
$("selector").css({"property1":"value1","property2":"value2"})
同时设置元素多个样式属性的值。注：例："font-size" = fontSize （无引号的驼峰写法）
$("selector").css("opacity","value")
设置透明度（支持所有浏览器），value值(0 ~ 1)
$("selector").css("height")
获取元素高度的height值
$("selector").height()
获得元素当前计算的实际高度值，肯定不会返回auto之类，还可以用来获取window和document的高度
$("selector").height(100)
设置高度，默认单位px，如要使用其他单位需要传递字符串如.height(‘em’)
$("selector").width()
获取元素当前计算的实际宽度值
$(selector).offset()
获取元素在当前视窗的相对偏移，返回对象包含两个属性，top和left，此方法只对可见元素有效。
P91获取<p>元素的偏移量的例子
<script>
var offset = $("p").offset();
var left = offset.left();
var top = offset.top();
</script>
$("selector").position()
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象包含两个属性，top和left。例：
<script>
var position = $("p").position();
var left = position.left;
var top = position.top;
</script>
$("selector").scrollTop()
获取元素的滚动条距顶端的距离，如：var scrollTop = $("selector").scrollTop();
$("selector").scrollLeft()
获取元素的滚动条距左侧的距离，如：var scrollLeft = $("selector").scrollLeft();
控制元素滚动条滚动到的位置，可在上述两种方法中传递参数，如：
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);
jQuery中的事件和动画（上：事件篇）
一、事件
1 加载DOM
$(document).ready(function(){//...})
DOM加载完毕后执行，在可重复使用上区别于window.onload=function(){//...}
$(window).load(function(){//...})
window内所有对象加载完毕后执行，几等同window.onload=function(){//...}。也可针对selector使用此方法
另：$(document).ready(function(){//...})的简写方式：$(function(){//...})或$().ready(function(){//...})
2 事件绑定
$("selector").bind()
为元素绑定事件，格式：bind(type[,data],fn)，可多次调用
type事件类型包括：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定义事件
简写方法：$("selector").bind(type,function(){//...})等价于$("selector").type(function(){//...})
可传递data参数以供unbind特定事件之用
$("selector").is()
判断方法
（外：方法多次重用可定义局部变量 var $x = $("selector").方法()）
3 合成事件
$("selector").hover(enter,leave)
模拟光标悬停事件，鼠标进入时触发enter事件，鼠标移出时触发leave事件（代替的是bind("mouseenter")和bind("mouseleave")）
使用方法：$("selector").hover(function(){//enter case...},function(){//leave case...})
（外：IE6不支持除a标签外css的:hover伪类的问题——可用此hover事件作为hack来解决）
$("selector").toggle(fn1,fn2,...,fnN)
模拟鼠标连续单击事件，按照单击顺序按次序循环执行事件
使用方法：$("selector").toggle(function(){//case1...},function(){//case2...},...,function(){//caseN})
特殊用法：切换元素可见状态，如元素隐藏，单击toggle触发元素可使之可见；元素可见，单击toggle触发元素使之隐藏
P108例：
<script>
$(function(){
$("panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
})
</script>
4 事件冒泡
$("selector").bind("type",function(event){//event:事件对象...})
event事件对象：只有此函数内部才能访问到，事件处理函数执行完毕后，事件对象就被销毁
event.stopPropagation()
在函数最后用来停止事件冒泡
P111例：
<script>
$('span').bind("click",function(event){
var txt = $('msg').html() + "<p>内层span元素被单击</p>";
$('#msg').html(txt);
event.stopPropagation();
})
</script>
event.preventDefault()
阻止元素默认行为
例：验证表单（input为空阻止提交并提示）
<script>
$(function(){
$("#submit").bind("click",function(event){
var username=$("#username").val();
if(username==""){
$("#msg").html("<p> 文本框的值不能为空</p>");
event.preventDefault();
}
});
})
</script>
return false;
同时对对象事件停止冒泡和默认行为，等价于同时调用stopPrapagation()和preventDefault()
（外：事件捕获和事件冒泡是相反的过程，事件捕获是从DOM顶端往下开始触发，jQuery不支持，故本书从略）
5 事件对象的属性
event.type
获取事件类型
例：
<script>
$("a").click(function(event){
alert(event.type);
return false;
})
</script>
上面返回"click"
event.target
获取触发事件的元素
例：
<script>
$("a[href=http://google.com]").click(function(){
alert(event.target.href);
return false;
})
</script>
上面返回"http://google.com"
event.relatedTarget
访问事件相关元素
event.pageX / event.pageY
获取光标相对于页面的x坐标和y坐标
event.which
在鼠标单击事件中获取鼠标的左、中、右键；在键盘事件中获取键盘的按键（返回值1=鼠标左键；2=鼠标中键；3=鼠标右键）
event.metaKey
键盘事件中获取<ctrl>按键
event.originalEvent
指向原始的事件对象
6 移除事件
$("selector").unbind()
移除元素上的事件，格式：$("selector").unbind([type][,data]);（如果没有参数，则删除所有绑定的事件；如果提供了事件类型参数，则只删除该类型的绑定事件；如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除）
例：
<script>
$(function(){
$('#btn').bind("click",myFun1=function(){ //先绑定
$('#test').append("...");
});
})
</script>
<script>
$('#delOne').click(function(){
$('#btn').unbind("click",myFun1); //后删除
})
</script>
$("selector").one()
绑定一个触发一次即被删除的事件，格式：$("selector").one(type[,data],fn);
7 模拟操作
$("selector").trigger("type");
模拟用户交互动作，简写方法：$("#selector").type(); 格式：$("selector").trigger(type[,data])
例：用单击替代鼠标经过
<script>
$("selector").mouseover(function{//...});
$("selector2").click(function(){
$("selector").trigger("mouseover"); //或者$("selector").mouseover()
})
</script>
自定义事件的例子
<script>
$("selector").bind("myClick",function(){//...}); //绑定自定义事件
$("selector").trigger("myClick"); //触发自定义事件
</script>
$("selector").trigger(type[,data])
可以数组形式传递参数给回调函数
P119例：
<script>
$("#btn").bind("myClick",function(event,message1,message2){
$("#test").append("<p>"+message1+message2+"</p>");
});
$("#btn").trigger("myClick", ["我的自定义","事件"]);
</script>
8 其他用法
$("selector").bind("type1 type2",function(){//...})
一次性绑定多个事件类型
P119值得一看的例子
<script>
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over"); //切换class
});
})
</script>
$("selector").bind("type.命名空间",function(){//...})
为多个事件添加事件命名空间，便于管理，删除命名空间后，命名空间下的事件同时删除，如：
$("div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){//...})
$("div").unbind(".plugin");
$("selector").trigger("type!")
"!"用来选择匹配不包含在命名空间中的type方法
jQuery中的事件和动画（下：动画篇）
二、动画
1 show()方法和hide()方法
$("selector").show()
从display:none还原元素默认或已设置的display属性
$("selector").hide()
设置元素的display样式为none，等于$("selector").css("display","none")
（注：传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性；传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒）
2 fadeIn()方法和fadeOut()方法
$("selector").fadeIn()
控制透明度在指定时间内从display:none提高至完全显示
$("selector").fadeOut()
控制透明度在指定时间内降低至display:none;
3 slideUp()方法和slideDown()方法
$("selector").slideUp()
控制元素高度在指定时间内从下到上缩短至display:none;
$("selector").slideDown()
控制元素高度在指定时间内从display:none延伸至完整高度
4 自定义动画方法animate()
$("selector").animate(params,speed,callback);
params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度参数，可选
callback:在动画完成时执行的参数（即回调函数），可选
常见的动画例子
<script>
//自定义动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000); //selector在3秒内向右移动500px
});
})
</script>
<script>
//累加、累减动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"+=500px"},3000); //连续触发click事件时，在当前位置累加500px
});
})
</script>
<script>
//多重动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向运动，同时增加高度
});
})
</script>
<script>
//按顺序执行多个动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //动画队列
});
})
</script>
5 动画回调函数
因css()方法不会加入动画队列中，则会马上执行。如若要在动画最后改变selector的css，需要利用回调函数
例：
<script>
$("selector").click(function(){
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){
$(this).css("property3","value3"); //css()方法利用回调函数加入动画队列
});
})
</script>
（注：动画回调函数适用于jQuery所有的动画效果方法）
6 停止动画和判断是否处于动画状态
$("selector").stop()
结束当前动画，如队列中存在下一个动画则立即执行下一个动画，格式$("selector").stop([clearQueue][,gotoEnd])
切换动画的例子：
<script>
$("selector").hover(function(){
$(this).stop().animate();
},function(){
$(this).stop().animate();
})
</script>
clearQueue参数设置为true时，将清空当前元素接下来尚未执行完的动画队列
例：
<script>
$("selector").hover(function(){
$(this).stop(true).animate().animate() //如此时触发光标移出事件，直接跳过后面的动画队列，避免执行本队列第二个动画
},function(){
$(this).stop(true).animate().animate()
})
</script>
gotoEnd参数设置为true时，可将正在执行的动画直接到达结束时刻的状态
is(":animated")
判断元素是否处于动画状态，可用于防止动画累积
例：
<script>
if(!$("selector").is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
</script>
7 其他动画方法
3个专门用于交互的动画方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
$("selector").toggle()
切换元素的可见状态，如元素隐藏则切换为可见，反之亦然
$("selector").slideToggle()
通过高度变化来切换元素的可见性
$("selector").fadeTo()
把元素的不透明度以渐进方式调整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度
8 动画方法概括
toggle()用来代替hide()和show()
slideToggle()用来代替slideUp()和slideDown()
animate()可代替所有动画方法
jQuery对表单、表格的操作及更多应用
jQuery工具部分在前三篇中已经归纳完毕备查。从本章起本文进入应用范例部分，进入范例部分后，所有的代码我都使用最扼要的方式重写并详细注释，较大的例子按功能拆分成为较小的例子来说明。
一、表单应用
1 获取和失去焦点改变样式(P142)
$(function(){
$(":input").focus(function(){ //获取焦点触发事件
$(this).addClass("focus"); //增加样式
}).blur(function(){ //失去焦点触发事件
$(this).removeClass("focus"); //移除样式
});
})
2 多行文本框触发事件改变文本框高度(P144)
$(function(){
var $comment = $("#comment"); //获取文本框
$(".bigger").click(function(){ //点击放大按钮(.bigger)触发事件
if ($comment.height() < 500){ //判断实际高度
$comment.height($comment.height() + 50); //放大高度
}
});
$(".smaller").click(function(){ //点击缩小按钮(.smaller)触发事件
if (!$comment.is(":animated")){ //判断是否处于动画队列中，避免堆积动画队列
if ($comment.height() > 500){ //判断实际高度
$comment.animate({height:"+=50"},400); //以动画方式缩小高度
}
}
});
})
3 文本框滚动条高度变化(P145)
$(function(){
var $comment = $("#comment"); //获取文本框
#(".up").click(function(){ //点击向上滚动按钮(.up)触发事件
if(!$comment.is(":animated")){ //判断是否处于动画队列中，避免堆积动画队列
$comment.animate({scrollTop:"-=50"},400); //以动画方式向上滚动滚动条
}
}); //（向下滚动代码从略）
})
4 复选框全选、全不选、反选等(P146)
$(function(){
$("#checkedAll").click(function(){ //点击触发全选事件
$('[name=items]:checkbox').attr('checked',true);
//使用attr方法更改checked属性（注意属性选择器），反选设置false值即可
});
$("#checkedRev").click(function(){ //点击触发反选事件
$('[name=items]:checkbox').each(function(){ //循环每一个复选框
$(this).attr("checked", !$(this).attr("checked")); //设置反值（jQuery方法）
});
});
});
//如下使用原生JavaScript设置反选更简单
$(function(){
$("checkedRev").click(function(){
$('[name=items]:checkbox').each(function(){ //循环每一个复选框
this.checked = !this.checked; //设置反值（JS原生方法）
});
});
})
5 输出复选框选中的值(P148)
$("#send").click(function(){ //点击触发事件
var str="选中的是：\r\n"; //赋值
$('[name=items]:checkbox:checked').each(function(){ //循环每一个选中的复选框
str += $(this).val() + "\r\n"; //用val()方法获值并循环赋值
});
alert(str); //输出str
})
6 用一个复选框来控制全部复选框的全选和反选(P149)
$("#checkedAll").click(function(){ //触发事件
if(this.checked){
$('[name=items]:checkbox').attr("checked", true); //判断赋值
}else{
$('[name=items]:checkbox').attr("checked",false); //判断赋值
}
});
//因为控制全选的复选框的checked和所有复选框的checked的值是相同的，所以可以省略判断如下
$("#checkedAll").click(function(){
$('[name=items]:checkbox').attr("checked", this.checked);
})
7 全选状态下，任一复选框取消选中，控制全选的复选框则也取消选中；所有复选框同时选中时，控制全选的复选框则也被选中（联动）(P149)
//思路1：
$('[name=items]:checkbox').click(function(){ //点击任一复选框
var flag = true; //定义flag变量，初始值为true
$('[name=items]:checkbox').each(function(){ //循环复选框组
if (!this.checked){
flag = false; //判断当存在一个未选中的复选框时，flag = false
}
});
$('#checkedAll').attr('checked',flag); //将flag变量赋给控制全选的复选框的checked属性
});
//思路2：
$('[name=items]:checkbox').click(function(){ //点击任一复选框
var $tmp = $('[name=items]:checkbox'); //定义临时变量（避免重复使用选择器）
$('#checkedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);
//使用filter()方法筛选出选中的复选框，和全部复选框的对象比较 length，
//然后将返回的布尔值直接赋给#checkedAll
})
8 下拉框应用，将一个下拉框中已选中的选项（或者全部选项）添加到另一个下拉框中(P150)
$('#add').click(function(){
var $options = $('#select1 option:selected'); //获取选中项
$options.appendTo('#select2'); //追加给另一个下拉框
});
$('#addAll').click(function(){
var $options = $('#select1 option'); //获取全部项
$options.appendTo('#select2'); //追加给另一个下拉框
});
$('#select1').dblclick(function(){ //双击某个选项将其追加给另一个下拉框
var $options = $("option:selected",this); //获取选中项（注意选择器）
$options.appendTo('#select2'); //追加给另一个下拉框
})
9 表单验证，在每一个有requred类的文本框后加入“*”以提示必填项(P153)
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //追加到文档中，注意parent()方法的使用
})
10 验证表单的用户名和邮箱格式是否正确(P154)
$('form :input').blur(function(){ //失去焦点事件
var $parent = $(this).parent(); //定义临时变量
$parent.find(".formtips").remove(); //删除以前的提醒元素，避免堆积重复提醒
//验证用户名
if ($(this).is('#username')){
if (this.value=="" || this.value.length < 6){ //判断
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="onError formtips">' + errorMsg + '</span>');
//追加错误提示样式
}else{
var okMsg = '输入正确.';
$parent.append('<span class="onSuccess formtips">' + okMsg + '</span>');
//追加正确提示样式
}
}
// 验证邮箱
if ($(this).is("#email")){
if (this.value=="" || (this.value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
//判断
var errorMsg = '请输入正确的E-mail地址.';
$parent.append('<span class="onError formtips">' + errorMsg + '</span>');
//追加错误提示样式
}else{
var okMsg = '输入正确.';
$parent.append('<span class="onSuccess formtips">' + okMsg + '</span>');
//追加正确提示样式
}
}
})
11 验证表单，阻止提交(P155)
$('send').click(function(){
$("form .required:input").trigger('blur'); //模拟触发blur()事件
var numError = $('form .onError').length; //定义numError变量
if (numError){
return false; //判断错误提示个数（长度），如大于0（即存在错误提示）则阻止提交
}
alert("注册成功！");
})
12 实时验证（输入时验证，比blur()验证更及时）(P156)
$('form :input').blur(function(){
//验证代码，见前文
}).keyup(function(){
$(this).triggerHandler("blur"); //每次松开按键时模拟触发blur()事件以实时验证
}).focus(function(){
$(this).triggerHandler("blur"); //每次得到焦点时模拟触发blur()事件以实时验证
注：triggerHandler()方法只会触发为元素绑定的事件，不会触发浏览器默认的事件。
二、表格应用
1 表格隔行变色（:odd和:even选择器 P157）
$(function(){
$("tr:odd").addClass("odd"); //奇数行添加样式
$("tr:even").addClass("even"); //偶数行添加样式（:odd和:even选择器中索引从0开始）
})
2 设定含有指定文字内容的某一行变色（:contains选择器 P158）
$(function(){
$("tr:contains('内容')").addClass("selected");
})
3 单选框控制表格行高亮（find()方法；:radio，:checked，:has选择器 P158）
//DOM如：<table><tr><td><input type="radio" /></td></tr>...</table>
$(function(){
$("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected").end()
.find(":radio").attr("checked",true);
$("table :radio:checked").parent().parent().addClass("selected");
//初始化表格时如有单选框默认选中也需要处理
//也可写作$("table :radio:checked").parent("tr").addClass("selected");
//或者$("tbody>tr:has(:checked)").addClass("selected");
});
})
4 复选框控制表格行高亮（:has选择器；使用hasClass()方法进行判断 P160）
$("tr:has(:checked)").addClass("selected"); //进入页面时，处理已被选中的表格行
$("tr").click(function(){
if ($(this).hasClass("selected")){ //判断是否含有此样式
$(this).removeClass("selected").find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected").find(":checkbox").attr("checked",true);
}
})
//上述代码可使用三元运算简化为：
$("tr").click(function(){
var hasSelected = $(this).hasClass("selected");
$(this)[hasSelected?"removeClass":"addClass"]("selected")
.find(":checkbox").attr("checked",!hasSelected);
//注：$(this)["addClass"]("selected");等价于$(this).addClass("selected");
})
5 表格展开关闭（toggleClass()和toggle()方法；属性技巧的使用 P161）
DOM如下：
<table>
<tr class="parent" id="row_01"><td>标题1</td></tr>
<tr class="child_row_01"><td>内容1</td></tr>
<tr class="parent" id="row_02"><td>标题2</td></tr>
<tr class="child_row_02"><td>内容2</td></tr>
</table>
$(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected").siblings(".child_" + this.id).toggle();
});
})
6 表格内容筛选显示（filter()方法 P163）
$(function(){
$("tr").hide().filter(":contains('李')").show();
})
7 表格内容按输入筛选显示（P163）
$(function(){
$("#filterName").keyup(function(){
$("tr").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup(); //DOM加载完时，绑定事件完成之后立即触发，避免在刷新页面后筛选效果消失
})
jQuery中的Ajax
