- 概述 - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可 "eg:<script src="../js/jquery-1.11.0.min.js"></script>" - 语法 - $("选择器") 或 jQuery("选择器") "var 元素对象 = $("选择器"); $("#id值"); val();" - javaScript和jquery区别 - 注意事项: "使用jquery的方式获取的对象称为jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象." - js对象和jquery对象之间的转换 - js对象 → jquery对象 - $(js对象); - jquery对象 → js对象 - 方式1:jQuery对象[index] - 方式2:jQuery对象.get(index) - 事件(event) "在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可" - 页面加载成功事件 - 格式1:$(document).ready(function(){}); - 格式2:$(function(){}); - 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效 - 重点事件 - click - change - submit - focus - blur - jquery事件和事件源的绑定 "要保证页面加载成功后,才能使用jq的事件" - jquery对象.事件名称(function(){}); - jQuery的选择器 - 基本选择器:★ - * 所有 - # id - .class - 标签选择器(标签名) - 多个选择器用","号隔开 a,b - 层次选择器:★ - a b:选择a的b的后代 - a>b:选择a的b孩子 - a+b:选择a的b大弟弟 - a~b:选择a的所有的b弟弟 - 基本过滤: - :first 第一个 - :last 最后一个 - :even 偶数 - :odd 奇数 - :eq(index) 索引= - :gt(index) 索引> - :lt(index) 索引< - :not(选择器) - 内容过滤: - :has(选择器):包含 - 可见性过滤: - :hidden:不可见 主要针对的是 文本隐藏域和指定display=none - :visible:可见 - 属性选择器★ - [属性名]:有指定属性的元素 - [属性名='值']:有指定属性和值的元素 - 表单对象属性★ - :enabled 可用的 - :disabled 不可用的 - :checked 选中的(针对的是单选框和复选框) - :selected 选中的(下拉选) - 表单: - :input:选择所有的表单子标签 "input:选中所有input标签 select textarea button" - input select textarea button - jQuery的DOM操作 - jQuery效果: - 基本:★ 高和宽都变化 - hide([毫秒值]):隐藏 - show([毫秒值]):显示 - toggle([毫秒值]):切换 - 滑入滑出:高变化 - slideUp([毫秒值]):滑出 - slideDown([毫秒值]):滑入 - slideToggle([毫秒值]);切换 - 淡入淡出: - fadeIn([毫秒值]); - fadeOut([毫秒值]); - fadeToggle();切换 - 了解: - fadeToggle(毫秒值,function(){}); - 以上效果都可以添加一个回调函数 - css样式 - css - 设置css样式 - 格式1:设置单个属性 "jq对象.css("属性","值");" - 格式2:设置多个属性 "jq对象.css({ "属性":"值", "属性1":"值1" });" - 获取css样式的值 " jq对象.css("属性名称");" - 获取元素的宽和高 - jq对象.width() - jq对象.height() - 扩展:offset() "获取元素在当前页面的位置" - top "元素距离顶部的距离" - left "元素距离左边的距离" - 属性 - attr():设置或者获取元素的属性 - 设置属性(给标签添加属性) - 格式1:设置单个属性 "jq对象.attr("属性名","值");" - 格式2:设置多个属性 "jq对象.attr({ "属性":"值", "属性1":"值1" });" - 获取属性的值 " jq对象.attr("属性名");" - 移出属性(删除属性) " jq对象.removeAttr("属性名");" - prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物) - class操作 了解 - 元素.addClass("属性值");添加 - 元素.removeClass():移除指定的样式 - 元素.toggleClass("属性值"):切换 */ /* 回顾: jQuery:js类库(js框架)对js进行封装,本质上就是外部的js文件. jQuery和html整合: 1.下载 2.通过script标签的src属性引入即可(1.11) jQuery语法: $("选择器"); 或 jQuery("选择器"); jq对象和js对象转换 jq ===> js(dom) jq对象[index] jq对象.get(index); js ===> jq对象 $(js对象); 事件: click: submit: change: focus: blur: 页面加载成功: $(function(){}); $(document).ready(function(){}); 选择器: 基本选择器: * #id .class 标签名称 多个选择器之间使用逗号 层次选择器: a b a>b a+b a~b 基本过滤选择器: :first :last :even :odd :eq(index) :gt(index) :lt(index); :not(选择器) 内容过滤选择器: has(选择器); 可见性过滤选择器: :hidden type="hidden" display = "none" :visible 属性选择器: [属性] [属性='值'] 表单对象选择器: :enabled :disabled :selected 下拉选 :checked 单选框个复选框 表单选择器: :input input select textarea button DOM: 效果: 基本效果: hide() show() toggle() 滑入滑出: slideUp(); slideDown(); slideToggle(); 淡入淡出: fadeIn(); fadeOut(); fadeToggle([毫秒值],回调函数); 操作css样式: 设置: 设置单个: jq对象.css("属性名称","值"); 设置多个: jq对象.css({ "属性名称":"值", "属性名称":"值" }); 获取: jq对象.css("属性名称"); 获取宽和高: width(); height(); 获取位置: offset(); top: left: 操作属性: attr: 设置属性: 设置单个: jq对象.attr("属性名称","值"); 设置多个: jq对象.attr({ "属性名称":"值", "属性名称":"值" }); 删除: removeAttr("属性名称"); prop:如果attr不好使使用prop代替 操作class: addClass("class属性的值"); removeClass(); classToggle("class属性的值"); ///////////////////////////////////////////// 案例1-省市联动 需求分析: 当省份改变的时候,根据选中的省份查询其所对应的市数组,遍历市数组,将每一个市拼成option插入到市的下拉选中. 技术分析: 事件 jq遍历 jq对DOM操作 ///////////////////////// 步骤分析: 1.确定事件(改变事件) 给省份的下拉选添加改变事件 2.编写改变事件函数 //a.获取省份的value的值 //b.获取所对应的市数组 //c.获取市的下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市的下拉选中 案例2-左右选择 需求分析: 当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中. 技术分析: 事件 文档处理 //////////////////// 步骤分析: 1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边 案例3-表单校验 需求分析: 通过使用validate插件来完成表单校验. 技术分析: validate插件 ////////////////// 扩展案例-模拟分组 ////////////////// day31jQuery - jQuery遍历 - 方式1:jQuery的对象方法 - 格式: " jq对象.each(function([index],[dom对象]){ 对遍历到每个元素的操作 });" - 方式2:全局函数 - 格式: "$.each(要遍历的jquery对象,function([index],[dom对象]){ }); $.each(数组,function(){ });" 案例: //方式1:jq对象的方法 $("#b1").click(function(){ //获取当前页面的文本隐藏域,并打印他们的value值 //[e1,e2,e3,e4] 存放的是dom(js)对象 $("input:hidden").each(function(index,ele){ // alert(index+" "+ele.value+" "+$(ele).val()); alert(this.value); }); }); //方式2:全局遍历 $("#b2").click(function(){ //获取要遍历的对象 var $hideObj = $("input:hidden"); $.each($hideObj, function(index,ele) { alert(index+" "+ele.value+" "+$(ele).val()+" "+this.value); }); }); //js对象 var arr = new Array(1,2,3,"tom"); $("#b3").click(function(){ // $.each(arr, function(index,ele) { // alert(index+" "+ele+" "+this); // }); $(arr).each(function(index,ele){ alert(index+" "+ele+" "+this); }); }); }); - jQueryDOM操作 - HTML代码/文本/值 ★ - val() : 对value属性的操作 - jq对象.val(); 获取value属性的值 - jq对象.val("值"); 设置value属性的值 - html() : 对标签体的操作 - jq对象.html(); 获取标签体的内容 - jq对象.html("值"); 设置标签体的内容 - text() : 对标签体的操作 - jq对象.text(); 获取标签体的内容 - jq对象.text("值"); 设置标签体的内容 - html和text区别 "设置内容: html可以将内容解析,text只是作为普通文本 获取内容:html获取所有源码内容,text只是获取文本内容" - 文档处理 - 内部插入: - append a.append(c) 将c插入到a的内部的后面 - prepend a.prepend(c) 将c插入到a的内部的前面 - appendTo a.appendTo(c) 将a插入到c的内部的后面 - prependTo a.prependTo(c)将a插入到c的内部的前面 内插入案例: <!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"> $(document).ready(function() { //0.获取要操作的对象 var $city = $("#city"); var $fk = $("#fk"); //1.在city内部的后面追加 反恐 //向指定标签内部的前面进行插入 // $city.append($fk); // $fk.appendTo($city); //2.在city内部的前面插入 反恐 //向指定标签内部的后面进行插入 // $city.prepend($fk); $fk.prependTo($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> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul> </body> <script type="text/javascript"> </script> </html> $(document).ready(function() { //1 获取 username的value属性的值 // alert($("[name='username']").val()); //2 设置 username的默认值为"许多多" $("[name='username']").val("许多多"); //3通过html获取div标签体的内容 // alert($("div").html()); //4通过html设置div标签体的内容 // $("div").html("已满18,请戴眼镜..."); //5通过text获取div标签体的内容 // alert($("div").text()); //6通过text设置div标签体的内容 // $("div").text("已满18,请戴眼镜!!!!"); //7 两者设置值的区别 //html在设置内容时,可以解析html标签 $("div").html("<font color='red'>已满18,请戴眼镜...</font>"); //text在设置内容时,原样设置 // $("div").text("<font color='red'>已满18,请戴眼镜...</font>"); //8 两者获取值的区别 //html在获取时,原样获取(不会解析任何标签) // alert($("div").html()); //text在获取时,会解析标签,仅仅获取文本内容 // alert($("div").text()); }); $(document).ready(function() { //1 获取 username的value属性的值 // alert($("[name='username']").val()); //2 设置 username的默认值为"许多多" $("[name='username']").val("许多多"); //3通过html获取div标签体的内容 // alert($("div").html()); //4通过html设置div标签体的内容 // $("div").html("已满18,请戴眼镜..."); //5通过text获取div标签体的内容 // alert($("div").text()); //6通过text设置div标签体的内容 // $("div").text("已满18,请戴眼镜!!!!"); //7 两者设置值的区别 //html在设置内容时,可以解析html标签 $("div").html("<font color='red'>已满18,请戴眼镜...</font>"); //text在设置内容时,原样设置 // $("div").text("<font color='red'>已满18,请戴眼镜...</font>"); //8 两者获取值的区别 //html在获取时,原样获取(不会解析任何标签) // alert($("div").html()); //text在获取时,会解析标签,仅仅获取文本内容 // alert($("div").text()); }); - 外部插入: - after a.after(c) 在a的后面插入c - before a.before(c) 在a的前面插入c - insertAfter a.insertAfter(c) 将a插入到c的后面 - insertBefore a.insertBefore(c) 将a插入到c的前面 案例: <!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"> $(document).ready(function() { //0.获取要操作的对象 var $city = $("#city"); var $p2 = $("#p2"); //1.在 p2 的后面插入 city //在指定的标签的后面进行插入 // $p2.after($city); // $city.insertAfter($p2); //2.在 p2 的前面插入 city //在指定的标签的前面进行插入 // $p2.before($city); $city.insertBefore($p2); }); </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> - 删除: - empty():清空元素 (清空所有的子标签) - remove():移除 (自杀) 删除案例: <!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"> $(document).ready(function() { //0.获取要 操作的对象 var $ul = $("#city"); //1.清空ul // $ul.empty(); //2.移除ul $ul.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> <script type="text/javascript"> </script> </html> - jQuery的事件总结 - 事件切换(知道) - hover:相当于给一个元素添加了mouseover和mouseout两个事件 "jq元素对象.hover(function(){ //第一个函数相当于mouseover },function(){ //第二个函数相当于mouseout });" - toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持) "jq元素.toggle(function(){},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-1.8.3.min.js" ></script>--> <script type="text/javascript"> $(function(){ $("#divId").hover(function(){ //相当于mouseover $(this).html("mouseover事件被触发了"); },function(){ //相当于mouseout $(this).html("mouseout事件被触发了...."); }); $("#bId").toggle(function(){ alert(1); },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> - 常见事件 - submit 表单提交事件★ - focus 获得焦点事件 ★ - blur 失去焦点 ★ - change 改变 ★ - click 单击 ★ - dblclick 双击 - keydown 键盘按下 - keyup 键盘弹起 - keypress 键盘按下并弹起 - mousedown 鼠标按下 - mouseup 鼠标弹起 - mousemove 鼠标移入 - mouseout 鼠标移出 - mouseover 鼠标悬停 - 事件和事件源的绑定 ★ - jq对象.事件名称(function(){}); - validate插件 "插件:指的就是别人已经写好的功能代码,直接引入使用即可. " - 作用:对表单进行校验 - 下载: "下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip" - 使用方式: - 1.导入jquery.js "validate是基于jquery写的,所以要先导入jquery的js文件" - 2.再导入validate.js "想要使用别人的插件就必须的导入人家已经写好的js文件(插件)" - 3.在页面加载成功后,要确定对页面上的哪个表单进行校验 " $(function(){ 表单对象.validate(); });" - 4.validate使用格式: " 表单对象.validate({ rules:{}, //校验规则 messages:{} //提示信息 });" - 5.常见的校验规则 - 校验器名称 描述 值 - required: 必须填写 true|false - number: 只能输入数字 true|false - min: 最小值 数字 - max: 最大值 数字 - range: 取值范围 [min,max] - minlength: 最小长度 数字 - maxlength: 最大长度 数字 - rangelength: 长度范围 [minlength,maxlength] - equalTo: 和谁相等 通过jQuery选择器选中指定元素对象 - email: 校验邮箱 "email" - 6.rules校验器语法: - 方式1:单一校验 "name属性的值:"校验器"" - 方式2:多个校验 " name属性的值:{ 校验器1:值1, 校验器2:值2 }" - 7.messages自定义提示信息语法: - 方式1: "name属性的值:"提示信息"" - 方式2: " name属性的值:{ 校验器1:"提示信息1", 校验器2:"提示信息2" }" <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1.导入jq的js文件--> <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script> <!--2.导入validate的js文件--> <script type="text/javascript" src="../js/jquery.validate.js" ></script> <script type="text/javascript" src="../js/messages_zh.js" ></script> <script> /*3.在页面加载成功之后,锁定要校验的表单对象*/ $(function(){ //锁定要校验的表单对象,调用validate方法 $("#formId").validate({ rules:{ //单一校验规则 // username:"required", // //多个校验规则 // password:{ // required:true, // number:true // }, // repassword:{ // required:true, // number:true, // equalTo:"[name='password']" // }, // zuixiaozhi:{ // required:true, // min:180 // }, // shuzhiqujian:{ // required:true, // range:[18,26] // } card:{ required:true, cardLength:true } }, //校验规则 messages:{ // username:"<font color='red'>用户名不可为空</font>", // password:{ // required:"密码不可为空", // number:"密码只能为数字" // }, // zuixiaozhi:{ // min:"请输入不小于{0}的值啊...." // }, // shuzhiqujian:{ // range:"请输入年龄在{0}到{1}之间的年龄" // } card:{ cardLength:"请输入16或18位的数字" } } //提示信息 }); }); //编写自定义校验器 $.validator.addMethod("cardLength",function(val,ele,par){ if(par){ if(val.length==16||val.length==18){ return true; } return false; }else{ return true; } },"输入的不合法"); </script> </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="text" name="card" /> <br /> <input type="submit" value="提交" /> </form> </body> </html> - 自定义校验器 - 格式: - $.validator.addMethod(name,function(value,element,params){},"message"); - 参数说明: - name:校验器的名称,唯一 - function:校验规则 - value:用户输入的值 - element:要校验的dom对象 - params:校验器的值 - message:当不满足校验规则时的提示信息 - 扩展: - 筛选-查找; - children(["选择器"]): 所有孩子 - parent(): 父母 - find("选择器"): 查找后代 - next(): 下个兄弟 + - nextAll(): 所有的弟弟 ~ - prev(): 小哥哥 - prevAll(): 哥哥们 - siblings(): 兄弟们 - 筛选-过滤 - is("选择器"):判断是否满足 返回Boolean 查找案例: <!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 type="text/javascript" src="../js/assist.js" ></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script type="text/javascript"> $(document).ready(function() { //<input type="button" value=" 选择 id=two 所有子元素" id="b1" /> $("#b1").click(function(){ $("#two").children().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" /> $("#b2").click(function(){ // $("#two").children("[title=other]").css("background-color","#ff0"); $("#two").find("[title=other]").css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" /> $("#b3").click(function(){ $("#two").next().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" /> $("#b4").click(function(){ $("#two").nextAll().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" /> $("#b5").click(function(){ $("#two").prev().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" /> $("#b6").click(function(){ $("#two").prevAll().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 所有兄弟" id="b7" /> $("#b7").click(function(){ $("#two").siblings().css("background-color","#ff0"); }); //<input type="button" value=" 选择 id=two 父元素" id="b8" /> $("#b8").click(function(){ $("#two").parent().css("background-color","#ff0"); }); }); </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> 过滤案例: <!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"> $(document).ready(function() { $("#b6").click(function(){ //判断样式为hide的div 下一个兄弟是否是span var flag = $("div:hidden").next().is("span"); alert(flag); }); }); </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="b6" /> <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> 用户分组案例: <!DOCTYPE html> <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"> </script> <style type="text/css"> div * { display: block; width: 200px; } div span { background-color: #0f0; } </style> <script> $(function(){ //给span派发单击事件 $("span").click(function(){ //将span后面的a标签显示或隐藏 $(this).nextAll().toggle(); $(this).parent().siblings().find("a").hide(); }); }); </script> </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> 省市联动案例: <!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> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function() { /* 步骤分析: 1.确定事件(改变事件) 给省份的下拉选添加改变事件 2.编写改变事件函数 //a.获取省份的value的值 //b.获取所对应的市数组 //c.获取市的下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市的下拉选中*/ $("[name=pro]").change(function(){ //a.获取省份的value的值 // alert(this.value); //b.获取所对应的市数组 var cityArr = arr[this.value]; // alert(cityArr); //c.获取市的下拉选对象 var $cityObj = $("#city"); //初始化 $cityObj.html("<option>=请选择=</option>"); //d.遍历市数组,将每一个市拼成option插入到市的下拉选中 $.each(cityArr, function() { // $cityObj.append("<option>"+this+"</option>"); $("<option>"+this+"</option>").appendTo($cityObj); }); }); }); </script> </head> <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 id="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> <!-- --> 左右选中案例: <!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"> <style> input[type='button'] { width: 50px; } </style> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ /* 步骤分析: 1.确定事件(单击事件) 给按钮派发单击事件 2.编写函数 //a.将左边选中的第一个插入到右边*/ $("#toRight1").click(function(){ //a.将左边选中的第一个插入到右边 $("#left option:selected:first").appendTo($("#right")); }); $("#toRight2").click(function(){ //a.将左边选中的插入到右边 $("#left option:selected").appendTo($("#right")); }); $("#toRight3").click(function(){ //a.将左边选中的插入到右边 $("#left option").appendTo($("#right")); }); }); </script> </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="multiple" style="width:100px" size="10"> </select> </td> </tr> </table> </body> </html> 表单效验案例: <!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> $(function(){ $("#formid").validate({ rules:{ username:{ required:true }, email:{ required:true, email:"email" }, sex:{ required:true } }, messages:{ username:{ required:"用户名不可为空" } } }); }); </script> </head> <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="date" 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>
