# 一文搞懂jquery

back

jQuery是JavaScript Query的缩写形式。jQuery是一款非常优秀的JavaScript库，即便是MVVM框架盛行的今天，也有超过半数的网页及应用直接或间接的使用了jQuery。jQuery的设计理念是“Write Less, Do More“，即写的更少，做的更多！使用jQuery可以大大简化我们的JS代码，从而提高开发效率

<script src="jquery-1.12.4.js"></script>
<!--本地引入-->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!--CDN引入-->

1
2
3
4

# jQuery核心

back

# $符号

jQuery实际上是一个函数对象。事实上，jQuery通过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，为了写的更少，我们通常都使用$符号表示该对象。

 window.jQuery === window.$; //true
 jQuery === $;// true
 typeof($);// 'function'

1
2
3

如果你还使用了其他框架，或自定义了$变量，那么有可能和jQuery的$符号造成冲突。

jQuery.noConflict();

在使用jQuery编程之前，首先调用noConflict()方法，解除jQuery对$符号的占用，这样就可以解决这一问题了。但往后就只能通过变量jQuery来使用jQuery的所有功能了。

# 参数

$核心函数可以接收3种类型的参数，分别是函数引用、字符串、DOM对象。

a) 接收一个函数

$(function(){
//some code
});
//这种方式的完整写法应该是：
//$(document).ready(function(){some code});

1
2
3
4
5

这种方式类似原生JS的window.DOMContentLoaded方法，只要HTML文档解析完毕并生成DOM tree就会触发该事件。但是在jQuery中可以同时存在多个该方法。

b) 接收字符串

var box1 = $('div');
//接收css选择器字符串，可以拿到DOM tree中相应的DOM元素，并把它包装成jQuery对象
var box2 = $('<div></div>');
//接收HTML代码片段，可以创建相应的DOM元素，并把它包装秤jQuery对象

1
2
3
4

c) 接收DOM元素

var box = document.getElementById('#box');
var jBox = $(box);//jQuery obj

1
2

如果核心函数接收一个DOM元素，那么它会把该DOM元素包装成一个jQuery对象，并返回。
jQuery对象事实上是一个类数组，保存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。

# 静态方法

jQuery提供了一些静态方法，例如遍历数组，字符串去空格，判断数据类型等等，这些方法在ES5之前都是很实用的方法，但ES5之后，原生JS就已经实现了这类似的方法，所以这里就不再详细讲解了，有兴趣可以自行查看官方文档。jQuery把ajax相关操作也封装为静态方法，稍后会专门讲解。这里要讲的只有holdReady方法。

$.holdReady(true);
 $(function(){
 //some code
 });
 $.joldReady(false);
 //参数true，暂停ready方法的执行，参数false，恢复ready方法的执行

1
2
3
4
5
6

# jQuery属性和节点

back

# 选择器

选择器是jQuery的核心功能。绝大多数css支持的选择器都可以在jQuery得到支持。

