4.jQuery

jQuery

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

jQuery引入

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

<script type="text/javascript" src="jquery-1.11.2.min.js></script>
也可以通过http引入（无需下载包）：<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

jQuery与js的区别

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
两者的关系与区别总结如下：
- 1. js对象只能使用js对象的方法，jQuery对象只能使用jQuery对象的方法。
- 1. jQuery对象与js对象之间的转换
  - js对象转换成jQuery对象，语法：$(js对象)
  - jQuery对象转换成js对象，语法：jquery对象[索引]或jquery对象.get(索引)
  - 需要注意的是：js对象是dom对象，jQuery对象其实是一个数组，这个数组里放的是一个一个的js的dom对象。
  - 需要注意jQuery对象的命名，一般如果是jQuery对象，那么定义变量名的时候就加上$。
- 1. 事件的写法不同，意义相同;
  - js的事件的写法：js对象.onclick = function(){......}
  - jQuery的事件的写法：jquery对象.click(function(){......})
- 1. js的页面加载完毕与jQuery的页面加载完毕
  - js的页面加载完毕：window.onload = function(){......}
  - jQuery的页面加载完毕：$(document).ready(function(){......})
    - 简写形式:$(function(){......});
  - 两者区别：
    - jQuery的页面加载完毕有简写形式：$(function(){......})
    - jQuery的页面加载完毕事件可以写多次，而js只能写一次，写多次也只会执行最后一次

jQuery的选择器

选择器的作用就是精确的选择标签.

jquery常用的选择器有如下：
- 基本选择器，层级选择器，属性选择器，基本过滤选择器，表单属性选择器等

1．基本选择器（作用和我们学习的css中选择器作用一样）

标签选择器（元素选择器）：$("html标签名");
id选择器：$("#id的属性值");
类选择器：$(".class的属性值");
组合选择器：$("选择器名，选择器名");

2．层级选择器

获得A元素内部的所有的B元素：$("A B")
获得A元素下面的所有B子元素：$("A > B")
获得A元素同级,下一个B元素：$("A + B")
获得A元素同级,所有后面B元素：$("A ~ B")
获得A元素同级,所有B元素：$("A").siblings("B");

3．属性选择器

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

4．基本过滤选择器

获得选择的元素中的第一个元素：:first
获得选择的元素中的最后一个元素：:last
不包括指定内容的元素例如：:not(selecter)
偶数，从 0 开始计数：:even
奇数，从 0 开始技术：:odd
指定第几个：:eq(index)
大于n个：:gt(index)
小于n个：:lt(index)
获得标题(<h1><h2>....):header—固定写法
获得动画:animated—固定写法,正在执行的动画

5．表单属性选择器

可用：:enabled
不可用：:disabled
选中(单选radio,多选checkbox,option)：:checked
选择(下列列表<select>)：:selected

jQuery的操作方法

1.jQuery的DOM操作方法

1)html代码/文本/值/属性：html()/text()/val()
2)html属性操作：attr()/prop()这2个方法一般情况下优先使用attr()、removeAttr(属性名)删除指定的属性
3)html的class属性操作：addClass() removeClass() toggleClass()
4)html的样式的操作：css()
5)html的元素的创建：$("完整的标签");例如$("<li></li>")
6)html的内部插入：append() prepend() before() after()
7)html元素的删除操作：remove() empty()
注意：jquery中的大部分方法是集设置值与获取值为一体的

2.jQuery的效果

1)元素的显示与隐藏
- show(speed,fn)显示
  - 参数speed，显示速度，单位：毫秒。固定字符串：slow,normal,fast
  - 参数fn，显示成功之后回调函数。
- hide(speed,fn)隐藏
- toggle()切换,如果一开始没有显示,则显示。如果已显示,则影藏
2)元素的滑动显示与隐藏
- slideDown()显示，高度变大。
- slideUp()隐藏，高度变小。
- slideToggle()切换
3)元素的淡入淡出的显示与隐藏
- fadeIn()显示
- fadeOut()隐藏
- fadeToggle()切换

jQuery的循环遍历

1．原始方式遍历
- 跟java和js一样，既然是数组那么就可以使用原始的for循环进行遍历。
- 例如：
  1
  2
  3
  4
  var $options = $("option");
  for(var i=0 ; i<$options.length ; i++){
  alert(option.value);
  }

2．jQuery对象的方法

此方式是jQuery特有的遍历方式，使用jQuery集合对象调用each()方法即可遍历。

例如：

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

3．jQuery的全局方法
- 此方式是jquery特有的遍历方式，与上面jQuery的对象方法相似，但此处的each()方法不是某个具体jquery对象的，而是jQuery的全局对象的each()方法，名字和功能虽然相同，但语法不同。
- 例如：
  1
  2
  3
  4
  5
  var $options = $("option");
  $.each($options,function(index,element){
  alert(index); //打印索引
  alert(element); //打印$options集合对象中的每一个元素
  });
注意：别管是上述的哪种遍历方法，遍历的集合中的每一个元素都是js对象，要想使用 jQuery的方法请使用$(js对象)进行转换。

jQuery的事件

jquey中常用的事件

事件的绑定与解绑

这种事件的绑定方式还可以实现解除绑定的事件

(1)事件的绑定：

jquery对象.bind(事件类型,响应函数);

例如：

绑定一个事件：

1
2
3

$("btn").bind("click", function(){
    alert();
});

绑定多个事件：

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

(2)事件的解绑：
- jquery对象.unbind([事件类型]);
- 例如：
  - 解绑所有事件：$("btn").unbind();
  - 解绑指定事件：$("button").unbind("click");

事件切换

//hover(fn1,fn2)是给标签同时绑定鼠标悬浮和鼠标移出事件
//fn1：鼠标悬浮事件执行的函数,fn2:鼠标移出事件执行的函数。
//hover(over,out) == mouseover + mouseout
hover([over,]out)
//是对点击方法的简写形式---循环点击
//fn1,鼠标第一次点击执行的函数
//fn2,鼠标第二次点击执行的函数
//结束之后再来一次循环
toggle(fn,fn2,[fn3,fn4,...])

jQuery的插件-表单校验的validate插件

插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件

使用方法：

下载jquery-validation插件并引入

编写表单校验的代码：

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

常用的校验规则

(1)、required:true必输字段
(2)、remote:"remote-valid.jsp"使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true必须输入正确格式的电子邮件
(4)、url:true必须输入正确格式的网址
(5)、date:true必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true必须输入合法的数字(负数，小数)
(8)、digits:true必须输入整数
(9)、creditcard:true必须输入合法的信用卡号
(10)、equalTo:"#password"输入值必须和#password相同
(11)、accept:输入拥有合法后缀名的字符串（上传文件的后缀）
(12)、maxlength:5输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]输入长度必须介于5和10之间的字符串(汉字算一个字符)
(15)、range:[5,10]输入值必须介于5和10之间
(16)、max:5输入值不能大于5
(17)、min:10输入值不能小于10

自定义校验规则

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
- (1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
- (2) 在rules中通过校验规则名称使用校验规则
- (3) 在messages中定义该规则对应的错误提示信息
  - 其中：
    - value是校验组件的value值
    - element是校验组件的节点对象
    - params是校验规则的参数