JQuery

jQuery：是一个优秀的JavaScript的轻量级框架，兼容css3和各大浏览器，提供了dom，events，animate，ajax等简易的操作。并且jQuery的插件非常丰富，大多数功能都有相应的插件解决方案。

jQuery就是一个js文件，只不过它对JS进行了简化。

引入：在需要使用jQuery的html中使用js的引入方式进行引入

<script src=jquery-1.12.4.min.js></srcipt>    该标签用来引包，里面不允许写任何js语句

1.1入口函数（ $() 称之为jq选择器环境，在里面加上引号填写相关的选择器即可，就可以获取匹配的元素）

js：window.onload=function(...){}
jq：$(document).ready(function(){...});
    $(function(){...});

（1）两者功能都一致，都可以让获取元素的行为发生在渲染元素之后

（2）js入口只允许存在一个，书写多个的话，后面的会覆盖前面的

（3）jq入口允许多个存在，且并行存在，都会生效

（4）js入口需要等待页面上所有资源加载完毕，而jq入口只需要等待页面上标签轩然完毕即可，jq入口速度更快

1.2 事件

js：js 对象.onclik = function(){...}
jq：jquery 对象.click(function(){...}

注意：jq中的事件类型统一不要加on

1.3 可以整体操纵

注意：

（1）在jq里面，通过$() 返回的数组，允许开发者整体操纵

（2）选择数组中的其中一个元素：js对象[下标]        jq对象.eq(下标)

1.4 对象互转

jQuery本质上虽然也是js，但是使用jQuery的属性和方法必须保证对象是通过jQuery的方式获取的，使用js获取的对象是js对象，而是用jquery方式获取的对象是jquery对象。如果想交替使用，那么必须对象互转。

js对象转换成jq对象：$(js对象)

jq对象转换成js对象：jq对象[索引] 或 jq对象.get(索引)

1.5 控制css

（1）单属性访问：jq对象.css('width');

（2）单属性修改：jq对象.css('width','100px');

（3）多属性修改：jq对象.css({'width':'100px','heigth':'100px'});    可一次修改多个css属性

1.6 控制标签属性

（1）单属性访问：jq对象.attr('class');

（2）单属性修改：jq对象.attr('class','myClass');

（2）多属性修改：jq对象.attr({'class':'myClass','id':'myId'});    可一次修改多个attr属性

（4）删除属性：jq对象.removeAttr('class');

获取属性我们也可以使用prop()，他跟attr()是互补的，一般来说，我们都是使用attr()来获取标签属性，但是有时候也会有获取不到的情况，这个时候可以使用prop()的形式来获取

jq对象.prop();

1.7 val()函数：针对表单元素的value属性的值，在jq里面单独封装了一个方法，本身使用attr()也是不能正确获取的。

jq对象.val()

注意：val()函数有参时，修改value值；无参时，返回value值。

1.8 控制标签内容

jq对象.html();

括号里面写参数代表修改，不写代表获取

2 选择器

2.1 基本选择器

$('标签名')        标签选择器
$('#id名')         id选择器
$('.clsaa名')      类选择器

2.2 层次选择器

 

$('A  B')        获得A元素内部的所有子元素B
$('A > B')       获得A元素内部的第一层所有子元素B
$('A + B')       获得A元素同级下一个B元素
$('A ~ B')       获得A元素后面的所有同级B元素

2.3 属性选择器

$('A[属性名]')                                    获得有属性名的A元素
$('A[属性名=值]')                                 获得属性名等于值A的元素
$('A[属性名!=值]')                                获得属性名不等于值A的元素
$('A[属性名^=值]')                                获得属性名以值开头的A元素
$('A[属性名$=值]')                                获得属性名以值结尾的A元素
$('A[属性名*=值]')                                获得属性名含有值得A元素
$('A[属性名!=值][属性名^=值]')                     复合选择器，多个属性同时过滤

2.4 基本过滤选择器

$('A:first')                 过滤出第一个
$('A:last')                  过滤出最后一个
$('A:not(选择器)')            排出除指定的元素
$('A:eq()')                  按索引值过滤
$('A:gt()')                  过滤大于指定索引值  从0开始
$('A:It()')                  过滤小于指定索引值
$('A:even')                  过滤索引值为偶数，从0开始
$('A:odd')                   过滤索引值为奇数
$(':header')                 过滤所有的标题标签 h1-h6
$(':animated')               过滤正在执行动画的标签对象

2.5 表单属性选择器

$(':enabled')            选择可用的input标签
$(':disabled')           选择不可用的input标签
$(':checked')            选择选中的radio或者checkbox标签
$(':selected')           选择选中的<select>

2.6 筛选选择器

注意：所有筛选选择器写在选择函数外

jq对象.parent()                  当前元素的亲生父级元素
jq对象.parents()                 当前元素的所有父级元素
jq对象.siblings()                最牛的筛选选择器，可以选出除了自己以外的所有同级元素
jq对象.children()                当前元素的第一层子元素
jq对象.find()                    当前元素的指定子元素

3 控制css

jq对象.addClass()                添加类
jq对象.removeClass()             删除类
jq对象.hasClass()                判断是否有类
jq对象.toggleClass()             切换类

4 DOM操作（增删改查）

4.1 新增节点

$(selector).append(content)	            在匹配元素内部最后面新增一个节点
$(content).appendTo(selector)		    把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换）
$(selector).prepend(content)		    在匹配元素内部最前面新增一个节点
$(content).prependTo(selector)		    把新节点追加到匹配元素内部最前面（效果同prepend，只是书写上前后位置互换）
$(selector).after(content)		    在匹配元素同级之后新增一个节点
$(content).insertAfter(selector)	    把新节点追加到匹配元素同级之后（效果同insertAfter，只是书写上前后位置互换）
$(selector).before(content)		    在匹配元素同级之前新增一个节点
$(content).insertBefore(selector)	    把新节点追加到匹配元素同级之前（效果同insertBefore，只是书写上前后位置互换）

4.2 删除节点

remove()	删除节点，斩草除根，全部删除
empty()		清空节点，斩草留根，只清空内部的东西，保留最外面的标签

4.3 替换节点

$(selector).replaceWith(content)	  100%把旧的替换掉

5 索引值

在jq中凡是用$()选择器选出来的元素，都可以使用index()，返回这个元素HTML结构中相对于父级的排列位置，这个位置称之为索引值；

位置的序号从0开始计数的。index()函数，又称之为索引值函数

注意：

（1）如果index()的匹配对象中有很多个元素，只会返回第0个元素相对于它父亲的序号

（2）如果index()的匹配对象匹配失败，会返回-1，如果出现-1，代表出错

6 遍历函数：jquery对象本身就是数组函数，通过jquery选择器获得的都是满足该条件的对象集合体。因此在常常需要对jquery对象进行遍历。

6.1 原始方式遍历（跟java和js一样，既然是数组那么就可以使用原始的for循环进行遍历）

for(var i=0; i<jq对象.length; i++){
    alert();
}

6.2 jquery对象的方法（此方式是jq特有的遍历方式，使用jQuery集合对象调用each方法即可遍历）

jq对象.each(function(index,element){
    alert(index);          //打印索引
    alert(element);        //打印集合对象中的每一个元素
})

$(element).css('color','red');在使用的时候必须加选择器环境$()
一般我们很少用element这个参数，this在这里等同于element

6.3 jquery的全局方法（是jquery特有的遍历方式，与上面jquery的对象方法相似，但此处的each方法不是某个具体jquery对象，而是jquery的全局对象的each方法，名字和功能虽然相同，但语法不同）

$.each(jq对象,function(index,element){
    alert(index);        //打印索引
    alert(element);      //打印集合对象中的每一个元素
})

注意：不管用哪种遍历方式，遍历的集合中的每一个元素都是JS对象，因此想要使用JQ的方法需要加$()。

7.事件

7.1 事件的绑定

绑定一个事件：

jq对象.bind("事件类型",响应函数);
$("btn").bind("click",function(){
    alert();
});

绑定多个事件：

jq对象.bind({事件类型1:function(){},事件类型2:function(){}});

$("button").bind({
    click:function(){},
    mouseover:function(){},
    mouseout:function(){}
});

7.2 事件的解绑

jq对象.unbind("事件类型")；

解绑所有事件：

jq对象.unbind();

解绑指定事件：

jq对象.unbind("click");

7.3 事件切换

hover(over,out) == mouseover+mouseout

jq对象.hover(function(){
    //等同于mouseover事件，鼠标移入会执行
},function(){
    //等同于mouseout事件，鼠标移出会执行
})

jq对象.hover(function(){
    //只写一个匿名函数，代表鼠标意如何移除分别执行一次这里的js语句
})

8 表单验证插件（validate）

插件：实现了某些特定功能的组件

框架：是一个集合体，里面不仅仅有功能

插件一共分为两类，一类是基于js的插件，一类是基于jquery的插件

唯一的区别就是：基于jquery的插件在使用的时候一定要引jquery包

8.1 使用

validate是jquery插件，必须在jquery的基础上运行。我们将导入jquery库，validate库，和国际化资源库（可选）

<!--依赖的jquery库-->
<script src="js/jquery-1.12.4.min.js"></script>
<!--validate校验库-->
<script src="js/jquery.validate.js"></script>

8.2 调用

<script>
$("form表单的选择器").validate({
    rules:{
    表单项name值:校验规则,
    表单项name值:校验规则...
    },
    messages:{
    表单项name值:错误提示信息,
    表单项name值:错误提示信息...
    }
});
<script>

8.3 常用的校验规则

8.4 错误的提示信息出现的位置不对时

（1）F12或者右键审查元素，打开控制台，选中错误信息标签

（2）右键该标签的源代码复制

（3）把复制的内容粘贴到我们想让它显示的html文档中，接着把标签里面的文字内容删除即可

8.5自定义检验规则

如果预定义的检验规则尚不能满足需求的话可以进行自定义校验规则：

$.validator.addMethod(name,message);
    参数1：name：校验规则的自定义名称。例如：aaa
    参数2：method：执行校验是使用的处理函数。返回true表示校验通过，返回false表示校验未通过。
        function(value,element,params){}，处理函数被调用时，可以获得3个参数
            参数value：表单项的value值。例如：<inpupt value="">
            参数element：被校验的表单项
            参数params：使用当前检验规则传递的值。例如：rules：{username:{required:true}}，这里返回true
    参数3：message，校验未通过时的提示信息（可以不写，不写可以再messages里面配置）。

注意：自定义校验规则写完了之后，一定要在rules中开启！