jQuery下载地址：http://jquery.com/download/

一、入口函数

入口函数的好处

• 保证页面中的元素可以获取到；
• 形成一个沙箱，不会造成全局污染；
• 不会出现覆盖问题

js中的入口函数:

window.onload = function() {}

jQuery中的入口函数：

写法一：

$(document).ready(function(){});

写法二：

$(function(){});

jQuery入口函数比js入口函数的优势

js中的入口函数要等待页面包括其他资源（图片等）加载完成才开始执行，而jQuery中的入口函数只等待页面加载完成就开始执行，因此，jQuery加载速度快。

二、jQuery对象与DOM对象

相关概念

jQuery对象：通过jQuery的方法获取到的元素,不能调用DOM对象。

DOM对象：使用JavaScript中的方法获取到的元素，不能调用jquery的方法。

两者联系：jQuery是伪数组，内部存放的是DOM对象，jQuery提供了很多的方法用于操作内部的DOM对象（show、css、text等）

相互转换

DOM --> jQuery:
$(dom对象)

jQuery --> DOM:
1、$li[0]
2、$li.get(0)

三、jQuery选择器

jQuery选择器是jQuery提供的一组方法，可以更加方便的获取到页面中的元素。

css选择器

jQuery完全兼容css选择器。

过滤选择器

这类选择器都带冒号:

筛选选择器

筛选选择器主要是方法。

四、jQuery操作样式

css操作

1、设置单个样式

//css(name, value);
//name：需要设置的样式名称 ;value：对应的样式值
$("#one").css("background","gray");//将背景色修改为灰色

2、设置多个样式

//css(obj);
//参数是一个对象，包含了需要设置的样式名和样式值
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

3、获取样式

//css(name);
//name:需要获取的样式名称
$("div").css("background-color");
//返回第一个元素对应的样式值。

class操作

1、添加类