$('p');//标签选择器
$('.class');//类选择器
$('#id');//id选择器
$('[type=text]');//属性选择器
$('input[type=email]');//组合选择器
$(#id p);//后代选择器
$(#id p:first-child);//筛选选择器
//...

1
2
3
4
5
6
7
8

通过核心函数获取到的DOM元素都被包装成jQuery对象，以类数组的形式存储。我们可以通过eq方法获取其中某一个，还可以通过get方法获取DOM对象。

var divList = $('div');//获取所有div
var domDiv = divList.get(0);//获取第一个Dom元素，如果有的话
var jqDiv = divList.eq(0);//获取第一个jq对象，如果有的话
var another = $(domDiv);//把Dom元素转化成jq对象

1
2
3
4

另外jQuery还提供了一些通过层级结构查找元素的方法。

$('div').find('span');//查找div内部的span，等同于$('div span')
$('li').first();//获取匹配的元素中的第一个
$('li').last();//获取匹配的元素中的最后一个
$('div').next();//获取所有匹配到的div的下一个兄弟元素的集合
$('div').prev();//获取所欲匹配到的div的上一个兄弟元素的集合
$('div').parent();//获取匹配到的div的共同父元素
$('div').children();//获取div的子元素集合
$('div').siblings();//获取div的兄弟元素集合
//...

1
2
3
4
5
6
7
8
9

# 属性操作

获取DOM元素之后，jQuery把它们包装成jq对象，然后你就可以通过jQuery提供的方法修改相应的DOM元素了，包括CSS，文本，属性节点，HTML结构等等。

$('div').attr('name','test');//设置属性名：name，属性值：test
$('div').attr('name');//获取属性name的值
$('div').removeAttr('name');//删除属性name
$('div').prop('name','test');
$('div').prop('name');
$('div').removeProp('name');
//prop的用法和attr一模一样，唯一不同的是prop既可以操作DOM元素的属性，也可以操作它的属性节点

1
2
3
4
5
6
7

当属性没有被显示的设置时，通过attr()方法获取将返回undefined，
而prop()方法可以返回true或者false，所以，如果你要检索和更改DOM属性，比如元素的checked，selected，或disabled状态，推荐使用prop()方法，其他时候都使用attr方法。

注意:使用上诉方法获取属性值时，返回的只是第一个匹配的DOM元素的相应属性值。但是设置的时候却是为所有匹配的DOM元素都添加该属性。

class类相关：

$('div').addClass('test');//添加类，如需添加多个类，使用空格隔开即可
$('div').removeClass('test');//删除类，如需删除多个类，也用空格隔开即可
$('div').toggleClass('test');//切换类，如果DOM元素已经有该类了，那么就删除，如果没有则添加

1
2
3

文本及结构相关：

$('div').html();//获取第一个匹配到的div的内容
$('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容
$('div').text();//获取所有匹配元素的文本内容
$('div').text('hello');//设置所有匹配到的div的文本内容
$('input').val();//获取匹配元素value值
$('input').val('hello');//获取匹配元素value值

1
2
3
4
5
6

css相关：

$('div').css('background-color','red');//设置元素的单个css属性
$('div').css({
    width:'200px',
    height:'200px',
    background-color:'red'
});//通过对象设置多个css属性

1
2
3
4
5
6

尺寸及位置相关：

$('div').width();//获取div的内容区宽度，可传参设置
$('div').height();//获取div的内容区高度，可传参设置
//innerWidth，innerHeight表示content+padding的宽高
//outerWidth，outerHeight表示content+padding+border的宽高
$('div').offset();//获取div相对视口的偏移量，返回值是一个包含top和left属性，且值为数字的对象
$('div').position();//获取div相对父元素的偏移量，返回值是一个包含top和left属性，且值为数字的对象
//offset和position都以像素计，并且只对可见的元素起作用

1
2
3
4
5
6
7

# 节点

jQuery也提供了节点的增、删、改、查相关方法。

1 $("div").append("<p>Hello</p>");//在div内部的末尾插入元素
2 $("div").prepend("<p>Hello</p>");//在div内部的开头插入元素
3 $("div").after("<p>Hello</p>");//紧挨着div的后面插入元素
4 $("div").before("<p>Hello</p>");//紧挨着div的前面插入元素
5 $("div").remove();//删除div元素，但是会保留文本
6 $("div").empty();//清空div中的所有内容

1
2
3
4
5
6

# jQuery事件

back

# 事件绑定和移除

jQuery提供了两种绑定事件的方式，第一种是on+事件名称的具体事件方法，第二种是直接使用on方法。

$('div').onclick(function(){});
$('div').on('click',function(){});
//事件处理函数可以是匿名函数，也可以是函数引用，如果涉及到解除事件绑定，建议使用函数引用的方式

1
2
3

jQuery的事件绑定类似原生JS的addEventListener方法，可以同时绑定同一类型的多个事件，而不会相互覆盖。jQuery通过off方法解除事件绑定。

function test(){};
$('div').on('click',test);
$('div').off();//移除div绑定的所有事件
$('div').off('click');//移除div绑定的所有click事件
$('div').off('click',test);//移除div绑定的具体事件

1
2
3
4
5

# 一次性事件和自动触发事件

通常我们给元素绑定的事件处理程序需要特定的事件才能触发，比如click，mouseover等等，jQuery提供了triggerHandler方法，你可以通过该方法手动触发元素绑定的事件处理程序，而不用等到特定事件发生。

$('div').on('click',function(){
//some code
});
//一般需要等到用户点击div，函数才会被执行
$('div').triggerHandler('click');
//自动触发div的click事件，不用等到用户点击

1
2
3
4
5
6

jQuery还提供了另一个方法：trigger。它的功能和triggerHandler方法一样。他们的不同之处在于triggerHandler不会触发事件的默认行为和冒泡。

$('div').one('click',function(){
//some code
});
//jQuery通过one方法绑定一个只会被触发一次的事件处理程序

1
2
3
4

# 事件委托

jQuery通过delegate方法实现事件委托。该方法使用上和原生JS有一些区别，原生JS实现事件委托也请移步《DOM之事件（一）》。

$("ul").delegate("li", "click", function(){
$(this).toggleClass("test");
});
//把li的点击事件委托给ul，被委托元素一般是委托元素的父元素

1
2
3
4

# jQuery动画

back

# 显示和隐藏

jQuery通过show方法和hide方法实现元素的显示和隐藏。它的原理是修改元素的display和宽高及opacity属性。

$('div').show(1000);
//使div显示，1000表示整个过程持续时间，单位是ms
$('div').hide(1000);
//使div隐藏

1
2
3
4

这两个方法还可以接受一个回调函数作为第二个参数，用于设置动画完成后需要执行的操作。

# 展开和收起

jQuery通过slideDown，slideUp实现平缓的展开和收起元素。该方法是通过高度变化（向下增大或减小）来动态地显示元素，在显示完成后可选地触发一个回调函数。

$("p").slideDown(1000);
//展开，可以设置一个时间，表示整个过程持续时间，单位ms
$("p").slideUp(1000);
//收起
$("p").slideToggle(1000);
//切换

1
2
3
4
5
6

展开后收起动画常用来做下拉菜单。

# 淡入淡出

jQuery通过fadeIn和fadeOut实现淡入淡出效果。该方法的原理是修改元素的opacity属性，不会改变元素的宽高。
也可接收一个回调函数。

$("div").fadeIn(1000);
//淡入，可一接收一个数字作为参数，表示过程持续时间，单位ms
$("div").fadeOut(1000);
//淡出
$("div").fadeTo(1000,0.5);
//调整到指定值
$("div").fadeToggle(1000);
//切换

1
2
3
4
5
6
7
8

# 自定义动画

jQuery通过animate方法实现自定义动画效果。

$('div').animate({
width:500px,
opacity:0.8
},1000);
//该方法接收一个对象，表示动画结束时元素的状态，第二参数是一个数字，表示持续时长，单位ms，也可以接收一个回调函数作为第三个参数

1
2
3
4
5

注意，jQuery的动画采用队列形式，每编写一个动画，就向动画队列中插入一个，只能等前面的执行完后才执行后面的

# 停止和延迟

jQuery的stop方法可以暂停正在执行的动画。

1 $('div').stop();
2 //立即停止当前动画，直接开始执行队列中后续的动画，如果有的话
3 $('div').stop(true,true);
4 //stop方法可以接收两个blloean值作为参数。第一个规定在停止当前动画的同时对否清除队列中的其他动画，第二个规定在停止当前动画的同时是否要直接完成队列中其他动画。

1
2
3
4

介于jQuery通过队列形式控制动画执行，我们建议在调用jQuery动画之前都先调用一次stop方法，以免造成动画混乱。

$('div').stop();
$('div').animate({
//some code
},1000);

1
2
3
4

jQuery通过delay延迟动画的执行。

 $('div').animate({
width:200px;
height:200px;
},1000).delay(1000).animate({
background-color:red;
},1000);
//在改变宽高后等待1000ms再改变背景颜色

1
2
3
4
5
6
7

# jQuery_Ajax

back

jQuery封装了功能完整的Ajax方法，我们常用的jQuery方法有3个，分别是$.ajax()、$.get()、$.post()。

# ajax方法

ajax方法接收一个对象作为参数，对象的属性名为ajax的设置参数，属性值为ajax的设置值。

 $.ajax({
 type: "POST",
 url: "some.php",
 data: "name=ren&age=12",
 cache: false;
 dataType:"text",
 success: function(msg){
 //some code
 },
1error:function(msg){
//some code
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13

常用的参数有：

type：请求类型，可选值有post和get。
url：发送请求的地址。
data：发送到服务器的数据。必须是“key0=value0&key1=value1“或键值对的形式（对象）。
cache：规定是否读取缓存数据，true表示读取，false表示不读取，直接从服务器获取。
dataType：期望服务器返回的数据类型，可选值有xml，html，script，json，text。
success：ajax请求成功回调函数。
error：ajax请求失败回调函数。

使用ajax()方法时，所有的设置参数都是可选的，除了上诉参数外，还有很多其他的参数可选，这让我们在通过jQuery实现ajax时有了更大的灵活性。如果你想了解更多相关参数的信息，请到jQuery官网查询。

# get方法

如果你觉得ajax()方法发送简单get请求还是太麻烦，那么你可以直接使用$.get()方法。

$.get("url",{ name: "ren", age: "12" },function(msg){//some code},"text");

该方法只需要4个参数，发送请求的url，发送的数据，请求成功的回调函数，期望的返回值类型。

# post法

使用$.post()方法和$.get()一样，他们都只需要4个参数。

$.post("url",{ name: "ren", age: "12" },function(msg){//some code},"text");

# load方法

load()方法可以直接请求服务器的数据并添加到DOM元素中。默认使用get方式，如果你向服务器发送了数据，将自动转换为post方式。

$("div").load("test.html",{name:"ren",age:"12"},function(){//some code});
//载入一份新的html文档到div中，并向服务器发送了数据。

1
2

load()方法可以有3个参数，请求的url，向服务器发送的数据，请求成功后的回调函数。