jQuery

       jQuery让js的开发变得更加简单

       jQuery解决了浏览器的兼容性问题

   使用jQuery设计常见的效果

   掌握jQuery的思想设计与理念

       jQuery的基本概念

       jQuery的基本使用

       jQuery详细解释

       DOM对象与jQuery对象的相互转换

       jQuery的常用选择器

       jQuery操作样式

1.1.1 什么是jQuery？

jquery的官网：http://jquery.com/

说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js）

1.1.2 学习jQuery，主要是学什么呢？

学习jQuery，主要学习jQuery的一大堆的api。

API：application programming interface：应用程序编程接口，说白了，API就是方法。

obj.funName(params);

注意：方法调用的时候，都带小括号(),使用jQuery的方法的时候，不要忘了小括号。

1.1.3 怎样使用jQuery？

• 下载jquery

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

• 使用jQuery实现div动态展示案例的步骤：

1) 引包（引入jQuery文件）

<script src="http://www.mamicode.com/jquery-1.11.1.js"></script>

2) 入口函数

$(document).ready(function () {

});

3) 功能实现

$("#btnShowDiv").click(function () {

$("div").show(1000);

});

• div动态展示案例中JavaScript与jquery的对比

                                                                                             jQuery详细解释

1.2.1 引包的注意点

• 忘记引包或者引包在入口函数的后面。

• 引包路径错误(404)

1.2.2 入口函数

• jQuery入口函数的两种写法

//第一种写法

$(document).ready(function() {

});

//第二种写法

$(function() {

});

• 对比JavaScript的入口函数jQuery的入口函数,执行时机

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

1.2.3 了解jQuery的$符号

• $是什么

其实$就是一个函数：$();参数不一样，功能不一样

$常用的几种情况：

$(function() {});//参数是function，说明是入口函数

$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

$(“div”);//查找所有的div元素

$(document).ready(funciton(){})//将document转换成jQuery对象

补充

$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

1.2.4 jQuery对象与DOM对象之间的转换

• 什么是DOM对象？

使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。

var btn = document.getElementById(“btnShowDiv”);

var divs = document.getElementsByTagName(“div”);

dom对象只可以使用dom对象的方法和属性

domObject.innerHTML = “dom对象设置文本”;

domObject.style.display= “block”;//dom对象显示对象

domObject.onclick = function() {}//dom对象绑定事件

• 什么是jquery对象？

jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回对象都是jquery对象。

$(“div”);//标签选择器返回的jquery对象。