//addClass(name)
//name:需要添加的样式类名
$("div").addClass("one);

2、移除类

//removeClass(name);
//name::需要移除的样式类名
$("div").removeClass("one);

3、判断类

//hasClass(name)
//name:用于判断的样式类名，返回值为true false
$("div").hasClass("one);

4、切换类

//addClass(name)
//name:需要切换的样式类名，有则移除该样式,无则添加该样式
$("div").toggleClass("one);

五、jQuery属性样式

attr操作

1、设置单个属性

//attr(name, value);
//name：需要设置的属性名 ;value：对应的属性值
$("img").attr("title","哎哟，不错哦");

2、设置多个属性

//attr(obj);
//参数是一个对象，包含了需要设置的属性名和属性值
$("img").attr({
    title:"哎哟，不错哦",
    alt:"哎哟，不错哦"
});

3、获取属性

//attr(name)
//name:需要获取的属性名称，返回对应的属性值
var oTitle = $("img").attr("title");
//返回第一个元素对应的样式值。

4、移除属性

//removeAttr(name);
//name:需要移除的属性名
$("img").removeAttr("title");

prop操作

在jQuery1.6之后，对于布尔类型的属性（checked、selected、disabled），不能用attr方法，只能用prop方法。

//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false

六、jQuery动画操作

三组基本动画

使用形式：

show([speed], [callback]);
//speed(可选)：动画的执行时间
     //1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
     //2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     //3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
//callback(可选):执行完动画后执行的回调函数

自定义动画

animate

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）

动画队列与停止动画

stop
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果

七、jQuery节点操作

创建节点

$('<div></div>')

添加节点

h2标签添加到div中

• append
  $('div').append($('h2'))
$('div').append('<h2></h2>')
• appendTo
  $('h2').appendTo($('div))
$('h2').appendTo('div)

h2标签添加到div最前面

• prepend
  $('div').prepend( $('h2') )
• prependTo
  $('h2').prependTo('div')

h2标签添加到div之前，作为兄弟元素

• before
  $('div').before( $('h2') )

h2标签添加到div之后

• after
  $('div').after( $('h2') )

清空节点与删除节点

• empty：清空指定节点的所有元素，自身保留(清理门户)

$("div").empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
$("div").html("");//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

• remove：相比于empty，自身也删除（自杀）

$("div").remove();

克隆节点

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

// 参数： true 或者 false
// 如果参数是false，也是深克隆， 也会克隆所有的内容
// 如果参数为true, 不仅是深克隆，把元素本身所有的事件也会克隆
$(selector).clone();

八、jQuery特殊属性操作

• val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//获取值
$("#name").val();
//设置值
$("#name").val("张三");

• text方法

相当于innerText()

//获取内容
$("div").text()
//设置内容
$("div").text("<span>这是一段内容</span>")

• html方法

相当于innerHTML(),会识别html标签

//获取内容
$("div").html()
//设置内容
$("div").html("<span>这是一段内容</span>")

• width方法

设置或者获取宽度

//带参数表示设置高度
$("img").width(200);
//不带参数获取高度
$("img").width();
//获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

innerWidth():获取盒子的宽度 + padding
outerWidth():获取盒子的宽度 + padding + border
outerWidth（true）():获取盒子的宽度 + padding + border + margin
Height方法与Width用法相同。

• scrollTop

设置或者获取垂直滚动条的高度

//获取页面被卷曲的高度
$(window).scrollTop();

• scrollLeft

设置或者获取垂直滚动条的宽度

//获取页面被卷曲的宽度
$(window).scrollLeft();

• offset方法

获取元素距离document的位置

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();

• position方法

获取元素距离有定位的父元素的位置

//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

九、jQuery事件机制

发展历程：简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

事件注册

1. 简单事件注册

click(handler)单击事件
mouseenter(handler)鼠标进入事件
mouseleave(handler)鼠标离开事件

缺点：不能同时注册多个事件

2. bind方式注册事件

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
    //事件响应方法
});

缺点：不支持动态事件绑定

3. delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

4. on注册事件（重点）

• on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

• on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

• on注册事件的语法：

第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：handler，事件处理函数

$(selector).on(events[,selector][,data],handler);

事件解绑

1. unbind方式

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

2. undelegate方式

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

3. off方式（推荐）// 解绑匹配元素的所有事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件trigger

$(selector).click(); //触发 click事件
$(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY    对应屏幕最左上角的值
//clientX和clientY    距离页面左上角的位置（忽视滚动条）
//pageX和pageY    距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode    按下的键盘代码
//event.data    存储绑定事件时传递的附加数据

//event.stopPropagation()    阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

十、其他知识点

链式编程

原理：设置性操作会返回一个jQuery对象，因此可以继续调用jQuery的方法。

• 设置操作的时候，可以使用链式编程。
• 获取操作的时候，无法使用链式编程。

end() ：筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

prevAll();//获取前面所有的兄弟元素
nextAll();//获取后面所有的兄弟元素
siblings();//获取所有的兄弟元素
prev();//获取前一个兄弟
next();//获取后一个兄弟。

多库共存：jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

隐式迭代

jQuery在设置属性时会自动的遍历，因此我们不需要再遍历。

• jQuery在执行设置性操作时，会给所有的元素都设置上相同的值。
• jQuery在执行获取性操作时，只会返回第一个元素对应的值。
• 如果想要给每一个元素都设置不同的值，需要手动进行遍历jQuery对象。

each() ：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

jQuery插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
使用插件：

• 引入jQuery文件
• 引入插件（如果有用到css的话，需要引入css）
• 使用插件

常用插件的使用

• jquery.color.js的使用 https://github.com/jquery/jquery-color
• jquery.lazyload.js的使用 https://github.com/tuupola/jquery_lazyload

制作jQuery插件
核心思想：给jQuery的原型增加方法即可。

$.fn.pluginName = function(){}