1 案例1-省市联动

1.1 需求

当用户在选择省下拉框信息时,动态修改市下拉框对应的信息;

1.2 技术分析

1:当页面加载的时候需要给省下拉框绑定一个change事件;

2:当事件触发的时候,获取用户选择的省份对应的编号;

3:使用省份编号作为二维数组的索引,获取对应的一维数组信息;

4:遍历一维数组中的信息,并添加到市对应的下拉框中;

1.3 Jquery操作value属性和元素体

操作value属性专用的方法:

Val方法;

操作元素体(包含子标签):

Html方法

操作纯文本方法:(了解)

Text方法

特点:

3个方法都可以使用空参数的形式,获取信息,使用传参数的形式,设置信息;

练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){//3.1 设置 username的默认值为"许多多"$("input[name='username']").val("多多")//3.2 获取 username的value属性的值var v=$("input[name='username']").val();//alert(v)//3.3通过html获取div标签体的内容var v2=$("div").html();//alert(v2)//3.4通过html设置div标签体的内容$("div").html('<font color="red">已满18,随便进</font>');//3.5通过text获取div标签体的内容var v3=$("div").text();//只能获取纯文本//alert(v3)//3.6通过text设置div标签体的内容$("div").text('<font color="red">123456</font>');//3.7 两者设置值的区别//html可以带着标签一起设置,标签会生效,而text方法,标签不会生效,直接以字符串的形式显示//3.8 两者获取值的区别//html可以带着标签一起获取,而text方法,直接获取字符串纯文本}); </script><style type="text/css">.textClass {background-color: #ff0;}</style>
</head>
<body><h3>表单</h3><form action=""><table border="1"><tr id="tr1"><td><label>姓名</label></td><td><input type="text" name="username"/></td></tr><tr><td><span>密码</span></td><td><input type="password" name="password" /></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td></td><td><button type="button">普通按钮</button><input type="submit" value="提交按钮" /><input type="reset" value="重置按钮" /></td></tr></table></form><h3>公告信息</h3><div>未满18慎进</div><span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>

1.4 Jqeury迭代数组的方式

方式1：使用jquery这个对象的方法;

格式:

$.each(任意数组,function(索引,迭代的元素值){

})

方式2：使用jquery数组对象的方法;

格式:

jquery数组对象.each(function(索引,迭代的元素值){

})

方式3：使用for循环:

for(var i=0;i<数组.length;i++){

.....

}

注意事项:

1:凡是从数组中迭代出来的元素,都是js对象;

2:关于方式2必须是jquery数组对象,如果是js数组对象,语法报错;

练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>05-可见性过滤选择器.html</title><script src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){//1:给两个按钮绑定点击事件$("#b1").click(function(){//得到的是一个jqeury数组var arr =$("input:hidden");//在jquery中有两种迭代方式://方式1:直接使用jquery对象的each方法$.each(arr,function(i,d){//alert(i+"===>"+d)//一旦从数据中迭代出来的元素,都是js对象//alert(d.value);alert($(d).val())});});$("#b2").click(function(){//方式2:直接使用jquery数组对象的each方法var arr2 =$("input:hidden");arr2.each(function(i,d){alert(d.value)});});/*var arr3=[1,2,5,8];arr3.each(function(i,d){alert(i+"===>"+d)});*/   //这种方式是不行的，因为arr3是js对象，而each方法是jQuery方法。});</script>
</head>
<body><input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b1"/><input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b2"/><br /><br /><!--文本隐藏域--><input type="hidden" value="hidden_1"><input type="hidden" value="hidden_2"><input type="hidden" value="hidden_3"><input type="hidden" value="hidden_4"></body>
</html>

1.5 文档操作

内部插入:

A.append(B) 在A的内部的后面添加一个儿子B

A.prepend(B) 在A的内部的前面添加一个儿子B

外部插入:

A.after(B) 在A的后面添加一个兄弟B

A.before(B) 在A的前面添加一个兄弟B

删除信息:

Empty() 清空所有的儿子;

Remove() 当前元素自杀;

练习：

内部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>01_内部插入节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){//1.在city的后面内部追加 反恐//$("#city").append('<li>新反恐</li>');//2.在city的前面内部插入 反恐//  $("#city").prepend('<li>新反恐</li>');//3:如果使用页面上的元素,那么会是一个移动(剪切)的效果;$("#city").append($("#fk"));});</script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div> </body>
</html>

外部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>02_外部插入节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){//1.在 p2 的后面插入 city//$("#p2").after($("#city"));//2.在 p2 的前面插入 city$("#p2").before($("#city"));});</script></head><body><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p  id="p3">I would like to say: p3</p><p  id="p2">I would like to say: p2</p><p  id="p1">I would like to say: p1</p></body>
<script type="text/javascript"></script></html>

删除节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>03_删除节点.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){//1.清空ul//$("#city").empty();//2.移除天津 remove$("#tj").remove();});</script></head><body><ul id="city"><li id="bj" name="beijing">北京<p>海淀区</p></li><li id="tj" name="tianjin">天津<p>河西区</p></li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body>
</html>

1.6 案例步骤与代码实现

1:编写一个页面加载事件,在页面加载事件中给省下拉框绑定一个change事件;

2:当change事件触发的时候,获取省对应的编号;

3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,

4:将一维数组中的信息拼接成option选项,并添加到市下拉框中;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>// 定义二维数组:var arr = new Array(4);arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");arr[1] = new Array("长春市","吉林市","四平市","通化市");arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");</script></head><script src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript">$(function(){/** 1:编写一个页面加载事件,在页面加载事件中给省下拉框绑定一个change事件;2:当change事件触发的时候,获取省对应的编号;3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,4:将一维数组中的信息拼接成option选项,并添加到市下拉框中;*///给省下拉框绑定一个change事件;$("select[name='pro']").change(function(){//立刻还原市区的下拉框信息$("select[name='city']").html('<option >-请选择-</option> ');//2:当change事件触发的时候,获取省对应的编号;var index=$("select[name='pro']").val();//alert(index)//3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,var arr2=arr[index];//迭代数组获取每一个市区信息$.each(arr2,function(i,d){//此时的d就是每一个市区的信息名//4:将一维数组中的信息拼接成option选项,var op='<option >'+d+'</option> ';//5:并添加到市下拉框中$("select[name='city']").append(op);});});});</script><body><form action="#" method="get"><input type="hidden" name="id" value="007"/>姓名:<input name="username" value="xuduoduo"/><br>密码:<input type="password" name="password"  value="123" disabled="disabled"><br>性别:<input type="radio" name="sex" value="1" checked="checked">男<input type="radio" name="sex" value="0">女<br>爱好:<input type="checkbox" name="hobby" value="eat">吃<input type="checkbox" name="hobby" value="drink" checked="checked">喝<input type="checkbox" name="hobby" value="sleep" checked="checked">睡<br>头像:<input type="file" name="photo"><br>籍贯:<select name="pro"><option >-请选择-</option><option value="0">黑龙江</option><option value="1">吉林</option><option value="2">辽宁</option><option value="3">河南</option></select><select name="city"><option >-请选择-</option>     </select><br>自我介绍:<textarea name="intr" cols="40" rows="4">good!</textarea><br><input type="submit" value="保存"/><input type="reset" /><input type="button" value="普通按钮"/></form></body>
</html>
<!---->

2 案例2-左右选择

2.1 需求

当用户点击相应按钮的时候,将选中的选项或全部选项移动到对面去;

2.2 技术分析

1:当页面加载的时候,给6个按钮分别绑定点击事件;

2:在点击事件中获取用户选择的这些选项并移动到对面的下拉框中;

2.3 表单属性过滤选择器

Checked选择器：选择页面上选中的单选框和多选框的个数;

格式:

$(“input:checked”)

Selected选择器：选择页面中下拉框选中的个数:

格式:

$(“select option:selected”)

练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>08-表单对象属性过滤选择器.html</title><!--   引入jQuery --><script src="../js/jquery-1.11.0.min.js"></script><script src="../js/assist.js"></script><link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript">$(function(){$("#btn1").click(function(){//对表单内 可用input 赋值操作$("input:enabled").val("新添加的值.............");})$("#btn2").click(function(){//对表单内 不可用input 赋值操作$("input:disabled").val("新添加的值.............");})$("#btn3").click(function(){//获取多选框选中的个数var l=$("input:checked").length;alert(l)})$("#btn4").click(function(){var v2=$("select option:selected").length;alert(v2)})});</script>
</head>
<body><h3> 表单对象属性过滤选择器.</h3><button type="reset">重置所有表单元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>  <br /><br /><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取下拉框选中的个数.</button><br /><br />可用元素：<input name="add" value="可用文本框"/>  <br/>不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>可用元素： <input name="che" value="可用文本框" /><br/>不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/><br/>多选框：<br/><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<div id="checkboxDivId"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>下拉列表1：<br/><select name="test" multiple="multiple" style="height:100px"><option>浙江</option><option selected="selected">湖南</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br/><br/>下拉列表2：<br/><select name="test2" ><option>浙江</option><option>湖南</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select><br/><br/></body>
</html>

2.4 事件切换

用于简化鼠标移入和移出事件的方法:

Hover

格式:

Jquery对象.hover(移入时触发的函数对象,移出时触发的函数对象);

用于让按钮轮流执行方法的方法（最后一个函数执行完再点就执行函数1）:

Toggle

格式:

Jquery对象.toggle(函数1,函数2.....);

练习：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript">$(function(){//1:给div绑定一个鼠标移入和移出事件;(可以使用hover方法替代两个事件)$("#divId").hover(function(){//修改div的元素体$("#divId").html('<font color="red">客官不可以</font>');},function(){$("#divId").html('<font color="red">谢谢...</font>');});//2:给按钮绑定轮流执行的事件$("#bid").toggle(function(){alert("第一个事件");},function(){alert("第2个事件");},function(){alert("第3个事件");});});</script></head><body><input type="button" id="bid" value="点击查看" /><br><div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div></body>
</html>

2.5 案例步骤与实现

1:当页面加载的时候,给6个按钮分别绑定点击事件;

2:选择用户选中的下拉项,并将这些下拉项移动对对面的下拉框中即可;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>左右选中.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script><script type="text/javascript">$(function(){/** 1:当页面加载的时候,给6个按钮分别绑定点击事件;2:选择用户选中的下拉项,并将这些下拉项移动对对面的下拉框中即可;*/$("#toRight1").click(function(){//选择用户选中的下拉项中的第一个$("#right").append($("#left option:selected:first"));})$("#toRight2").click(function(){//选择用户选中的下拉项中的所有$("#right").append($("#left option:selected"));})$("#toRight3").click(function(){//左侧的下拉项中的所有$("#right").append($("#left option"));})});</script><style>input[type='button']{width:50px;}</style></head><body><table><tr><td><select id="left" multiple="true" style="width:100px" size="10"><option>環</option><option>芈</option><option>琅</option><option>琊</option><option>爨</option><option>甄</option><option>槑</option><option>夔</option></select></td><td><input type="button" value=">" id="toRight1"><br><input type="button" value=">>" id="toRight2"><br><input type="button" value=">>>" id="toRight3"><br><br><input type="button" value="<" id="toLeft1"><br><input type="button" value="<<" id="toLeft2"><br><input type="button" value="<<<" id="toLeft3"></td><td><select id="right" multiple="true" style="width:100px" size="10"></select></td></tr></table></body></html>

3 案例3-表单校验

3.1 需求

当用户离开输入框的时候,对用户输入的值,进行校验,如果合法,不进行任何提示,如果不合法,则在输入框的后面以文字的形式提示;

3.2 技术分析

使用jquery提供的表单检验插件即可完成表单校验的功能;

3.3 Validate插件概述（菜鸟教程里能查到）

Validate是在jquery的基础上,进一步封装之后,得出的一个专门用于表单校验的小工具;

使用步骤:

1:从网上下载并解压validate插件; (会得到js文件)

2:将jquery.js和validate.js文件引入到html页面中;(注意:必须是jquery先引入,validate后引入)

3:(可选的)引入一个国际化的中文js文件,可以提示中文;

关于validate的内容介绍:

使用格式:

使用jquery的方式选中表单对象.validate({

//规则

rules:{

表单项的name属性的值1:{

校验器名称1:校验器的值1,

校验器名称2:校验器的值2,

........

表单项的name属性的值2:{

校验器名称1:校验器的值1,

校验器名称2:校验器的值2,

........

....

Messages:{

表单项的name属性的值1:{

校验器名称1:信息提示值1,

校验器名称2:信息提示值2,

........

表单项的name属性的值2:{

校验器名称1:信息提示值1,

校验器名称2:信息提示值2,

........

....

}

});

validate使用练习：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><!--validate校验库--><script type="text/javascript" src="../js/jquery.validate.js" ></script><!--国际化库，中文提示--><script type="text/javascript" src="../js/messages_zh.js" ></script><script type="text/javascript">$(function(){//选中一个表单对象,并调用validate方法$("#formId").validate({//规则rules:{//表单项的name属性值username:{//校验器名称required:true},password:{required:true,number:true},repassword:{equalTo:"input[name='password']"},zuixiaozhi:{min:10},shuzhiqujian:{range:[2,4]}}});});</script><style>/** 为了让提示显示为hongse,手动编写一个error样式*/.error{color: red;}</style></head><body> <form id="formId" action="">必填：<input type="text" name="username"/> <br/>必填数字：<input type="text" name="password"/> <br />必填重复：<input type="text" name="repassword"/> <br />最小值：<input type="text" name="zuixiaozhi"/> <br />区间：<input type="text" name="shuzhiqujian"/> <br /><input type="submit" value="提交"/></form></body>
</html>

validate使用-自定义提示信息练习：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><!--validate校验库--><script type="text/javascript" src="../js/jquery.validate.js" ></script><!--国际化库，中文提示--><script type="text/javascript" src="../js/messages_zh.js" ></script><script type="text/javascript">$(function(){//选中一个表单对象,并调用validate方法$("#formId").validate({//规则rules:{//表单项的name属性值username:{//校验器名称required:true},password:{required:true,number:true},repassword:{equalTo:"input[name='password']"},zuixiaozhi:{min:10},shuzhiqujian:{range:[2,4]}},messages:{username:{//校验器名称required:"亲,必填喲..."},password:{required:"写点啥吧",number:"只认数字"}}});});</script><style>/** 为了让提示显示为hongse,手动编写一个error样式*/.error{color: red;}</style></head><body> <form id="formId" action="">必填：<input type="text" name="username"/> <br/>必填数字：<input type="text" name="password"/> <br />必填重复：<input type="text" name="repassword"/> <br />最小值：<input type="text" name="zuixiaozhi"/> <br />区间：<input type="text" name="shuzhiqujian"/> <br /><input type="submit" value="提交"/></form></body>
</html>

3.4 案例代码部分实现（邮箱校验和日期）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="../js/jquery.validate.js" ></script><script type="text/javascript" src="../js/messages_zh.js" ></script><script>$(function(){//给表单绑validate方法$("#formid").validate({rules:{email:{email:true},birthday:{dateISO:true}}});});</script><style></style><body><form action="#" method="get" id="formid"><table width="60%" height="60%"  align="center" bgcolor="#ffffff"><tr><td colspan="3">会员注册USER REGISTER</td></tr><tr><td width="20%">用户名:</td><td width="80%"><input type="text" name="username" id="username"></td></tr><tr><td>密码:</td><td><input type="password" name="password" id="password"></td></tr><tr><td>确认密码:</td><td><input type="password" name="repassword" id="repassword"></td></tr><tr><td>Email:</td><td><input type="text" name="email" id="email"></td></tr><tr><td>姓名:</td><td><input type="text" name="name"></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="男"> 男<input type="radio" name="sex" value="女" />女<!--<label for="sex" class="error"></label>--></td></tr><tr><td>出生日期</td><td><input type="text" name="birthday"></td></tr><tr><td>验证码</td><td><input type="text" name="checkcode"></td></tr><tr><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></body>
</html>

3.5 自定义校验器

当validate提供的校验器不能解决我们的需求时,可以自定义一个校验器,然后使用;

格式:

$.validator.addMethod("校验器的名称",function(表单输入项的值,这个表单项对象,使用校验器时传递的参数值){},信息提示);

练习：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="../js/jquery.validate.js" ></script><script type="text/javascript" src="../js/messages_zh.js" ></script><script>//1:先自定义一个校验器$.validator.addMethod("myCard",function(val,dom,par){//val就是用户在输入框中填写的值//dom就是这个输入框对象//par就是使用校验器的人传递的参数if(par){    //说明使用校验器的人想校验if(val==""||(val.length!=15&&val.length!=18)){//说明不合法return false;}else{return true;//代表该输入的值经过校验是合法的}}else{  //说明使用校验器的人不想校验return true;//代表该输入的值永远合法}},"亲,身份证号的长度必须是15位或18位");//2:使用自定义校验器$(function(){$("#f").validate({rules:{idCard:{myCard:true}}});})</script></head><body><form id="f">身份证号:<input type="text" name="idCard" /><br /><input type="submit" value="提交" /></form></body>
</html>

4 扩展内容-筛选

筛选信息相关的方法:

4.1 查找

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>05-可见性过滤选择器.html</title><!--   引入jQuery --> <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/assist.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="../css/style.css" />   <script type="text/javascript">$(function(){/**  <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/><input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/><input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/><input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/><input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/><input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/><input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/><input type="button" value=" 选择 id=two 父元素"  id="b8"/>*/$("#b1").click(function(){$("#two").children().css("background-color","red")});$("#b2").click(function(){$("#two").children("[title='other']").css("background-color","red")});$("#b3").click(function(){$("#two").next().css("background-color","red")});$("#b4").click(function(){$("#two").nextAll().css("background-color","red")});$("#b5").click(function(){$("#two").prev().css("background-color","red")});$("#b6").click(function(){$("#two").prevAll().css("background-color","red")});$("#b7").click(function(){$("#two").siblings().css("background-color","red")});$("#b8").click(function(){$("#two").parent().css("background-color","red")});});</script>
</head>
<body><h3>可见性过滤选择器.</h3><button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br/><br/><input type="button" value=" 选择 id=two 所有子元素"  id="b1"/><input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/><input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/><input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/><input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/><input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/><input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/><input type="button" value=" 选择 id=two 父元素"  id="b8"/><br /><br /><!--文本隐藏域--><input type="hidden" value="hidden_1"><input type="hidden" value="hidden_2"><input type="hidden" value="hidden_3"><input type="hidden" value="hidden_4"><div class="one" id="one" >id为one,class为one的div<div class="mini">class为mini</div></div><div class="one"  id="two" title="test" >id为two,class为one,title为test的div.<div class="mini"  title="other">class为mini,title为other</div><div class="mini"  title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"  title="tesst">class为mini,title为tesst</div></div><div style="display:none;"  class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><span id="mover">正在执行动画的span元素.</span>
</body>
</html>

4.2 过滤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>05-可见性过滤选择器.html</title><!--   引入jQuery --> <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/assist.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="../css/style.css" />   <script type="text/javascript">$(function(){$("#b1").click(function(){var v=$("div[class='hide']").next().is("span");alert(v)});});</script>
</head>
<body><h3>可见性过滤选择器.</h3><button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br/><br/><input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span"  id="b1"/><br /><br /><!--文本隐藏域--><input type="hidden" value="hidden_1"><input type="hidden" value="hidden_2"><input type="hidden" value="hidden_3"><input type="hidden" value="hidden_4"><div class="one" id="one" >id为one,class为one的div<div class="mini">class为mini</div></div><div class="one"  id="two" title="test" >id为two,class为one,title为test的div.<div class="mini"  title="other">class为mini,title为other</div><div class="mini"  title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"  title="tesst">class为mini,title为tesst</div></div><div style="display:none;"  class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><span id="mover">正在执行动画的span元素.</span>
</body>
</html>

4.3 扩展案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){/** 1:当页面加载的时候,给所有的span绑定点击事件,并让a标签隐藏;* 2:当触发点击事件的时候,获取span的兄弟,并判断是否已经显示了;* 3:根据span兄弟的状态,进行相应的操作;*/$("a").hide();$("span").click(function(){//如何确定是哪一个span触发的事件,   答:使用thisvar arr = $(this).nextAll();var flag=arr.is(":hidden");if(flag){//说明已经隐藏了arr.show();}else{arr.hide();}});});</script><style type="text/css">div *{display:block;width:200px;}div span{background-color : #0f0;}</style>
</head>
<body><div><span>三国好友</span><a>曹操</a><a>刘备</a><a>周瑜</a></div><div><span>笑傲好友</span><a>东方不败</a><a>向问天</a><a>任我行</a></div><div><span>水浒好友</span><a>行者武松</a><a>豹子头</a><a>急先锋</a></div></body>
</html>

day027 jQuery第二天相关推荐

跟我一起学jQuery——第二集（未完待续..）
<锋利的JQuery>第二版阅读笔记-第二章跟我一起学jQuery--第二集代码风格 jQuery选择器接下来,就要开始正式学习jQuery的各种使用了.但是没有规矩不成方圆,所以我 ...
jQuery 第二篇
jQuery 第二篇## 操作元素样式的方式 css()设置元素的样式属性; addClass()添加类样式, //为dv添加cls和cls1样式属性 $('#dv').addClass('cls') ...
jQuery第二天(操作样式、属性、节点、动画）
02.jQuery操作样式 1. css操作功能:设置或者修改样式,操作的是style属性. 操作单个样式特点:jQ的css方法都是行内样式: //name: 需要设置的样式名称 //value: ...
Jquery第二课 Javascript基础
基础知识网页由三个部分组成:HTML.CSS和JavaScript.它们分别完成不同的功能,其中HTML描述页面内容.CSS负责内容的展示.JavaScript添加交互功能和动态效果.三者一起组成一 ...
jQuery第二天学习总结—— jQuery 尺寸、位置操作
jQuery 尺寸.位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置,且不 ...
jQuery 第二章
简介:探索一些CSS和XPath选择符,以及JQuery独有的自定义选择符.介绍JQuery的DOM便历方法 1.DOM jQuery 最强大的方面之一就是它能够简化DOM遍历任务. 2.工厂函数$( ...
2015-07-22 JQuery 第二课（JQ元素获取，添加，删除，判断，遍历，取值，样式设置，改变对象，切换）...
1.获取元素: 1).size(): 获取元素的个数. $("img").size():获取有多少个img. 2).eq():获取元素. $("img[title]&qu ...
Jquery第二篇【选择器、DOM相关API、事件API】
tags: Jquery 前言前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库...能够简化我们书写的代码....本博文主要讲解使用Jquery定位HTML控件[定位控件就 ...
Jquery第二章常用方法，一二级菜单淡入淡出，event事件，复选框的全选反选第一节
hide() show() 通过滑动效果 slideToggle() 淡入淡出 fadeIn() fadeout() 向上向下拉动 slideup() slidedown() 源码: <!DO ...

day027 jQuery第二天

1 案例1-省市联动

1.1 需求

1.2 技术分析

1.3 Jquery操作value属性和元素体

1.4 Jqeury迭代数组的方式

1.5 文档操作

1.6 案例步骤与代码实现

2 案例2-左右选择

2.1 需求

2.2 技术分析

2.3 表单属性过滤选择器

2.4 事件切换

2.5 案例步骤与实现

3 案例3-表单校验

3.1 需求

3.2 技术分析

3.3 Validate插件概述（菜鸟教程里能查到）

3.4 案例代码部分实现（邮箱校验和日期）

3.5 自定义校验器

4 扩展内容-筛选

4.1 查找

4.2 过滤

4.3 扩展案例

day027 jQuery第二天相关推荐

最新文章

热门文章

day027 jQuery第二天

1 案例1-省市联动

1.1 需求

1.2 技术分析

1.3 Jquery操作value属性和元素体

1.4 Jqeury迭代数组的方式

1.5 文档操作

1.6 案例步骤与代码实现

2 案例2-左右选择

2.1 需求

2.2 技术分析

2.3 表单属性过滤选择器

2.4 事件切换

2.5 案例步骤与实现

3 案例3-表单校验

3.1 需求

3.2 技术分析

3.3 Validate插件概述（菜鸟教程里能查到 ）

3.4 案例代码部分实现（邮箱校验和日期）

3.5 自定义校验器

4 扩展内容-筛选

4.1 查找

4.2 过滤

4.3 扩展案例

day027 jQuery第二天相关推荐

最新文章

热门文章

3.3 Validate插件概述（菜鸟教程里能查到）