jQuery
jQuery
jQuery是一个优秀的javasctipt库（我们说为框架），他是轻量级的js库，对于javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
jQuery的使用：
jQuery它是一个库（框架），要想使用它，必须先引入
jquery-1.8.3.js:一般用于学习阶段
jquery-1.8.3.main.js:用于项目使用阶段
jQuery的简单入门
所有的jquery代码在页面加载函数
$(function(){
jquery代码
});
获取元素：
JS:document.getElementById();
JQ:$(“#id”);
jquety和js的相互转换
dom转换为jquery
function JSWrite(){ //document.getElementById("span1").innerHTML="美美哒！"; var spanEle = document.getElementById("span1"); $(spanEle).html("美美哒！"); }
jquery转换为dom:
$(function(){ /*document.getElementById("btn1").onclick = function(){ document.getElementById("span1").innerHTML="帅帅哒！"; }*/ //JQ对象转换成DOM对象的第一种方式 //$("#span1")[0].innerHTML="呵呵哒！"; //JQ对象转换成DOM对象的第二种方式 $("#span1").get(0).innerHTML="呵呵哒！"; }); });
JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
实现广告显示：
步骤：
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
代码：
<script type="text/javascript"> var time; $(function(){ time=setInterval("showAd()",3000);});function showAd(){ //$("#img1").show()； //$("#img1").slideDown(3000); $("#img1").fadeIn(3000); clearInterval(time); time = setInterval("hideAd()",5000); } function hideAd(){ //$("#img1").hide(); //$("#img1").slideUp(3000); $("#img1").slideUp(3000); clearInterval(time); }</script>
Toggle的使用：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn1").click(function(){ $("#img1").toggle(); }); }); </script> </head> <body> <input type="button" value="显示/隐藏" id="btn1"/><br /> <img src="../img/registImg.jpg" id="img1" /> </body></html>
jquery选择器：
基本选择器
id选择器：$(“#id名称”);元素选择器：$(“元素名称”);类选择器：$(“.类名”);通配符：*多个选择器共用(并集)
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)$("body div").css("background-color","pink");
parent > child : 在给定的父元素下匹配所有的子元素(儿子)$("body>div").css("background-color","pink");
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)$("#two+div").css("background-color","pink");
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)$("#one~div").css("background-color","pink");
隔行换色
步骤：
第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
代码：<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <link rel="stylesheet" type="text/css" href="../css/style.css"/> <script> $(function(){ $("tbody tr:even").addClass("even"); $("tbody tr:odd").addClass("odd"); }); </script>
全选和全不选
分析：
需要使用jquery的选择器(id选择器、类选择器)
需要使用jquery的属性操作方法 prop() 在jq1.1.1版本时使用
步骤：
第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
代码：<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script> $(function(){ //找到下面所有的复选框并设置属性checked() /*if($("#select")[0].checked==true) $(".selectOne").attr("checked",true) }*/ $("#select").click(function(){ $(".selectOne").attr("checked",this.checked); }); }); </script>
二联单
数组的遍历操作：
一：$(function(){ // 全选/ 全不选 $("#checkallbox").click(function(){ var isChecked = this.checked; //使用对象访问的方式进行遍历，语法：$().each(function(){}) $("input[name='hobby']") .each(function(){ this.checked = isChecked; }); });});
二：$.each( [0,1,2] , function(i , n ){ alert( "Item #" + i + ": " + n );});
文档处理操作：
apend: A.append(B) 将B追加到A的内容的末尾处
appendTo: A.appendTo(B) 将A加到B内容的末尾处
步骤：
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
代码：<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script> $(function(){ //2.创建二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){ //10.清除第二个下拉列表的内容 $("#city").empty(); //1.获取用户选择的省份 var val = this.value; //alert(val); //3.遍历二维数组中的省份 $.each(cities,function(i,n){ //alert(i+":"+n); //4.判断用户选择的省份和遍历的省份 if(val==i){ //5.遍历该省份下的所有城市 $.each(cities[i], function(j,m) { //alert(m); //6.创建城市文本节点 var textNode = document.createTextNode(m); //7.创建option元素节点 var opEle = document.createElement("option"); //8.将城市文本节点添加到option元素节点中去 $(opEle).append(textNode); //9.将option元素节点追加到第二个下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }); });</script>
使用JQ完成下拉列表左右选择
步骤：
第一步：确定事件(鼠标单击事件click)
第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
代码： <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script> $(function(){ /*1.选中单击去右边*/ $("#selectOneToRight").click(function(){ $("#left option:selected").appendTo($("#right")); }); /*2.单击全部去右边*/ $("#selectAllToRight").click(function(){ $("#left option").appendTo($("#right")); }); /*3.选中双击去右边*/ $("#left option").dblclick(function(){ $("#left option:selected").appendTo($("#right")); }); });</script>
使用JQ完成表单校验：
这里使用validation插件完成对表单数据的校验
validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--引入validate插件js文件--><script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入国际化js文件--><script type="text/javascript" src="../js/messages_zh.js" ></script><script>
validate需要手动的声明，对那个表单记性校验，手动方式可以使用以下四种$(function(){$("#checkForm").validate({});});</script>
| 校验类型 | 取值 | 描述 |
| required | true/false | 必填字段 |
| 邮件地址 | ||
| url | 路径 | |
| date | 数字 | 日期 |
| dateISO | 字符串 | 日期（YYY-MM-dd） |
| number | 数字（负数，小数，） | |
| digits | 整数 | |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| ragelentth | [minL,maxL] | 长度范围 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值相同 |
| remote | url路径 | ajax校验 |
代码：<script> $(function(){$("#checkForm").validate({
rules:{username:{required:true,minlength:6},
password:{required:true,digits:true,minlength:6}},
messages:{username:{required:"用户名不能为空!",minlength:"用户名不得少于6位！"},
password:{required:"密码不能为空!",digits:"密码必须是整数!",
minlength:"密码不得少于6位!"}}});});</script>