$(“#btnShowDiv”);//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $(“div”);

$obj.html(“jquery对象设置文本的方法”);

$obj.show();//jquery对象显示文本

$obj.click(function() {});//jquery对象绑定事件

• 错误的用法

$(“div”).innerHTML;//jquery对象不能调用dom方法

//dom对象不能调用jquery方法。

document.getElementById(“btnShowDiv”).show();

• 深入了解jQuery对象

jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合）

联想记忆：衣服和洗衣机的关系

• jQuery对象和DOM对象的相互转换

1. jquery对象转DOM对象

var $li = $(“li”);

//第一种方法（推荐使用）

$li[0]

//第二种方法

$li.get(0)

//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

1. DOM对象转jquery对象（联想记忆：我有钱[美元]，所以我的功能就更强大）

var $obj = $(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

1.1.5 区分jQuery和JavaScript

JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。（联想记忆：不能扛着洗衣机去出差）

2.1 jQuery选择器

2.1.1 jQuery选择器概述

• 为什么要学习jQuery选择器？

考虑兼容性的话，js提供的获取元素的方法太少了,只有两个，不能够满足我们的要求，比如想要通过class来获取元素就不行了。

document.getElementById(“btnShowDiv”);

document.getElementsByTagName(“div”);

• 什么是jQuery选择器？

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

$("#btnShowDiv")//id选择器

$("div")//标签选择器

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

2.1.2 基本选择器

总结：跟css的选择器用法一模一样。

2.1.3 层级选择器

跟CSS的选择器一模一样。

2.1.4 过滤选择器

这类选择器都带冒号：

2.1.5筛选选择器

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

3.1 jQuery操作样式

3.1.1 css操作

功能：设置或者修改样式，操作的是style属性。

• 设置单个样式

//name：需要设置的样式名称

//value：对应的样式值

css(name, value);

//使用案例

$("#one").css("background","gray");//将背景色修改为灰色

• 设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值

css(obj);

//使用案例

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

• 获取样式

//name:需要获取的样式名称

css(name);

//案例

$("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值。

3.1.2 class操作

• 添加样式类

//name：需要添加的样式类名，注意参数不要带点.

addClass(name);

//例子,给所有的div添加one的样式。

$(“div”).addClass(“one”);

• 移除所有样式类

//不带参数，移除所有的样式类

removeClass()

//例子，移除div所有的样式类

$(“div”).removeClass();

• 移除单个样式类

//name:需要移除的样式类名

removeClass(“name”);

//例子，移除div中one的样式类名

$(“div”).removeClass(“one”);

• 判断是否有样式类

//name:用于判断的样式类名，返回值为true false

hasClass(name)

//例子，判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);

• 切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

//例子

$(“div”).toggleClass(“one”);

经验总结：

1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

3.2 jquery动画

通过下拉菜单引入动画。

jquery提供了三组动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】

3.2.1 显示与隐藏

显示(show)与隐藏(hide)是一组动画：

show方法详解：

show([speed], [callback]);

//speed(可选)：动画的执行时间

 1.如果不传，就没有动画效果。

 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

   3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。

//callback(可选):执行完动画后执行的回调函数

hide方法详解：

与show方法的用法完全一致。

show/hide：修改的是元素的width、height、opacity。

3.2.2 滑入与滑出

滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似

slideUp/slideDown,使用方法与show/hide基本一致。

slideUp(speed, callback);

//speed(可选)：动画的执行时间

 1.如果不传，默认为normal，注意区分show/hide。

 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

   3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可选):执行完动画后执行的回调函数

滑入滑出切换

$(selector).slideToggle(speed,callback);

//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

slideUp/slideDown：修改的是元素的height

3.2.3 淡入与淡出

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

fadeIn(speed, callback);

//speed(可选)：动画的执行时间

 1.如果不传，默认是normal。

 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

   3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可选):执行完动画后执行的回调函数

淡入淡出切换：

fadeToggle(speed, callback);

//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

淡入淡出到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

fadeTo(speed, value, callback)//可以设置具体的透明度

//speed（必须）

//value  0-1之间的数值(比如0.4)，表示淡到某一个值。

//callback(可选) 回调函数

fade系列方法：修改的是元素的opacity

3.2.4 动画小结

1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2. 动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3. 淡入淡出到某个值：fadeTo方法。
4. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

3.2.5 自定义动画

animate：自定义动画

$(selector).animate({params},[speed],[callback]);

// {params}：要执行动画的CSS属性，带数字（必选）

// speed：执行动画时长（可选）

// callback：动画执行完后立即执行的回调函数（可选）

动画支持的属性：

http://www.w3school.com.cn/jquery/effect_animate.asp

3.2.6 easing参数

控制动画在不同元素的速度，默认为“swing”

“swing”：在开头和结尾移动慢，在中间移动速度快

“linear”：匀速移动

3.2.7 动画队列问题

引出事件队列效果【案例：二级菜单案例】

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：地铁进站）。

3.2.8 停止动画

stop方法：停止动画效果

stop(clearQueue, jumpToEnd);

//第一个参数：是否清除队列

//第二个参数：是否跳转到最终效果

最常用的停止动画：stop();

3.3 jquery操作DOM(节点)

3.3.1 创建元素

//$(htmlStr)

//htmlStr：html格式的字符串

$(“<span>这是一个span元素</span>”);

3.3.2 添加元素

• 添加新建的元素：

//方法一：将jQuery对象添加到调用者内部的最后面。

var $span = $(“<span>这是一个span元素</span>”);

$(“div”).append($span);

//方法二：参数传字符串，会自动创建成jquery对象

$(“div”).append(“<span>这是一个span元素</span>”);

• 添加已经存在的元素

var $p = $(“p”);

$(“div”).append($p);

//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

类似的用法：append  prepend  after before

• 使用html方法创建元素

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

//获取内容

$(“div”).html()

3.3.3 清空元素

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

$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

清空元素的第二种方法

$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

3.3.4 删除元素

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

$(“div”).remove();

3.3.5 克隆元素

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）

//cloneNode(true)

// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

$(selector).clone();

4.2 jQuery操作DOM

4.2.1 jQuery操作属性（重点）

• 设置单个属性

//第一个参数：需要设置的属性名

//第二个参数：对应的属性值

attr(name, value);

//用法举例

$(“img”).attr(“title”,”哎哟，不错哦”);

$(“img”).attr(“alt”,“哎哟，不错哦”);

• 设置多个属性

//参数是一个对象，包含了需要设置的属性名和属性值

attr(obj)

//用法举例

$("img").attr({

    title:"哎哟，不错哦",

    alt:"哎哟，不错哦",

    style:"opacity:.5"

});

• 获取属性

//传需要获取的属性名称，返回对应的属性值

attr(name)

//用法举例

var oTitle = $("img").attr("title");

alert(oTitle);

注意：

1. 获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2. 获取属性时，如果该属性不存在，那么会返回undefined

• 移除属性

//参数：需要移除的属性名，如果传空，那么不会有任何操作，注意，并不是移除所有的属性。区分removeClass。

removeAttr(name);

//用法举例

$("img").removeAttr("title");

• prop

注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。

//设置属性

$(“:checked”).prop(“checked”,true);

//获取属性

$(“:checked”).prop(“checked”);//返回true或者false

4.2.2 jQuery操作值与内容

• val方法

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

//设置值

$(“#name”).val(“张三”);

//获取值

$(“#name”).val();

• html方法

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

//获取内容

$(“div”).html()

• text方法

//设置内容

$(“div”).text(“<span>这是一段内容</span>”);

//获取内容

$(“div”).text()

html方法与text方法的区别：

html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。

4.2.3 jQuery操作尺寸

• height

设置或者获取高度

//带参数表示设置高度

$(“img”).height(200);

//不带参数获取高度

$(“img”).height();

返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）

• width

设置获取获取宽度，与高度操作功能一样

//带参数表示设置宽度

$(“img”).width(200);

//不带参数获取宽度

$(“img”).width();

4.2.4 jQuery操作坐标值

• offset

设置或者获取元素相对于文档document的位置。

//设置位置

$(selector).offset({left:100, top: 150});

//获取位置

$(selector).offset();

注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top

• position

获取相对于其最近的有定位的父元素的位置。

// 获取，返回值为对象：{left:num, top:num}

$(selector).position();

注意：position方法只能获取，不能设置

• scrollTop

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

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollTop(100);

// 无参数表示获取偏移

$(selector).scrollTop();

• scrollLeft

设置或者获取水平滚动条的位置

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollLeft(100);

// 无参数表示获取偏移

$(selector).scrollLeft();

4.3 jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

4.3.1 jQuery事件的发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

• 简单事件绑定

click(handler) 单击事件

mouseenter(handler) 鼠标进入事件

mouseleave(handler) 鼠标离开事件

scroll(handler) 滚动事件

缺点：一次只能绑定一个事件

• bind事件绑定

不推荐使用，jQuery1.7版本后被on取代

//绑定多个事件

//第一个参数：事件类型

//第二个参数：事件处理程序

$("p").bind("click mouseenter", function(){

    //事件响应方法

});

缺点：不支持动态创建出来的元素绑定事件。

• delegate事件绑定

支持动态绑定事件

// 第一个参数：selector，要绑定事件的元素

// 第二个参数：事件类型

// 第三个参数：事件处理函数

$(".parentBox").delegate("p", "click", function(){

    //为 .parentBox下面的所有的p标签绑定事件

});

理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

• on事件绑定

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

4.3.2 on事件绑定（重点）

优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）

// 第四个参数：handler，事件处理函数

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

例子：

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定

$(selector).on( "click",“span”, function() {});

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。

$(selector).on( "click", function() {});

4.3.3 事件解绑

• unbind() 方式（不用）

作用：解绑事件

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

• undelegate() 方式（不用）

作用：解绑事件

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

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

• off方式
  

作用：解绑事件

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off(“click”);

// 解绑所有代理的click事件，元素本身的事件不会被解绑 

$(selector).off( “click”, “**” );

4.3.4 事件触发

简单事件触发

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

trigger方法触发事件

$(selector).trigger(“click”);

triggerHandler触发 事件响应方法，不触发浏览器行为

比如:文本框获得焦点的默认行为

$(selector).triggerHandler(“focus”);

4.3.5 jQuery事件对象（）

4.4 jQuery补充

4.4.1 链式编程

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

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

4.4.2 隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

设置性操作的时候：设置的是所有的元素

获取性操作：获取的是第一个元素。

4.4.3 each方法

有了隐式迭代，为什么还要使用each函数遍历？

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。

如果要对每个元素做不同的处理，这时候就用到了each方法

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

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素（DOM对象）

$(selector).each(function(index,element){});

4.4.4 多库共存

我们知道jQuery占用了$这个标识符，如果引用的其他库也用到$这个标识符，这时候为了保证每个库都能正常使用，这时候就存在了多库共存的问题。

后引入的$的会覆盖掉先引入的库中的$。

$ === jQuery

解决办法：

jQuery的$和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出$符的控制权，这个时候还是可以使用$.

console.log($);//function(selector, context){}

//$.noConflict();//释放$的控制权

console.log($);{name:”zhangsan”,age:12}

jQuery(function () {

jQuery("div").html("我不是div的内容");

});

4.5 jQuery插件机制

4.5.1 第三方插件

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

如何使用第三方插件：

1. 引入jQuery文件
2. 引入插件
3. 使用插件

4.5.2 制作插件

jQuery对象扩展方法

$.fn. pluginName = function() {};

4.5.3 jQuery UI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

JQuery认识及应用