juery笔记

转角羊儿

已于 2022-12-14 22:41:49 修改

阅读量882

点赞数 1

分类专栏： javascript 文章标签： javascript jquery 前端

于 2022-12-14 22:39:34 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/128323227

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

文章目录

Jquery

Jquery

一、什么是 jQuery

网址：https://codeplayer.vip/p/j7sua

jQuery 是一个非常流行的快速、小巧、功能强大的开源 JavaScript 库。
“Write less，do more”

它还为我们做了跨浏览器的兼容（小数无法兼的 API 官方会作特殊的说明）

二、如何使用 jQuery

1.只需要引入 jQuery 库的 js 文件(官方网站)

cdn：http://www.jq22.com/cdn/#a2

2.下载地址：http://www.jq22.com/jquery-info122（放在自己的服务器上）

运行代码：有两个版本：

1、一个是源代码：jquery-version.js（version 表示具体版本号）

2、压缩处理后的版本：jquery-version.min.j、

国内许多知名厂商都提供了 jQuery 库文件的 CDN 加速服务，你可以在页面中直接引入对应的链接，就可以直接使用其提供的 jQuery 库，而无需将 jQuery 库文件放在自己的服务器上再引入。

官方地址（下载 api 查询等）:

中文：https://www.jquery123.com/
英文原版： https://jquery.com/

三、如何选择 jQuery 版本

1.x 版本为 1.11.1(pc 端)
2.x 版本不再支持 IE 6 ~ IE 8,兼容 IE 6 ~ IE 8，推荐使用 1.x（移动端）
3.x 版本(最新)

四、jQuery 的运行原理

在 jQuery 库中实际上定义了一个 jQuery()方法，它是 jQuery 库的核心。我们调用该方法并传入指定的参数，就以返回一个 jQuery 实例对象，该对象中包含匹配的一个或多个 DOM 元素。接着，我们就可以使用 jQuery 对象上的方法来操作它所匹配的 DOM 元素。
注意：既然获得的是 jQuery 对象，你就只能使用 jQuery 对象的方法，而不能在 jQuery 对象上调用 DOM 元素(Element 对象)自身的方法(比如 getElementById())，除非你已经通过某些方式将它转换成了 DOM 元素。
jQuery 定义了一个别名变量 $
(jQuery === $) 都是全局变量
console.log(jQuery, jQuery === $);
console.log($(‘div’));

返回值：

1、构造函数

2、类数组对象

在这里插入图片描述

实例方法

选择元素：

$(); 此函数可以传递多种参数，返回值是对象（jq 对象）—> 使用 jQuery 选择器选取元素，并封装为 jQuery 对象

1、一般通过一个字符串来标识匹配的元素

$('#uid') // 选取id属性为"uid"的单个元素
$('p') // 选取所有的p元素
$('.test') // 选择所有带有 CSS 类名"test"的元素
$('[name=books]') // 选择所有 name 属性"books"的元素

jQuery 获取元素就是通过类似于 CSS 选择器的字符串来匹配对应的元素，我们一般将其称作 jQuery 选择器(selector)。几乎所有的 CSS 选择器都可以当做 jQuery 选择器来使用，只要 CSS 选择器对哪些元素生效，对应的 jQuery 选择器就可以选取到哪些元素。

2、支持多个选择器任意组合使用

多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素

$("#uid span"); // 选择id为"uid"的元素的所有后代span元素
 $("p > span"); // 选择p元素的所有子代span元素

 $("div + p"); // 选择div元素后面紧邻的同辈p元素
 $("div p span"); // 选择div元素的所有后代p元素的后代span元素

$("li[data$="Duyi"]); // 选择 li 元素的有 dat 这个属性，并且是'Duyi'结尾的

$("li[data^="Duyi"]); // 选择li元素的有dat这个属性，并且是'Duyi'开头的

// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素

$("p#uid"); // 选择 id 属性为"uid"的 p 元素
$("div.foo"); // 选择所有带有CSS类名"foo"的div元素

$(".foo.bar"); // 选择所有同时带有 CSS 类名"foo"和"bar"的元素
$("input[name=books][id]"); // 选择所有 name 属性为"books"并且具备 id 属性的元素

3、jQuery 特有的选择器，当然也可以和其他选择器任意组合使用

$(':checkbox') // 选取所有的 checkbox 元素
$(':text') // 选取所有 type 为 text 的 input 元素

（jQuery 选择器一览表）https://codeplayer.vip/p/j7smr

$('选择器字符串')

匹配到指定的元素后，将返回一个 jQuery 对象。该对象就包含匹配到的所有 DOM 元素。如果指定的选择器没有匹配到任何元素，将返回一个空的 jQuery 对象(不包含任何 DOM 元素)。

Query 也可以直接把一个或多个 DOM 元素直接转换成 jQuery 对象，以便于我们使用 jQuery 对象的方法对其进行操作。

var uid = document.getElementById("uid");
---> $( uid );

jQuery 还支持将 HTML 字符串转换为临时 DOM 元素，并包含在返回的 jQuery 对象中。

$('<span></span>') // 包含一个临时的 span 元素
$('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>')

// 包含一个临时的 div 元素，其内嵌一个子节点 p 元素

4、元素筛选（方法多，允许函数）

jQuery 的文档筛选方法一览表：https://codeplayer.vip/p/j7sst

// 以下方法都返回一个新的 jQuery 对象，他们包含筛选到的元素
$('ul li').eq(1) // 选取 ul li 中匹配的索引顺序为 1 的元素(也就是第 2 个 li 元素)

五、ready() 准备就绪时执行代码

如果我们在中引入 jQuery 库文件，并编写相应的 jQuery 代码来操作 DOM 元素。这很可能导致操作无法成功,因为此时内的元素可能还没有加载出来，也就获取不到对应的元素。因此，我们一般会将自己的 jQuery 代码写在

ready()事件函数中。ready()函数的作用相当于 window.onload，它用于在当前文档加载准备就绪后执行对应的函数。

$(document).ready(function(){ // 在这里编写我们希望在DOM准备就绪后执行的代码 });
// $( function ) 是 $(document).ready( function ) 的简写形式
$( function(){ // 在这里编写我们希望在 DOM 准备就绪后执行的代码 } );

jQuery 的 ready()函数可以重复调用，绑定的回调函数将在 DOM 准备就绪后按照绑定顺序依次执行。此外，ready()和 window.onload 并不兼容，因此不要混合使用。

六、jQuery 核心

1、Get and Set in One 原则

为了更加易于使用，jQuery 提供了简洁的 DOM 操作 API，其方法往往是"读写一体"的。也就是说，某个方法既可用于读取操作，也可用于设置操作。如果没有为其传入表示值的参数，则表示获取操作，将返回获取到的数据；如果为其传入了表示值的参数，则表示设置操作，它将设置 DOM 元素指定属性的值。
例子：

// 返回一个匹配 id 为"username"的元素的 jQuery 对象
var uid = $('#username')
// 没有传入value参数，返回第一个匹配元素的value属性值
var value = uid.val()
// 传入了value参数，设置所有匹配元素的value值为"CodePlayer" uid.val("CodePlayer");

2、Get first Set all 原则

jQuery 对象几乎所有的 DOM 操作方法都遵守"Get first Set all"原则。简而言之，假设当前 jQuery 对象匹配多个元素，如果使用 jQuery 对象的方法来获取数据("读"数据)，则只会获取第一个匹配元素的数据；如果使用 jQuery 对象的方法来设置元素数据("写"数据)，则会对所有匹配元素都进行设置操作。

3、容错机制：

1）下面不会报错

$(null) --->
$(undefiend) ---> 反的 jQuery.fu.init {}

2）$(null).css()也不会报错

3）获取到原生的 dom 后，可以通过$()包装过后，使用 jquery 对象上的方法

$('.wrapper .demo').each(function (index, ele) {
    console.log(ele) //ele 是原生的 dom
    $(ele) //通过 jquery 包装成为 jquery 对象
        .find('span')
        .css({ color: colorArr[index] })
})

提高页面的运转概率，

七、参数规则：

css selector：CSS 选择器

jquery unique selector：jquery 特有的选择器

eg:

$('.wrapper ul li:eq(-1)')

$('li[data^='Duyi']')
$('li[data$='Duyi']')
Null/Undefined:

Dom：原生 dom 对象

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

两参数 css selector 和 context 执行期上下文

eg:

$('ul', 'wrapper')

（jQuery 选择器） http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

八、链式编程风格

// jQuery 的链式编程风格
$('div').find('ul').addClass('menu').children().css('margin', 0).hide()

// 以下是上述代码的分解描述

$('div') // 返回一个匹配所有 div 元素的 jQuery 对象 .
find('ul') // 返回匹配这些 div 元素中的所有后代 ul 元素的 jQuery 对象
    .addClass('menu') // 为这些 ul 元素添加 CSS 类名"menu"，并返回当前对象本身
    .children() // 返回匹配这些 ul 元素中的所有子代元素的 jQuery 对象
    .css('margin', 0) // 为这些子代元素设置 css 样式"margin: 0"，并返回当前对象本身
    .hide() // 隐藏这些子代元素，并返回当前对象本身

这种链式编程风格的实现机制，就是 jQuery 对象的所有实例方法，在没有特殊的返回需求的情况下，一般都会返回该 jQuery 对象本身(或者其它 jQuery 对象)，因此我们可以继续调用返回的 jQuery 对象上的方法。

$("#uid").val()、 $("div").attr("id")等方法在没有传入值参数时，它们将返回指定 DOM 元素的特定属性值，它们有特定的返回需求，因此无法进行链式编程。如果是$("#uid").val("CodePlayer")、 $("div").attr("id", "myId")等情况，此时它们不需要返回特定的值，将返回当前 jQuery 本身，因此可用于链式编程。

九、属性操作

jQuery 的属性操作方法一览表

$('selector').val() // 获取第一个匹配元素的value值(一般用于表单控("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"

$('selector').html() // 获取第一个匹配元素的innerHTML值
$('selector').html('Hello') // 设置所有匹配元素的 innerHTML 值为"Hello"
$('selector').text() // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理) $("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"

document.ready 和 window.onload 的区别

首先$(function(){}) 和 $document).ready(function(){}) 是一个方法，$ (function(){})为简写（用的多）
document.ready 方法在 DOM 树加载完成后就会执行，而 window.onload 是在页面资源（比如图片和媒体资源，
它们的加载速度远慢于 DOM 的加载速度）加载完成之后才执行。
也就是说$(document).ready 要比 window.onload 先执行。

window.onload = function () {
    document.getElementById('bg').style.backgroundColor = '#F90'
}

第二节课选择元素相关方法

.get()：获取指定原生的 dom 对象

<img src="test1.jpg"/>

<img src="test2.jpg"/>
$("img").get(0);

//结果：
//[ <img src="test1.jpg"/> ]


console.log($('.demo').get(undefined));
//[dom,  dom,  dom]
.eq()返回第几个jq对象
$('.demo:eq(0)') //只能针对某一个 dom
$('.demo').eq(0)     //方便链式调用
.not()
.is()
.has()
.add() //集中操作
.end() //回退操作

get() : //方法获得由选择器指定的 DOM 元素。

语法：$(selector).get(index)

.eq()

语法：

1、:eq() 选择器选取带有指定 index 值的元素–> $(“:eq(index)”)

2、.eq() 获取指定 jq 对象–> $(“index”).eq()

.find()：在什么范围下查找

语法：find()函数用于选取每个匹配元素的符合指定表达式的后代元素，并以 jQuery 对象的形式返回。

这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.filter() —>根据原来的基础给出制定条件。(针原来选择的东西过滤，不能又选择又过滤)

语法：筛选出符合指定表达式的元素，并以 jQuery 对象的形式返回。

这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象、函数。


//jquery
$('.wrapper ul').find('li').filter(':even').css({color: 'red'});
//function
$('.rapper ul li').filter(function (index, ele) {
//ele === this
// console.log(index, ele, this)
//true 留下来 false 不要
return index % 2 = 0;
}).css({color: 'red'})

.not()与.filter()反择

语法：not()函数用于从匹配元素中删除符合指定表达式的元素，并以 jQuery 对象的形式返回保留的元素。
这里的表达式包括：选择器(字符串)、DOM 元素(Element)、jQuery 对象、函数。


// 这里的是 selector、selector1 均表示任意的选择器 $("selector").not("selector1");

// 等价于 $("selector:not(selector1)");

//排除掉 id 和 class 属性相等的元素，剩下

n1 var $result = $("div").not( function(index, element){
    // 函数内的this === element
    return this.id == this.className;
 } );

该函数相对的是 add()函数，用于向当前匹配元素中添加符合指定表达式的元素。

.has()筛选

语法：函数用于筛选出包含特定后代的元素，并以 jQuery 对象的形式返回。
特定后代是指该元素至少有一个后代元素匹配指定的表达式。


$("selector").has("selector1");
.add()--->集中操作
$('.wrapper')
.css({position: 'relative'})
.find('ul')
.css({position: 'relative'})
↓
$('.wrapper')
.add('ul')
.css({position: 'relative'})

语法：add()函数用于向当前匹配元素中添加符合指定表达式的元素，并以 jQuery 对象的形式返回。

这里的表达式包括：选择器(字符串)、HTML 内容(字符串)、DOM 元素(Element)、jQuery 对象。

与该函数相对的是 not()函数，用于从当前匹配元素中移除符合指定表达式的元素。

$('s1').add('s2')
//匹配所有的p元素，再加上所有的label元素 $("p").add("label");

//筛选出包含有ul的li元素，然后给li加样式。

$('li').has('ul').css({ backgroundColor: 'red' })

.is() 判断是否有交集–>返回 ture/false


var lang = $('.wrapper .demo').is('p'); -->指$('.wrapper .demo')对象里有 'p'吗

语法：is()函数用于判断当前 jQuery 对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回 true，否则返回 false。

is()函数实际上是判断当前 jQuery 对象所匹配的元素与指定表达式 expr 所表示的元素是否存在交集，如果存在交集就返回 true，否则返回 false。

$('ul').click(function (e) {
    if ($(e.target).is('li')) {
        alert($(e.target).text())
    } else {
        alert($(this).text())
    }
})

$.end()—>回退到之前的对象

end()函数用于返回最近一次"破坏性"操作之前的 jQuery 对象。
当前 jQuery 对象可能是通过调用之前的 jQuery 对象的特定方法创建的，使用该函数可以返回之前的 jQuery 对象。

$('.wrapper')
.css({position: 'relative'})
.find('ul')
.css({position: 'absolute'})
.end()
.css({position: 'absolute'})
.eng()

执行完后返回到$('.wrapper')对象

第三节课取赋值相关方法：

.html()、.text()、.val()、.size()
.addClass() 、.removeClass()、.hasClass()
.css()
.attr()、.prop()
.html()

.html() 函数用于设置或返回当前 jQuery 对象所匹配的 DOM 元素内的 html 内容。

该函数的用途相当于设置或获取 DOM 元素的 innerHTML 属性值。

//取值
//console.log(typeof  $('ul').html());

//console.log($('ul').html());

console.log($('ul  li').html()) //获取第一个的值

//赋值：基于innerHTML

$('ul').html('abc')

var arrName = ['陈思彤', '成哥', '邓哥', '吴彦祖']

$('ul li').html(function (index, ele) {
    return '<p style="color:  orange">' + arrName[index] + '</p>'
})

$('ul li').html('9')

.text() —>基于 innerText()

定义和用法

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容

（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html()方法。

语法

$(selector).text()

//设置文本内容：

$(selector).text(content)

//使用函数设置文本内容：

$(selector).text(function(index,currentcontent))

    console.log($('ul').text());

    $('ul  li').text('9');

    $('ul li').text('<p>aa</p>');

    var arrName = ['陈思彤', '成哥', '邓哥', '吴彦祖'];

    $('ul  li').text(function  (index,  ele)  {
        return  arrName[index];
})

.val()(针对表单元素来操作的)获取表单相关元素的 val 值与 html 的用法相似

console.log( $(‘input[type=“checkbox”]’).val() );

.val 赋值

$('input[type="checkbox"]').val(function (index, oldValue) {
    return oldValue + index
})

//js object prop value
$('div').eq(0).val('aaaa')

$('input').eq(0).val('000')

.size()

size()函数用于返回当前 jQuery 对象封装的元素个数。

size()函数与 length 属性的作用相同。

.addClass()

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

语法

$(selector).addClass(class)

使用函数向被选元素添加类。

$(selector).addClass(function(index,oldclass))

removeClass() 方法从被选元素移除一个或多个类。

removeClass()函数用于移除当前 jQuery 对象所匹配的每一个元素上指定的 css 类名。

语法

$(selector).removeClass(class)

$(selector).removeClass(function(index,oldclass))

.hasClass() 判断是否存在类名

//hasClass 返回 true 或 false

console.log($('.demo').hasClass('active'))

//e事件源对象

$('.demo').click(function (e) {
    $('.demo').removeClass('active')

    $(this).addClass('active')
})

css()函数用于设置或返回当前 jQuery 对象所匹配的元素的 css 样式属性值。

该函数属于 jQuery 对象(实例)。如果需要删除指定的 css 属性，请使用该函数将其值设为空字符串(“”)。

语法 css()函数有以下两种用法：

用法一：

jQueryObject.css( propertyName [, value ] )

设置或返回指定 css 属性 propertyName 的值。

如果指定了 value 参数，则表示设置 css 属性 propertyName 的值为 value；

如果没指定 value 参数,则表示返回 css 属性 propertyName 的值。

用法二：

jQueryObject.css(object)

以对象形式同时设置任意多个属性的值。对象 object 的每个属性对应 propertyName，属性的值对应 value。

注意：
1、如果省略了 value 参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。

2、css()函数的所有"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。

jQuery 1.4 新增支持：参数 value 可以是函数，css()将根据匹配的所有元素遍历执行该函数，函数中的 this 指针将指向对应的 DOM 元素。css()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素 css 属性 propertyName 当前的值。函数的返回值就是为该元素的 css 属性 propertyName 设置的值。

// 更改所有 p 元素的 font-weight 属性
// 如果是粗体就还原，不是粗体就加粗
$('p').css('fontWeight', function (index, value) {
    // 不同浏览器的计算取值可能有差异
    return value == 'bold' || value == '700' ? 'normal' : 'bold'
})

.attr() 方法设置或返回被选元素的属性值。

//attr  基于  setAttribue     getAttribute

//取值
Eg: $('.demo').attr('class')

//赋值
Eg: $('.demo').attr('id', 'test1')

//语法1: 规定要获取其值的属性。

$(selector).attr(attribute)

//语法 2: 设置被选元素的属性和值。

$(selector).attr(attribute,value)

//语法3: 使用函数来设置属性值。

$(selector).attr(attribute,function(index,oldvalue))


//该函数可接收并使用选择器的 index 值和当前属性值。

//语法 4: 设置多个属性/值对。

$(selector).attr({attribute:value, attribute:value ...})

.prop() 基于原生 js 的 dom 对象的操作


//特性映射  非特性不能映射

//赋值

//dom.timer

//$('.demo').prop('log', 'duyi');

//返回属性的值：
$(selector).prop(property)

//设置属性和值：
$(selector).prop(property,value)

使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))

//设置多个属性和值：
$(selector).prop({property:value,property:value,...})

prop()和 attr()的主要区别：prop()函数针对的是 DOM 元素(JS Element 对象)的属性，attr()函数针对的是 DOM 元素所对应的文档节点的属性。

prop()只能获取
Dom 元素的特性，
attr() 可以特性和属性。

基于 jQuery 对象查改删增相关方法：


.next()、.prev()、.preAll()、.nextAll()

.prevUntil() 、.nextUntil()

.siblings()

.parent()、.parents()、.offsetParent()、.closest()

.slice()

.insertAfter()、.After()

.insertBefore()、.before()

.appendTo()、.append()

.prependTo()、.prepend()

.remove()、.detach()

参数：标签字符串创建 jQuery 对象

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

<span class=".demo blue">duyi-cst</span>

<button>change</button>

<p class=".demo">duyi-cst</p>

<script src="jquery.js"></script>

//next()获取元素的下一个兄弟元素
$('button').click(function () {
    $(this).next('p').css({fontSize:'20px', color:'orange'});
})
</script>

.prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

prevAll() 函数用于选取每个匹配元素之前的所有同辈元素，并以 jQuery 对象的形式返回。

$.nextAll() 函数用于选取每个匹配元素之后的所有同辈元素，并以 jQuery 对象的形式返回。


<div class="wrapper">
    全选：<input type="checkbox"></input>
    banana:<input type="checkbox">
    apple:<input type="checkbox">
    orange:<input type="checkbox">
    <input type="submit" value='login'></input>
</div>


<script src='./jquery.js'></script>

 <script>
$('input[type="checkbox"]')
    .eq(0).click(function () {
        $(this).prevAll('input[type="checkbox"]')
    .prop('checked', true)
});

</script>

.nextUntil() )函数用于选取每个匹配元素之后所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。

这里的表达式是指：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.prevUntil() 函数用于选取每个匹配元素之前所有的同辈元素，直到遇到符合指定表达式的元素为止，并以 jQuery 对象的形式返回。

这里的表达式是指：选择器(字符串)、DOM 元素(Element)、jQuery 对象。

.siblings() 函数用于选取每个匹配元素的所有同辈元素(不包括自己)，并以 jQuery 对象的形式返回。

.parent()函数用于选取每个匹配元素的上一级父元素，并以 jQuery 对象的形式返回。

省略 selector 参数，则没有过滤。

.parents() 函数用于选取每个匹配元素的上二级以上所有父元素，并以 jQuery 对象的形式返回。

.closest()函数将从当前元素本身开始，逐级向上查找第一个符合指定表达式的元素，该元素可能是当前元素自身，也可能是最靠近当前元素的一个祖先元素,并以 jQuery 对象的形式返回。

.offsetparent()函数用于查找离当前匹配元素最近的被定位的祖辈元素。

所谓"被定位的元素"，就是元素的 CSS position 属性值为 absolute、relative 或 fixed(只要不是默认的 static 即可)。

.slice()—>截取指数范围，左闭右开区间

slice()函数用于选取匹配元素中一段连续的元素，并以 jQuery 对象的形式返回。

.insertAfter() 函数用于将当前所有匹配元素插入到指定元素之后。

语法：jQueryObject.insertAfter( target )

target String/Element/jQuery 类型指定的目标元素，以便于在该目标之后插入当前匹配的元素。

注意：如果当前 jQuery 对象匹配的元素是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↓↑

.insertBefore()函数用于将当前所有匹配元素插入到指定元素之前。

语法：jQueryObject.insertBefore( target )

target String/Element/jQuery 类型指定的目标元素，以便于在该目标之前插入当前匹配的元素。

.After()函数用于在每个匹配元素之后插入指定的内容。

语法：$(selector).after(content)


$(selector).after(function(index))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

after()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要插入的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其toString()方法，将其转为字符串，并视为html内容。

注意：如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↑↓

.before() 函数用于在每个匹配元素之前插入指定的内容。

语法：$(selector).after(content)

$(selector).after(function(index))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

before()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要插入的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作

.appendTo() 函数用于将当前所有匹配元素追加到指定元素内部的末尾位置。

语法：jQueryObject.appendTo( target )

target String/Element/jQuery 类型指定的目标元素，以便于向其中追加当前匹配的元素。

↑↓

.prependTo() 函数用于将当前所有匹配元素追加到指定元素内部的起始位置。

语法：jQueryObject.prependTo( target )

target String/Element/jQuery 类型指定的目标元素，以便于向其中追加当前匹配的元素。

.append() 函数用于向每个匹配元素内部的末尾位置追加指定的内容。

语法：$(selector).append(content)


$(selector).append(function(index,html))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

append()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

↑↓

.prepend() 函数用于向每个匹配元素内部的起始位置追加指定的内容。

语法：$(selector).prepend(content)


$(selector).prepend(function(index,html))

指定的内容可以是：html 字符串、DOM 元素(或数组)、jQuery 对象、函数(返回值)。

prepend()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部 html 内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是 html 字符串、DOM 元素、jQuery 对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其 toString()方法，将其转为字符串，并视为 html 内容。

注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作，而不是复制操作。

.remove()从文档中移除匹配的元素，包括所有文本和子节点。

语法：jQueryObject.remove( [ selector ] )

与 detach()相比，remove()函数会同时移除与元素关联绑定的附加数据(data()函数 )和事件处理器等(detach()会保留)。

该函数属于 jQuery 对象(实例)。

该方法会保留移除元素的副本，允许它们在以后被重新插入。

↑↓

.detach()

语法：jQueryObject.detach( [ selector ] )

detach()函数用于从文档中移除匹配的元素。

detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。

.empty()

语法：jQueryObject.empty( )

empty()函数用于清空每个匹配元素内的所有内容。
empty()函数将会移除每个匹配元素的所有子节点(包括文本节点、注释节点等所有类型的节点)。

注意：该方法不会移除元素本身，或它的属性。

$('<div></div>').appendTo($('body'))

第四节课

基于 jQuery 对象增删改查相关方法：


.wrap()、 wrapInner()、wrapAll、unWrap
.clone()
.data()
.removeData()
.wrap()外面加$.unwrap()相反

.wrap()函数用于在每个匹配元素外部包裹指定的 HTML 结构。

语法：jQueryObject.wrap( wrapper )

与该函数相对的是 unwrap()函数，用于当前匹配元素的父元素(只移除父元素，其内部节点全部保留)。

wrapper 可以是 String/Element/jQuery/Function 类型用于包裹匹配元素的节点。
jQuery1.4 新增支持：参数 wrapper 可以为函数。wrap()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrap()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如<p><i></i></p>)，wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

↓

.wrapInner()里面加函数用于在每个匹配元素的所有子节点外部包裹指定的 HTML 结构。

这里的所有子节点包括文本节点、注释节点等任意类型的节点。

语法：jQueryObject.wrapInner( wrapper )

wrapper 可以是 String/Element/jQuery/Function 类型用于包裹匹配元素的节点。

jQuery 1.4 新增支持：参数 wrapper 可以为函数。wrapInner()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrapInner()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、选择器、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如"<p><i></i></p>")，wrapInner()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

.unwrap()移除与.wrap()相反函数用于移除每个匹配元素的父元素。

unwrap()将移除当前匹配元素的父元素，但会保留其所有的后辈元素。你可以使用该函数快速取消通过 wrap()函数为匹配元素添加的父级包裹元素。

语法：jjQueryObject.unwrap( )

如果当前匹配元素的父元素为 body 元素，则 unwrap()函数不会移除 body 元素。

.wrapAll() 函数用于在所有匹配元素用单个元素包裹起来。

语法：jQueryObject.wrapAll( wrapper )

wrapper 可以是 String/Element/jQuery/Function 类型用于包裹匹配元素的节点。
jQuery 1.4 新增支持：参数 wrapper 可以为函数。wrapAll()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

wrapAll()还会为函数传入一个参数，即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是 html 字符串、DOM 元素或 jQuery 对象)。

注意：如果 wrapper 匹配多个元素，则只将第一个元素作为包裹元素。

注意：如果 wrapper 是多层嵌套的元素(例如"<p><i></i></p>")，wrapAll()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是 Element 节点(比如文本节点、注释节点等)，就停止向内查找，直接在当前节点内部的末尾位置追加(append())当前匹配元素。

clone()函数用于克隆当前匹配元素集合的一个副本（clone() 方法生成被选元素的副本，包含子节点、文本和属性。），并以 jQuery 对象的形式返回。你也可以简单地理解为：克隆当前 jQuery 对象。

语法：jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

参数描述

withDataAndEvents 可选/Boolean 类型是否同时复制元素的附加数据和绑定事件，默认为 false。
deepWithDataAndEvents 可选/Boolean 类型是否同时复制元素的所有子元素的附加数据和绑定事件，默认值即为参数 withDataAndEvents 的值。

你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )和绑定事件。
clone()函数的返回值为 jQuery 类型，返回当前 jQuery 对象的一个克隆副本。

注意：出于性能原因考虑，clone()函数不会复制某些表单元素的动态，例如用户在<textarea>输入的内容、用户在<select>中选择的选项。不过<input>元素的动态将会被复制，例如用户在 text 中输入的内容、用户对 checkbox 的选中状态。

.data() 函数用于在当前 jQuery 对象所匹配的所有元素上存取数据。

通过 data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
该函数属于 jQuery 对象(实例)。如果需要移除通过 data()函数存放的数据，请使用 removeData()函数。

语法：

用法一：


jQueryObject.data( [ key [, value ] ])

以指定的键名 key 存取数据。如果指定了 value 参数，则表示以键名 key 存放值为 value 的数据；如果没有指定 value 参数，则表示读取之前以键名 key 存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。

用法二：

jQueryObject.data(object)

以对象形式同时传入任意多个 key-value 形式的数据，对象的每个属性就是键名 key，属性值就是 value。
注意：data()函数的所有"存储数据"操作针对当前 jQuery 对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。

↑↓

.removeData()函数用于移除在当前 jQuery 对象所匹配的每一个元素上存储的指定键名的数据项。

语法：jQueryObject.removeData( keys )

keys String/Array 类型指定的键名字符串或数组。

removeData()函数主要用来移除通过 data()函数存放的数据。

如果要同时移除多个键名的数据项，请传入数组形式的参数，数组的每个元素即是需要移除的键名字符串。你也可以传入以空格分隔的字符串，空格隔开的每个子字符串即是需要移除的键名字符串。

如果参数 keys 是包含空格的字符串，例如"a b c"，则 removeData()将先判断是否存在键名为"a b c"(字符串本身)的数据项，如果存在则移除该数据，并且不再执行后续的分割等操作。如果不存在，才会根据空格进行分割，移除键名分别为"a"、“b”、“c”(分割后的子字符串)的数据项。

如果你存放数据的键名中包含空格(例如"a b")，此时使用 removeData()同时移除多个键名的数据项(例如"a b c d"，其中"a b"是一个键名)，将无法成功移除包含空格的键名(例如"a b")。你可以改用数组形式，或者针对包含空格的键名进行单独移除。

第五节课

事件绑定：


.on()
.one()
.off()
.trigger()

.on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法：

$(selector).on(event,childSelector,data,function)

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off()方法。

提示：如需添加只运行一次的事件然后移除，请使用 one()方法。

参数
在这里插入图片描述

描述

event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值，也可以是数组。必须是有效的事件。

childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

data 可选。规定传递到函数的额外数据。

function 可选。规定当事件发生时运行的函数。

.on( ) 用法类似于 JS 的 .addEventListeners( )

<ul>
    <li id="li">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    $('ul').on('mouseover', myfunction)
    function myfunction(e) {
        $(e.target).css('color', 'black').siblings().css('color', 'red')
    }
</script>

一个元素绑定一个事件+一个函数：

$('ul').on('mouseover', myfunction)

function myfunction(e) {
    $(e.target).css('color', 'black').siblings().css('color', 'red')
}

鼠标移到 #li 元素上，其他同胞元素（slibings( )）都变为红色

在这里插入图片描述

2.限定子元素：限定只有 #li 这个子元素才能触发事件

$('ul').on('mouseover', '#li', myfunction)

在这里插入图片描述

同个元素绑定一个事件、多个函数不会覆盖，两个函数都会被执行

$('ul').on('click', myfunction)

$('ul').on('click', thefunction)

function myfunction(e) {
    $(e.target).css('color', 'black').siblings().css('color', 'red')
}

function thefunction() {
    alert('你点击了ul这个元素')
}

同时给元素绑定多个事件

$('.demonstrate').on(
    {
        mouseover: function () {
            $(this).addClass('over')
        },

        mouseout: function () {
            $(this).removeClass('over')
        },
    },
    'ul li'
)

实现事件委托

父元素 ul li 给目标元素.demostrate 添加事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。

只需要考虑一个父元素就可以，给父元素添加委托事件，不用考虑子元素的数量什么的。

$('ul li').on(
    {
        // click:function(){
        //     console.log('click','1111');
        // },

        mouseover: function () {
            console.log('mouseover', '1111')

            $(this).addClass('over')
        },

        mouseout: function () {
            $(this).removeClass('over')
        },
    },
    '.demostrate'
)

.off()解绑事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。

//off
$('.demo').off()

$('.demo').off('click')

$('.demo').off('click', clickOne)

//怎么绑定怎么解绑
$('ul').on('click', 'li', clickOne)

$('ul').on('click', 'li', clickOne)

//off()函数主要用于解除由 on()函数绑定的事件处理函数。
//最简单的写法
$('ul li').off('click')

在这里插入图片描述

//同时给多个元素解绑一样的事件

$('ul li,div').off('click')

//同时给元素解绑多个事件
$('.demonstrate').off('mouseover mouseout', 'ul li')
//实现事件委托的解绑
//父元素 ul li 给目标元素.demostrate 移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。

//只需要考虑一个父元素就可以，给父元素移除委托事件，不用考虑子元素的数量什么的。
$('ul li').off('click mouseover mouseout', '.demostrate')

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

语法：$(selector).one(event,data,function)

参数描述

event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

.trigger()帮你触发自定义事件

trigger()函数用于在每个匹配元素上触发指定类型的事件。

此外，你还可以在触发事件时为事件处理函数传入额外的参数。

//trigger
$('.demo').on('click', function (e, a, b, c, d) {
    console.log('click', a, b, c, d)
})

$('.demo').trigger('click', [10, 20, 30, 40])

//触发自定义的事件
$('.demo').on('pageLoad', function (e, a, b, c, d) {
    console.log(a, b, c, d)
})

$('.demo').trigger('pageLoad', [10, 20, 30, 40])

使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。

链接标签<a>的 trigger("click")是一个特例，不会触发链接 click 事件的默认行为——跳转到对应链接的操作

trigger()函数触发的事件还支持事件冒泡，可以冒泡传递到 DOM 树上。

语法

用法一：jQueryObject.trigger( events [, extraArguments ] )

在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。

用法二：jQueryObject.trigger( eventObject [, extraArguments ] )

为指定事件处理函数传入的 Event 对象(eventObject)，用于触发执行对应的事件处理函数，并可为事件处理函数传入额外的参数(extraArguments)。

.hover()

// $('.demo').on('mouseenter', function () {
// console.log('enter');
// }).on('mouseleave', function () {
// console.log('leave');
// });

//第一个函数是移入事件第二个函数是移出事件

$('.demo').hover(
    function () {
        console.log('enter')
    },
    function () {
        console.log('leave')
    }
)

第六节课

jQuery 实例方法-动画
动画相关方法：


.hide()、.show()、.toggle()

//参数：null 或 （duration, easing, callblack）

.fadeIn、.fadeout 、.fadeToggle、.fadeTo()

//参数：null 或 （duration, [opacity], easing, callblack）

.slideDown()、.slideUp()、.slideToggle()

//参数：null 或 （duration, [opacity], easing, callblack）

.animate()

//参数：(target duration easing callback）

.stop() .finish()

//参数：true false
.delay()

jQuery.fx.off = true 运动的开关

.hide()、.show()、.toggle()

//参数：null 或（duration, easing, callblack）

$(“selector”).show()

从 display:none 还原元素默认或已设置的 display 属性

$(“selector”).hide()

设置元素的 display 样式为 none，等于$(“selector”).css(“display”,“none”)

（注：传入参数后，.show()和.hide()方法同时动画改变元素的 width,height 和透明属性；传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入 fast,normal,slow，fast 为 200 毫秒，normal 为 400 毫秒，slow 为 600 毫秒）

$(“selector”).toggle()

toggle()函数用于切换所有匹配的元素。此外，你还可以指定元素切换的过渡动画效果。

所谓"切换"，也就是如果元素当前是可见的，则将其隐藏；如果元素当前是隐藏的，则使其显示(可见)。

这里介绍的 toggle()函数用于切换元素的显示/隐藏。jQuery 还有一个同名的事件函数 toggle()，用于绑定 click 事件并在触发时轮流切换执行不同的事件处理函数。

.fadeIn、.fadeout 、.fadeToggle、.fadeTo()

//参数：null 或（duration, [opacity], easing, callblack）

$(“selector”).fadeln() 以改变透明度来显示

语法：fadeIn(speed,callback)

Number/String,Function

fadeIn(speed,[easing],callback) Number/String,Function

$('#div1').FadeIn(3000, function () {
    alert('淡入显示成功!')
})

$(“selector”).fadeout()以改变透明度来隐藏

语法：fadeOut(speed,callback)

Number/String,Function

fadeOut(speed,[easing],callcack) Number/String,String,Function

$('#div1').fadeOut(3000, function () {
    alert('淡出隐藏成功!')
})

$(“selector”).fadeToggle()以改变透明度来切换显示隐藏状态

语法: fadeToggle(speed,callback)

Number/String,Function

fadeToggle(speed,[easing],callback)

Number/String,Function

$('#div1').fadeToggle(3000, function () {
    alert('淡入淡出切换成功!')
})

$(“selector”).fadeTo() 由指定的时间将透明度改变到指定的透明度

语法：fadeTo(speed,callback)

umber/String,Function

fadeTo([speed],opacity,[easing],[fn])

Number/String,Float,String,Function

$('#div1').fadeTo(3000, 0.22, function () {
    alert('透明度改变成功!')
})

.slideDown()、.slideUp()、.slideToggle()

参数：null 或（duration, [opacity], easing, callblack）

$(“selector”).slideDown() 向下显示，slow()是水平与垂直方向同时展开，而 slideDown 是仅仅在垂直方向向下展开

语法:slideDown(speed,callback) Number/String,Function

slideDown(speed,[easing],callback) Number/String,Function

$('#div1').slideDown(3000, function () {
    alert('向下展开显示成功!')
})

$("selector").slideup()向上隐藏,hide()是水平与垂直两个方向的，而 slideUp()仅仅是垂直方向向上收起隐藏

语法:slideUp(speed,callback)　　 Number/String,Function

slideUp(speed,[easing],callback)　 Number/String,String,Function

$('#div1').slideUp(3000, function () {
    alert('向上收起隐藏成功!')
})

$(“selector”).slideToggle() 垂直方向上切换,toggle 是水平与垂直两个方向上的，而 slideToggle 是仅仅垂直方向的。

语法:slideToggle(speed,callback) Number/String,Function

slideToggle(speed,[easing],callback) Number/String,String,Function

$(“#div1”).slideToggle(3000,function(){ alert(“水平方向上切换成功”); });

.animate()

参数：(target duration easing callback）

$("selector").animate() 自定义动画，一般来说数字变动都可以用于动画。

语法：animate(params,speed,easing,callback);样式参数，时间，可选择，函数

//target(目标点) duration(时间) easing(方式) callback(回调函数)
$('.demo').animate(
    {
        width: '+=50',
        height: '+=50',
        left: '+=100',
        top: '+=50',
    },
    1000,
    'swing',
    function () {
        alert('over')
    }
)

$('.demo').on('click', function () {
    //内置队列
    $(this)
        .animate({ width: '+=50', height: '+=50', left: '+=100', top: '+=50' })
        .animate({ width: '+=50', height: '+=50', left: '+=100', top: '+=50' })
})

$("#div1").animate({ width:300px,height,300px },3000); 其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。 backgroundPosition

$(“selector”).stop() 停止正在执行动画

$('#stopBtn').on('click', function () {
    //null   true   true  true
    //不传参数时，停止当次运动，而奔向下一个标目点
    //一个参数时，停止一切运动
    //二个参数时，停止当前运动，并且瞬间运动到当前的目标点上
    $('.demo').stop(true)
})

stop([clearQueue],[gotoEnd]);两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。

$('#div1').hide(5000) //此动画正在执行 $("#div1").stop(); //上一行代码指定的动画停止在一半状态

$('#div1').stop(true) //停止一切运动状态
$('#div1').stop(true, true) //停止当前动画，同时动画切换到完成执行状态。

.finish()

参数：true false

$("selector").finish()

会停止当前正在运行的动画，删除所有队列中的动画，并完成匹配元素的所有动画。

$('#finishBtn').on('click', function () {
    //完成所有远动，到达最后的目标点上
    $('.demo').finish()
})

jQueryObject.finish( [ queueName ] )

可选/String 类型指定的队列名称，默认为"fx"，表示 jQuery 标准的效果队列。

$(“selector”).delay() 延迟执行动画

当一个动画 stop()了之后还能够用 delay()来延迟执行。从停止位置继执行。当然用原来的方法继续执行也不可，不过没有延时效果。

delay(duration,[queueName])设置一个延迟值来执行动画 Integer,String

$('#div1').delay(3000).hide(3000) //表示在 3000 毫秒后执行 hide(3000);

jQuery.fx.off = true 运动的开关

14、jQuery.fx.off 　　//该属性只是是否关闭当前页面上的动画,关闭动画之后，没有动画效果，所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同。

jQuery.queue() 函数详解

queue()函数用于获取或设置当前匹配元素上待执行的函数队列。

如果当前 jQuery 对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。

该函数属于 jQuery 对象(实例)。如果需要移除并执行队列中的第一个函数，请使用 dequeue()函数。你也可以使用 clearQueue()函数清空指定的队列。

语法

jQuery1.2 新增该函数。queue()函数具有如下两种用法：

用法一：

jQueryObject.queue( [ queueName ] [, newQueue ] )

如果没有指定任何参数或只指定了 queueName 参数，则表示获取指定名称的函数队列。如果指定了 newQueue 参数，则表示使用新的队列 newQueue 设置(替换)当前队列中的所有内容。

用法二：
jQueryObject.queue( [ queueName ,] callback )

将指定的函数添加到指定的队列(末尾)。

注意：queue()函数的所有设置操作针对当前 jQuery 对象所匹配的每一个元素；所有读取操作只针对第一个匹配的元素。

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数描述

queueName 可选/String 类型指定的队列名称，默认为"fx"(表示 jQuery 中的标准动画效果队列)。

newQueue 可选/Array 类型用于替换当前队列内容的新队列。

callback Function 类型指定的函数，将会追加到队列中。该函数有一个函数参数，调用该参数可以移除并执行队列中的第一个函数。

返回值

queue()函数的返回值是 Array/jQuery 类型，返回值的类型取决于当前 queue()函数执行的是获取操作还是设置操作。
如果 queue()函数执行的是设置操作(替换队列、追加函数)，则返回当前 jQuery 对象本身；如果是获取操作，则返回获取到的函数队列(数组)。

如果当前 jQuery 对象匹配多个元素，读取数据时，queue()函数只以其中第一个匹配的元素为准。

jQuery.dequeue() 函数详解

dequeue()函数用于移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。
该函数属于 jQuery 对象(实例)。你也可以使用 clearQueue()函数清空指定的队列(不会执行其中的函数)。

语法

jQueryObject.dequeue( [ dequeueName ] )

参数
参数描述
dequeueName 可选/String 类型指定的队列名称，默认为"fx"(表示 jQuery 中的标准动画效果队列)。
返回值
dequeue()函数的返回值是 jQuery 类型，返回当前 jQuery 对象本身。

//入队列 queue
$('.demo').queue('chain', function (next) {

    console.log('over1');
    next();

}).queue('chain', function (next) {

    console.log('over2');
    next();

}).queue('chain', function (next) {

    console.log('over3');

})

//出队列 dequeue
console.log($('.demo').queue('chain'));

$('.demo').dequeue('chain');

console.log($('.demo').queue('chain'));

//清空队列 clearQueue()
$('.demo').clearQueue('chain');

console.log($('.demo').queue('chain'));

$('.demo')
.css({position:'absolute', left: 0, top: 0 ，width:100, height:100, backgroundColor:'red'})
.on('click', function  ()  {

    $(this).dequeue('chain');

}).queue('chain', function (next) {

$(this).animate({width:120, height: 120, left: 100, top: 100});

next();

}).queue('chain', function (next) {

    $(this).animate({width:220, height: 220, left: 200, top: 200});
    next();

}).queue('chain', function (next) {

    $(this).animate({width:320, height: 320, left: 300, top: 300});

})

第七节课

jQuery 实例方法-位置图形

位置坐标图形大小相关方法：

.offset()
.position()
.scrollTop() 、.scrollLeft()
.width()、.height()
.innerWidth()、.outerWidth()、.innerHeight()、.outerWidth()

.offset()
//offset 永远参照文档定位
//offset left top
//读取值
// console.log($('.demo').offset());

//赋值
// $('.demo').offset({left:100, top:100})

offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。该函数只对可见元素有效。

该函数返回一个坐标对象(Object)，该对象有一个 left 属性和 top 属性。属性值均为数字，它们都以像素(px)为单位。
与 position()不同的是：offset()返回的是相对于当前文档的坐标，position()返回的是相对于其定位的祖辈元素的坐标。

该函数属于 jQuery 对象(实例)。

语法

jQueryObject.offset([coordinates])

参数 coordinates 应该是一个具备 left 和 top 属性的对象。
参数 coordinates 还可以是函数，则 offset()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

offset()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的坐标对象。函数的返回值就是需要设置的坐标对象。

注意：

1、如果省略了 coordinates 参数，则表示获取偏移位置；如果指定了该参数，则表示设置偏移位置。2、offset()函数的"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。
offset()中的坐标参考系是以当前文档的左上角为原点(0,0)，向右为正，向下为正。

.position()
/position 不能赋值 和 css 的定位规则一样
// console.log($('.demo').position());
//scrollTop  scrollLeft 参数只能传数值，不能传字付串
// $(window).scrollTop();
// $(window).scrollLeft();

position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。

所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的 static 即可)。
该函数返回一个坐标对象，该对象有一个 left 属性和 top 属性。属性值均为数字，它们都以像素(px)为单位。

与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与 offset()函数相同。

语法

jQueryObject.position( )

返回值

position()函数的返回值为 Object 类型，返回一个相对于离它最近的"被定位的"祖辈元素的偏移坐标对象，该对象具有left和top属性。

如果当前jQuery对象匹配多个元素，返回坐标时，position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回undefined。

position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0)，向右为正，向下为正。

$.scrollLeft()

scrollLeft()函数用于设置或返回当前匹配元素相对于水平滚动条左侧的偏移。

当一个元素的实际宽度超过其显示区域的宽度时，在一定的设置下，浏览器会为该元素显示相应的水平滚动条。此时，scrollLeft()返回的就是该元素在可见的滚动区域左侧被隐藏部分的宽度(单位：像素)。

如果水平滚动条在最左侧(也就是可见区域左侧没有被隐藏的内容)，或者当前元素是不可水平滚动的，那么 scrollLeft()将返回 0。
该函数属于jQuery对象(实例)，并且对可见的和隐藏的元素均有效。

语法

jQueryObject.scrollLeft( [ value ] )

注意：

1、如果省略了 value 参数，则表示返回偏移值；如果指定了该参数，则表示设置偏移值。
2、scrollLeft()函数的"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。

$.scrollTop()

crollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。

当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，浏览器会为该元素显示相应的垂直滚动条。此时，scrollTop()返回的就是该元素在可见区域之上被隐藏部分的高度(单位：像素)。

如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，或者当前元素是不可垂直滚动的，那么 scrollTop()将返回 0。
该函数属于 jQuery 对象(实例)，并且对可见的和隐藏的元素均有效。

语法

jQueryObject.scrollTop( [ value ] )

注意：

1、如果省略了 value 参数，则表示返回偏移值；如果指定了该参数，则表示设置偏移值。
2、scrollTop()函数的"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。

.height()/ .width()—>content

height()函数用于设置或返回当前匹配元素的高度。
该高度值不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的高度。如下图：

在这里插入图片描述

语法

jQueryObject.height( [ value ] )

注意：

1、如果省略了 value 参数，则表示获取高度；如果指定了该参数，则表示设置高度。
2、height()函数的"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。

参数描述

value 可选/Number 类型用于设置的高度值。

jQuery1.4.1 新增支持：参数 value 可以为函数，则 height()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。
height()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的高度值。函数的返回值就是需要设置的高度值。

.innerWidth()/.innerHeight()—>content + padding

innerHeight()函数用于设置或返回当前匹配元素的内高度。

内高度包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的高度。如下图：

在这里插入图片描述

该函数属于 jQuery 对象(实例)，并且对不可见的元素依然有效。

语法 jQueryObject.innerHeight( [ value ] )

注意：

1、如果省略了 value 参数，则表示获取内高度；如果指定了该参数，则表示设置内高度。
2、innerHeight()函数的"设置"操作针对的是当前 jQuery 对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。

参数 value 还可以为函数，则 innerHeight()将根据匹配的所有元素遍历执行该函数，函数中的 this 将指向对应的 DOM 元素。

innerHeight()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内高度。函数的返回值就是需要设置的内高度。

返回值

innerHeight()函数的返回值为 jQuery/Number 类型，返回值的类型取决于 innerHeight()函数当前执行的是"设置"操作还是"读取"操作。

如果 innerHeight()函数执行的是"设置"操作，则返回当前 jQuery 对象本身；如果是"读取"操作，则返回第一个匹配元素的内高度。

如果当前 jQuery 对象匹配多个元素，返回内高度时，innerHeight()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回 null。

innerHeight()不适用于 window 和 document，请使用 height()替代。

.outerWidth()/.outerWidth()—>content + padding + border

outerHeight()函数用于获取当前匹配元素的外高度。
外高度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的高度。你也可以指定参数为 true (content + padding + border + margin)，以包括外边距(margin)部分的高度。如下图：

在这里插入图片描述

语法
jQueryObject.outerHeight( [ includeMargin ] )
注意：如果当前 jQuery 对象匹配多个元素，则只返回第一个匹配的元素的外高度。
参数
参数描述
includeMargin 可选/Boolean 类型指示是否包含外边距部分的高度，默认为 false。

返回值
outerHeight()函数的返回值为 Number 类型，返回第一个匹配元素的外高度。
如果当前 jQuery 对象匹配多个元素，返回外高度时，outerHeight()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回 null。
outerHeight()不适用于 window 和 document，请使用 height()替代。

第八节课

jQuery 实例方法-遍历索引

遍历索引相关方法：

.each()，补充.children()
.index()
.each()

jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的 this 指针引用了该元素。
该函数属于全局 jQuery 对象。请注意，这与 jQuery 对象(实例)的 each()函数不同。

语法

jQuery.each( object, callback )

参数描述

object Object 类型指定需要遍历的对象或数组。
callback Function 类型指定的用于循环执行的函数。

参数 object 可以是对象或数组。如果是对象，则遍历该对象的每个属性；如果是数组，则遍历该数组中的每个元素。
jQuery.each()函数将根据每个成员(对象的属性或数组的元素)循环调用函数 callback。每次调用函数 callback 时，jQuery.each()函数都会将 callback 函数内部的 this 引用指向当前正在迭代的成员，并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从 0 开始计数)，第二个参数是当前迭代成员(与 this 的引用相同)。
jQuery.each()函数还会根据每次调用函数 callback 的返回值来决定后续动作。如果返回值为 false，则停止循环(相当于普通循环中的 break)；如果返回其他任何值，均表示继续执行下一个循环。

.children()

children()函数用于选取每个匹配元素的子元素，并以 jQuery 对象的形式返回。
你还可以使用选择器进一步缩小筛选范围，筛选出符合指定选择器的元素。

语法 jQueryObject.children( [ selector ] )

参数描述

selector 可选/String 类型指定的选择器字符串。

children()函数将在当前 jQuery 对象每个匹配元素的所有子元素中筛选符合指定选择器的元素。

如果省略 selector 参数，则选取匹配元素的所有子元素。

children()函数只在当前 jQuery 对象匹配元素的所有子元素中查找，不会查找"孙子"以及更后代的元素。

.index()

index()函数用于获取当前 jQuery 对象中指定 DOM 元素的索引值。
语法
jQueryObject.index( [ object ] )
参数
参数描述
object 可选/String/Element/jQuery 类型表示指定元素的对象。
返回值
index()方法的返回值为 Number 类型，返回指定元素的索引位置(从 0 开始算起)。
注意：以下文本描述中的当前元素表示当前 jQuery 对象的第一个元素。
如果没有指定参数 object，则返回当前元素在其所有同辈元素中的索引位置。
如果 object 为 String 类型，则将其视作选择器，返回当前元素在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前元素不在匹配到的元素内，则返回-1。
如果 object 为 DOM 元素或 jQuery 对象，则返回该元素(或该 jQuery 对象中的第一个元素)在当前 jQuery 对象所匹配的元素中的索引位置。

第九节课

jQuery 工具方法

$.type() 判断数据类型
$.isArray() $.isFunction()    $.isWindow…
$.trim() 消除空格
$.proxy() 改变this指向
$.noConflict()防止冲突
$.each() 循环 map...
$.parseJSON() 严格 json 字符串转换成对象 – 原生 JSON.parse();
$.makeArray() 类数组转换成数组
$.isArray() $.isFunction() $.isWindow…

$.type() 判断数据类型

jQuery.type()函数用于确定 JavaScript 内置对象的类型，并返回小写形式的类型名称。

JavaScript 也自带有一个 typeof 运算符，可以确定数据的类型。不过，对于绝大多数对象而言，typeof 运算符都返回"object"，无法区分具体的类型。jQuery.type()可以更加精确地确定 JS 内置对象的类型。

例如：对于 new Number(5)，typeof 返回"object"，jQuery.type()返回"number"；对于 new Date()，typeof 返回"object"，jQuery.type()返回"date"。

该函数属于全局的 jQuery 对象。

语法
jQuery.type( obj )

参数描述

obj 任意类型需要确定类型的任意。

返回值

jQuery.type()函数的返回值为 String 类型，返回指定参数的类型。
jQuery.type( undefined ); // "undefined"
jQuery.type( null ); // "null"
jQuery.type( true ); // "boolean"
jQuery.type( new Boolean(true) ); // "boolean"
jQuery.type( 3 ); // "number"
jQuery.type( new Number(3) ); // "number"
jQuery.type( "test" ); // "string"
jQuery.type( new String("test") ); // "string"
jQuery.type( function(){} ); // "function"
jQuery.type( new Function() ); // "function"
jQuery.type( [] ); // "array"
jQuery.type( new Array() ); // "array"
jQuery.type( new Date() ); // "date"
jQuery.type( new Error() ); // "error" // jQuery 1.9 新增支持 jQuery.type( /test/ ); // "regexp"
jQuery.type( new RegExp("\\d+") ); // "regexp" /_ 除上述类型的对象外，其他对象一律返回"object" _/
jQuery.type( {} ); // "object"
function User() { }
jQuery.type( new User() ); // "object"

//之前的方法     实例方法    基于   $('.demo')

//工具方法,不用基于选择的东西来操作，住住是操作一些原生的数据类型，例如：对象，数组，函数，空格...

//与 js typeof 对比

// typeof(); 里面的数据是什么类型
//typeof(null)
//undefined String Number Boolean Object Function 六种类型

//$.type() 里面的数据到底是什么
console.log($.type(undefined));
console.log($.type('abc'));
console.log($.type(123));
console.log($.type(true));
console.log($.type(function () {}));
console.log($.type(null));
console.log($.type({}));
console.log($.type([1, 2, 3, 4]));
console.log($.type(new Date()));
console.log($.type(new Number));
console.log($.type(new Person()));
function Person() {}

$.isArray() $.isFunction() $.isWindow…

$.isArray() 判断是否是数组

Console.log($.isArray([1, 2, 3,4])) true/false

$.isFunction() 判断是否是函数

console.log( $isFunction((function(){})())) false console.log($ .isFunction(function(){})) true

$.isWindow 判断是不是 window

console.log($.isWindow (window)) true

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
该函数属于全局 jQuery 对象。

jQuery.inArray( value, array [, fromIndex ] )

如果数组中存在多个相同的值，则以查找到的第一个值的索引为准。

注意：如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1 来进行判断。

$.trim() 消除空格

jQuery.trim()函数用于去除字符串两端的空白字符。

该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符。

该函数属于全局的 jQuery 对象。

语法 jQuery.trim( str )

参数描述
str String 类型需要去除两端空白字符的字符串。

如果参数 str 不是字符串类型，该函数将自动将其转为字符串(一般调用其 toString()方法)。如果参数 str 为 null 或 undefined，则返回空字符串(“”)。

$.proxy() 改变 this 指向

var list = {
    //初始化函数
    init: function () {
        this.ms = 23
        this.dom = document.getElementById('demo')
        this.bindEvent()
    },

    //绑定事件
    bindEvent: function () {
        //this.dom.onclick = this.show;
        //会报错
        this.dom.onclick = $.proxy(this.show, this)
    },

    //事件处理函数
    show: function () {
        console.log(this.produseMs(this.ms))
    },

    //辅助方法
    produseMs: function (ms) {
        return ms + 234
    },
}

list.init();

在某些情况下，我们调用 Javascript 函数时候，this 指针并不一定是我们所期望的那个。例如：

//正常的 this 使用

$('#myElement').click(function () {
    // 这个 this 是我们所期望的，当前元素的 this. $(this).addClass('aNewClass');
})

//并非所期望的 this
$('#myElement').click(function () {
    setTimeout(function () {
        // 这个this指向的是settimeout函数内部，而非之前的html元素
        $(this).addClass('aNewClass')
    }, 1000)
})

//这时候怎么办呢，通常的一种做法是这样的：

$('#myElement').click(function () {
    var that = this
    //设置一个变量，指向这个需要的this setTimeout(function() {
    // 这个this指向的是settimeout函数内部，而非之前的html元素 $(that).addClass('aNewClass'); }, 1000);
})

但是，在使用了 jquery 框架的情况下，有一种更好的方式，就是使用$.proxy 函数。

jQuery.proxy(),接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文(context)语境。
有两种语法：

jQuery.proxy( function, context )

/**function 将要改变上下文语境的函数。 ** context 函数的上下文语境(this)会被设置成这个 object 对象。 **/ jQuery.proxy( context, name ) /**context 函数的上下文语境会被设置成这个 object 对象。 **name 将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ **对象的属性) **/

上面的例子使用这种方式就可以修改成：

$('#myElement').click(function () {
    setTimeout(
        $.proxy(function () {
            $(this).addClass('aNewClass')
        }, this),
        1000
    )
})

$.each() 循环 map…

jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的 this 指针引用了该元素。

该函数属于全局 jQuery 对象。请注意，这与 jQuery 对象(实例)的 each()函数不同。

语法 jQuery.each( object, callback )

参数描述

object Object 类型指定需要遍历的对象或数组。

callback Function 类型指定的用于循环执行的函数。

参数 object 可以是对象或数组。如果是对象，则遍历该对象的每个属性；如果是数组，则遍历该数组中的每个元素。

jQuery.each()函数将根据每个成员(对象的属性或数组的元素)循环调用函数 callback。每次调用函数 callback 时，jQuery.each()函数都会将 callback 函数内部的 this 引用指向当前正在迭代的成员，并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从 0 开始计数)，第二个参数是当前迭代成员(与 this 的引用相同)。

jQuery.each()函数还会根据每次调用函数 callback 的返回值来决定后续动作。如果返回值为 false，则停止循环(相当于普通循环中的 break)；如果返回其他任何值，均表示继续执行下一个循环。

$.map()

jQuery.map()函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

jQuery 库中还有一个同名的实例方法 map()，它仅用于对当前 jQuery 对象所匹配的元素进行遍历处理。
该函数属于全局 jQuery 对象。

语法 jQuery.map( object, callback )

参数描述

object Array/Object 类型指定的需要处理的数组或对象。

callback Function 类型指定的处理函数。

在 jQuery 1.6 之前，该函数只支持遍历数组；从 1.6 开始，该函数也支持遍历对象。

jQuery.map()函数将遍历数组的元素(或对象的属性)并分别执行函数 callback，函数中的 this 将指向全局对象(window)。jQuery.map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。

每次执行 callback 函数的返回值将作为结果数组中的一个元素，如果函数的返回值为 null 或 undefined，则不会被添加到结果数组中。
两者的区别：

map()方法主要用来遍历操作数组和对象，each()主要用于遍历 jquery 对象。
each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用 map，则有可能造成内存浪费。

测试例子：

总结：当遍历数组的时候，each 因为没有返回值，所以用不用 return 都不会改变其值，map 因为是创建一个新的数组，所以对原来的数组也不会造成影响。

当遍历对象的时候，each 遍历时候如果改动了参数值（不管 return 有木有加），原来的对象即被改变了，而 map 遍历的时候改动了参数值（必须加 return，否则返回[]），遍历创建的新的对象和原来的对象均被改变了。

$.parseJSON()

jQuery.parseJSON()函数用于将格式完好的 JSON 字符串转为与之对应的 JavaScript 对象。

所谓"格式完好"，就是要求指定的字符串必须符合严格的 JSON 格式，例如：属性名称必须加双引号、字符串值也必须用双引号。
如果传入一个格式不"完好"的 JSON 字符串将抛出一个 JS 异常，例如：以下字符串均符合 JSON 格式，但它们不是格式完好的 JSON 字符串(因此会抛出异常)：

// 以下均是字符串值，省略了两侧的引号，以便于展现内容 {id: 1}
// id 是属性名称，必须加双引号
{‘id’: 1} // id 是属性名称，必须用双引号(不能用单引号)

{“name”: ‘CodePlayer’} // name 属性的值是字符串，必须用双引号(不能用单引号)

JSON 标准不允许字符串中出现"控制字符"，例如：一个 Tab 或换行符。

$.parseJSON(‘{“name”: “Code\tPlayer\n”}’);
// 多数情况下，它会抛出一个错误，因为 JS 解析器会将字符串中的\t 或\n 等转义直接视作字面值，起到 Tab 或换行的效果。 //正确写法应该如下(使用两个反斜杠，以免被 JS 解析器直接转义\t 或\n)： $.parseJSON(‘{“name”: “Code\tPlayer\n”}’);

如果浏览器提供了一个本地的 JSON.parse()方法，则 jQuery 将使用它来解析 JSON 字符串。
在 jQuery 1.9 之前(不含 1.9)：如果传入一个空字符串、null 或 undefined，该函数将返回 null，而不是抛出一个错误，即使它不是有效的 JSON 字符串。

$.makeArray() 类数组转换成数组

函数用于将一个类数组对象转换为真正的数组对象。
所谓"类数组对象"就是一个常规的 Object 对象，但它和数组对象非常相似：具备 length 属性，并以 0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)。
语法

参数描述
object Object 类型需要转换为数组的类数组对象。

注意事项：
一个类数组对象，它至少应该具备 length 属性，哪怕其值为 0，它可以没有"元素"(相当于空数组)。
如果参数 object 没有 length 属性，则它不是类数组对象。jQuery.makeArray()会直接将其视作结果数组中的一个元素。
String 对象虽然有 length 属性，但一般不将其视作类数组对象。该函数仍然直接将其视作结果数组中的一个元素。
如果对象的最大数字属性大于或等于 length 属性，则以 length 属性为准，大于或等于其值的数字属性将被忽略。

//makeArray 把类数组转为数组
var obj = {
    0: "a",
    1: "b",
    2: "c",
    length: 3,
}

var arr = $.makeArray(obj);

//原生的方法
Var obj = {
// 0: "a",
// 1: "b",
// 2: "c",
// length: 3,
// slice: Array.prototype.slice
}


console.log(obj.slice(0));

//两个参数  -->底层是拼接，数据类型是后面一位的数据类型


Var arr = [1, 2, 3];


// console.log($.makeArray(4, obj));
// console.log($.makeArray('abc', obj));
// console.log($.makeArray(arr, obj));
// console.log($.makeArray(obj, obj));


console.log($.makeArray(obj, arr));

$.extend() 插件扩展（工具方法）

$.fn.extend() 插件扩展（实例方法）

1、扩展方法
2、浅层克隆:你有的我要复盖，你没有我给你，引用值用同一个和，复制指针
3、深层克隆

$.extend() 插件扩展（工具方法）

jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。

该函数可以将一个或多个对象的成员属性和方法复制到指

定的对象上。

//2、浅层克隆:

Var obj1 = {
    lastName: 'deng',
    age:6,
    girlFriend:{
        name:'xiaozhang'
    }
}

var obj2 = {
    lastName:"laodeng",
    age:50,
    smok:true,
    girlFriend:{
        name:'xiaowang'
    }
}

var obj3 = {
    lastName:'liu',
    fortun:10000000
}

//$.extend(obj1,  obj2)
// $.extend(obj1, obj2, obj3);

//3、深层克隆:(静态的)
Var obj1 = {
    lastName: 'deng',
    age:6,
}

var obj2 = {
    lastName:"laodeng",
    age:50,
    smok:true,
    son: {
        name:'xiaozhang',
        age: 1
    }
}

Var obj3 = {
    lastName:'liu',
    fortun:10000000
}

$.extend(true, obj1, obj2)

// obj1.son.age += 1
// obj1
// obj2.son.age += 1
// obj2
// obj1

该函数属于全局 jQuery 对象。

语法

用法一：jQuery 1.0 新增该用法。jQuery.extend( target [, object1 ] [,objectN… ] )

用法二：jQuery 1.1.4 新增该用法。

jQuery.extend( [ deep ], target , object1 [, objectN… ]

用法二是用法一的变体，参数 deep 用于指示是否深度递归合并。

参数描述

deep 可选/Boolean 类型指示是否深度合并对象，默认为 false。如果该值为 true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。

target Object 类型目标对象，其他对象的成员属性将被复制到该对象上。

object1 可选/Object 类型第一个被合并的对象。

objectN 可选/Object 类型第 N 个被合并的对象。

注意事项：

该函数复制的对象属性包括方法在内。此外，还会复制对象继承自原型中的属性(JS 内置的对象除外)。
参数 deep 的默认值为 false，你可以为该参数明确指定 true 值，但不能明确指定 false 值。简而言之，第一个参数不能为 false 值。
如果参数为 null 或 undefined，则该参数将被忽略。
如果只为$.extend()指定了一个参数，则意味着参数 target 被省略。此时，target 就是 jQuery 对象本身。通过这种方式，我们可以为全局对象

jQuery 添加新的函数。

如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
返回值

jQuery.extend()函数的返回值是Object类型，返回扩展了其他对象的属性后的目标对象(即参数target)。

知识 1：用 JQuery 写插件时，最核心的方法有如下两个：

$.extend(object) 可以理解为 JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为 JQuery 实例添加一个方法。

基本的定义与调用：

/* * * * * * _ $.extend 定义与调用_ * * * * * * * * * * * * * * * * * * * * * * * * / $.extend({ fun1: function () { alert(“执行方法一”); } }); $.fun1();
/ * * * * * _ $.fn.extend 定义与调用 _ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert(“执行方法 2”); } }); $(this).fun2();
//等同于 $.fn.fun3 = function () { alert(“执行方法三”); } $(this).fun3();

jQuery 工具方法-高级方法

$.ajax() - 基本使用

前提：看一下，《你不知道的 js》课程中的 UI 多线程-深入剖析 js 执行机制

$.Callbacks() 回调
$.Deferred() 异步
$.when()

$.ajax() - 基本使用

// 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person'

// jquery $.ajax
// 不管返回值

// 参数 obj
// 属性 url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person'
// type: 请求方式
// data: {} 参数 信息
// success: 请求成功后的处理函数
// error: 请求失败后的处理函数
// complete: 请求完成的处理函数 最后执行
// context: 改变函数上下文
// timeout:
// async: true false 是否异步
// dataType: 'jsonp'
// function deal (res) {
// console.log(res);
// }

// $.ajax({
// url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
// type: 'GET',
// data: {
// wd: 'nba',
// cb: 'deal'
// },
// dataType: 'jsonp',

// // success: function (res) {

// // },
// // error: function (e) {
// // console.log(e.status, e.statusText);
// // },
// // complete: function () {
// // },
// // context: $('.wrapper')
// });

// console.log('over');

//回调地狱

//设计模式 六大原则
//单一职责原则：让函数只做一件事情
//开闭原则：扩展对外是开放

$.Callbacks() 回调

异步编程

1、异步编程 -》完 -》触发一个函数（回调函数）
2、异步编程离不开回调机制

//1、
//异步编程下的回调
//2、(当满足条件下执行函数)

//需要回调逻辑的场合中，也可以使作 callbacks,可以做一些后续的事件
//不一定只指在异步的编程中才叫回调，例：实现什么的条件，给我调一个什么样的函数吧（也叫回调）
//参数
//once 只执行一次
//memory 带有记忆功能
//unique 去重
//stopOnFalse 遇到 false 就停

var cb = $.Callbacks('stopOnFalse');

function a (x, y) {
    console.log('a', x, y);
}

Function b(x, y) {
    console.log('b', x, y);
    return false;
}

Function c (x, y) {
    console.log('c', x, y);
}

cb.add(a, b);
cb.add(c);
cb.fire(10, 20);
//function c(x, y) {
//console.log('c', x, y);
//}
// cb.add(c);

//回调机制很好用 -->
//1、内部回调机制：js 单线程 -> 异步编程优化体验，防止阴塞页面  -(需要回 js 主线程)回调函数
//2、逻辑上回调：运动函数  animate 当你满足某个状态，接下要去做另外一件事

jQuery 的有关 Deferred 的 API 简介：


//延迟
// var df = $.Deferred();
//done 成功 fail 失败 progress 正在进行
//resolve reject notify

//做一件异步的事情 (防止触发状态)
function createScore() {
    var df = $.Deferred();

    setInterval(function () {
        var score = Math.random() \* 100;
    if(score > 60) {
        df.resolve();
    }else if (score < 50) {
        df.reject();
    }else {
        df.notify();
    }
    }, 1500);
        //done fail grogress

    return df.promise(); //返回 promise 对象，只有注册，没有触发
}

    var  df  =  createScore();

//注册成功的回调函数

df.done(function () {

    console.log('oh yeah I do it');
});

//注册失败的回调函数
df.fail(function () {
    console.log('sorry I an loser')
})

//注册进行时函数
df.progress(function () {
    console.log('waiting...');
})

$.ajax('data/url') .
    done(function(response, statusText, jqXHR){
        console.log(statusText);
}) .
    fail(function(jqXHR, statusText, error){
        console.log(statusText);
})
,always(function(){
console.log('I will always done.');
});

1.done,fail,progress 都是给回调列表添加回调，因为 jQuery 的 Deferred 内部使用了其$.Callbacks 对象，并且增加了 memory 的标记（详情请查看我的这篇文章 jQuery1.9.1 源码分析–Callbacks 对象），所以如果我们第一次触发了相应的回调列表的回调即调用了 resolve，resolveWith，reject，rejectWith 或者 notify，notifyWith 这些相应的方法，当我们再次给该回调列表添加回调时，就会立刻触发该回调了，即使用 done,fail,progress 这些方法，而不需要我们手动触发。jQuery 的 ajax 会在请求完成后就会触发相应的回调列表。所以我们后面的链式操作的注册回调有可能是已经触发了回调列表才添加的，所以它们就会立刻被执行。
2.always 方法则是不管成功还是失败都会执行该回调。
接下来要介绍重量级的 then 方法（也是 pipe 方法）：
3.then 方法会返回一个新的 Deferred 对象
如果 then 方法的参数是 deferred 对象，上一链的旧deferred会调用[ done | fail | progress ]方法注册回调，该回调内容是：执行then方法对应的参数回调（fnDone, fnFail, fnProgress）。
1）如果参数回调执行后返回的结果是一个 promise 对象，我们就给该 promise 对象相应的回调列表添加回调，该回调是触发then方法返回的新 promise 对象的成功，失败，处理中（done，fail，progress）的回调列表中的所有回调。
当我们再给then方法进行链式地添加回调操作（done,fail,progress,always,then）时，就是给新 deferred 对象注册回调到相应的回调列表。
如果我们then参数fnDoneDefer,fnFailDefer, fnProgressDefer 得到了解决，就会执行后面链式添加回调操作中的参数函数。
2）如果参数回调执行后返回的结果returned不是promise对象，就立刻触发新deferred对象相应回调列表的所有回调,且回调函数的参数是先前的执行返回结果returned。
当我们再给 then 方法进行链式地添加回调操作
（done,fail,progress,always,then）时，就会立刻触发我们添加的相应的回调。 *
可以多个 then 连续使用，此功能相当于顺序调用异步回调。

$.ajax({ url: 't2.html', dataType: 'html', data: { d: 4 } })
    .then(
        function () {
            console.log('success')
        },
        function () {
            console.log('failed')
        }
    )
    .then(
        function () {
            console.log('second')
            return $.ajax({ url: 'jquery-1.9.1.js', dataType: 'script' })
        },
        function () {
            console.log('second f')
            return $.ajax({ url: 'jquery-1.9.1.js', dataType: 'script' })
        }
    )
    .then(
        function () {
            console.log('success2')
        },
        function () {
            console.log('failed2')
        }
    )

上面的代码，如果第一个对 t2.html 的请求成功输出 success，就会执行 second 的 ajax 请求，接着针对该请求是成功还是失败，执行 success2 或者 failed2。

如果第一个失败输出 failed，然后执行 second f 的 ajax 请求（注意和上面的不一样），接着针对该请求是成功还是失败，执行 success2 或者 failed2。

理解这些对失败处理很重要。

将我们上面序列化异步操作的代码使用 then 方法改造后，代码立马变得扁平化了，可读性也增强了：

var req1 = $.get('api1/data');
var req2 = $.get('api2/data');
var req3 = $.get('api3/data');

req1.then(
    function(req1Data){
        return req2.done(otherFunc);
    }).then(
        function(req2Data){
            return req3.done(otherFunc2);
        })
        .then(
            function(req3Data){
                doneSomethingWithReq3();
            }
        );

//核心 then
Var df = $.Deferred();

//简第注册的写法

df.then(
    function(){
        console.log('don1');
    },
    function() {
        console.log('fail');
    },
    function () {
        console.log('progress');
})
.then(
    function(){
        console.log('don1');
    },
    function() {
        console.log('fail');
    },
    function () {
        console.log('progress');
    }
);

function createScore() {
    var df = $.Deferred();
    setInterval(
        function() {
                var score = Math.random() \* 100;
            if (score > 60) {
                df.resolve('congradulation!!!');
            } else if (score < 50) {
                df.reject('get out');
            } else {
                df.notify('go on');
            }
    }, 1500);

    //done fail grogress

    return df.promise(); //返回 promise 对象，只有注册，没有触发
}

var df = createScore();

//可以有返回值，而作为下一个 then 的参数
df.then(
    function(ms) {
        console.log('oh Yeah!' + " " + ms);
        return 'ok';
    },
    function(ms) {
        console.log('oh No!' + " " + ms);
        return 'no';
    }, function(ms) {
        console.log('what?' + " " + ms);
        return 'go on';
    })
    .then(
        function(param) {
            console.log('泡妞' + param);
        },
        function(param) {
            console.log(param + '脸');
        },
        function(param) {
            console.log(param + '加油');
        }
);

4.接着介绍$.when 的方法使用，主要是对多个 deferred 对象进行并行化操作，当所有 deferred 对象都得到解决就执行后面添加的相应回调。

$.when(
    $.ajax({ url: 't2.html' }),
    $.ajax({ url: 'jquery-1.9.1-study.js' })
).then(
    function (FirstAjaxSuccessCallbackArgs, SecondAjaxSuccessCallbackArgs) {
        console.log('success')
    },
    function () {
        console.log('failed')
    }
)

//如果有一个失败了都会执行失败的回调。
//将我们上面并行化操作的代码改良后：

$.when($.get('api1/data'), $.get('api2/data'), $.get('api3/data'), {
    key: 'value',
}).done()

5.promse 方法是返回的一个 promise 对象，该对象只能添加回调或者查看状态，但不能触发。我们通常将该方法暴露给外层使用，而内部应该使用 deferred 来触发回调。
如何使用 deferred 封装异步函数

第一种：

function getData() {
    // 1) create the jQuery Deferred object that will be used var deferred = $.Deferred();
    // ---- AJAX Call ----
    // var xhr = new XMLHttpRequest(); xhr.open("GET","data",true);
    // register the event handler xhr.addEventListener('load',function(){ if(xhr.status === 200){ // 3.1) RESOLVE the DEFERRED (this will trigger all the done()...) deferred.resolve(xhr.response); }else{ // 3.2) REJECT the DEFERRED (this will trigger all the fail()...) deferred.reject("HTTP error: " + xhr.status); } },false) // perform the work xhr.send(); // Note: could and should have used jQuery.ajax. // Note: jQuery.ajax return Promise, but it is always a good idea to wrap it // with application semantic in another Deferred/Promise // ---- /AJAX Call ---- // // 2) return the promise of this deferred return deferred.promise();
}

第二种方法：

function prepareInterface() {
    return $.Deferred(function (dfd) {
        var latest = $('.news, .reactions')
        latest.slideDown(500, dfd.resolve)
        latest.addClass('active')
    }).promise()
}

Deferred 的一些使用技巧：

1.异步缓存

以 ajax 请求为例，缓存机制需要确保我们的请求不管是否已经存在于缓存，只能被请求一次。因此，为了缓存系统可以正确地处理请求,我们最终需要写出一些逻辑来跟踪绑定到给定 url 上的回调。

var cachedScriptPromises = {}
$.cachedGetScript = function (url, callback) {
    if (!cachedScriptPromises[url]) {
        cachedScriptPromises[url] = $.Deferred(function (defer) {
            $.getScript(url).then(defer.resolve, defer.reject)
        }).promise()
    }
    return cachedScriptPromises[url].done(callback)
}

我们为每一个 url 缓存一个 promise 对象。如果给定的 url 没有 promise，我们创建一个 deferred，并发出请求。如果它已经存在我们只需要为它绑定回调。该解决方案的一大优势是，它会透明地处理新的和缓存过的请求。另一个优点是一个基于 deferred 的缓存会优雅地处理失败情况。当 promise 以’rejected’状态结束的话，我们可以提供一个错误回调来测试：

$.cachedGetScript( url ).then( successCallback, errorCallback );

请记住：无论请求是否缓存过，上面的代码段都会正常运作！
通用异步缓存
为了使代码尽可能的通用，我们建立一个缓存工厂并抽象出实际需要执行的任务

$.createCache = function (requestFunc) {
    var cache = {}
    return function (key, callback) {
        if (!cache[key]) {
            cache[key] = $.Deferred(function (defer) {
                requestFunc(defer, key)
            }).promise()
        }
        return cache[key].done(callback)
    }
}
// 现在具体的请求逻辑已经抽象出来，我们可以重新写 cachedGetScript： $.cachedGetScript = $.createCache(function(defer, url){ $.getScript(url).then(defer.resolve, defer.reject); });

我们可以使用这个通用的异步缓存很轻易的实现一些场景：
图片加载

// 确保我们不加载同一个图像两次
$.loadImage = $.createCache(function (defer, url) {
    var image = new Image()
    function clearUp() {
        image.onload = image.onerror = null
    }
    defer.then(clearUp, clearUp)
    image.onload = function () {
        defer.resolve(url)
    }
    image.onerror = defer.reject
    image.src = url
})

// 无论 image.png 是否已经被加载，或者正在加载过程中，缓存都会正常工作。

$.loadImage('my-image.png').done(callback1)
$.loadImage('my-image.png').done(callback1)

缓存响应数据

$.searchTwitter = $.createCache(function (defer, query) {
    $.ajax({
        url: 'http://search.twitter.com/search.json',
        data: { q: query },
        dataType: 'jsonp',
    }).then(defer.resolve, defer.reject)
})

// 在 Twitter 上进行搜索，同时缓存它们 $.searchTwitter( "jQuery Deferred", callback1 );

//定时，基于 deferred 的缓存并不限定于网络请求;它也可以被用于定时目的。
// 新的 afterDOMReady 辅助方法用最少的计数器提供了 domReady 后的适当时机。 如果延迟已经过期，回调会被马上执行。
$.afterDOMReady = (function () {
    var readyTime
    $(function () {
        readyTime = new Date().getTime()
    })
    return $.createCache(function (defer, delay) {
        delay = delay || 0
        $(function () {
            var delta = new Date().getTime() - readyTime
            if (delta >= delay) {
                defer.resolve()
            } else {
                setTimeout(defer.resolve, delay - delta)
            }
        })
    })
})()

2.同步多个动画

var fadeLi1Out = $('ul > li').eq(0).animate({ opacity: 0 }, 1000)
var fadeLi2In = $('ul > li').eq(1).animate({ opacity: 1 }, 2000)

// 使用$.when()同步化不同的动画

$.when(fadeLi1Out, fadeLi2In).done(function () {
    alert('done')
})

//虽然 jQuery1.6 以上的版本已经把 deferred 包装到动画里了，但如果我们想要手动实现，也是一件很轻松的事：

$.fn.animatePromise = function (prop, speed, easing, callback) {
    var elements = this
    return $.Deferred(function (defer) {
        elements.animate(prop, speed, easing, function () {
            defer.resolve()
            if (callback) {
                callback.apply(this, arguments)
            }
        })
    }).promise()
}

// 我们也可以使用同样的技巧，建立了一些辅助方法：

$.each(
    ['slideDown', 'slideUp', 'slideToggle', 'fadeIn', 'fadeOut', 'fadeToggle'],
    function (_, name) {
        $.fn[name + 'Promise'] = function (speed, easing, callback) {
            var elements = this
            return $.Deferred(function (defer) {
                elements[name](speed, easing, function () {
                    defer.resolve()
                    if (callback) {
                        callback.apply(this, arguments)
                    }
                })
            }).promise()
        }
    }
)

3.一次性事件

例如，您可能希望有一个按钮，当它第一次被点击时打开一个面板，面板打开之后，执行特定的初始化逻辑。在处理这种情况时，通常会这样写代码：

var buttonClicked = false
$('#myButton').click(function () {
    if (!buttonClicked) {
        buttonClicked = true
        initializeData()
        showPanel()
    }
})

这是一个非常耦合的解决办法。如果你想添加一些其他的操作，你必须编辑绑定代码或拷贝一份。如果你不这样做，你唯一的选择是测试 buttonClicked。由于 buttonClicked 可能是 false，新的代码可能永远不会被执行，因此你可能会失去这个新的动作。
使用 deferreds 我们可以做的更好（为简化起见，下面的代码将只适用于一个单一的元素和一个单一的事件类型，但它可以很容易地扩展为多个事件类型的集合）：

$.fn.bindOnce = function (event, callback) {
    var element = this
    defer = element.data('bind*once_defer*' + event)
    if (!defer) {
        defer = $.Deferred()
        function deferCallback() {
            element.off(event, deferCallback)
            defer.resolveWith(this, arguments)
        }
        element.on(event, deferCallback)
        element.data('bind*once_defer*' + event, defer)
    }
    return defer.done(callback).promise()
}

$.fn.firstClick = function (callback) {
    return this.bindOnce('click', callback)
}

var openPanel = $('#myButton').firstClick()

openPanel.done(initializeData)

openPanel.done(showPanel)

该代码的工作原理如下：
· 检查该元素是否已经绑定了一个给定事件的 deferred 对象
· 如果没有，创建它，使它在触发该事件的第一时间解决
· 然后在 deferred 上绑定给定的回调并返回 promise 4.多个组合使用
单独看以上每个例子，deferred 的作用是有限的。然而，deferred 真正的力量是把它们混合在一起。 *在第一次点击时加载面板内容并打开面板
假如，我们有一个按钮，可以打开一个面板，请求其内容然后淡入内容。使用我们前面定义的方法，我们可以这样做：

var panel = $('#myPanel')
panel.firstClick(function () {
    $.when($.get('panel.html'), panel.slideDown()).done(function (ajaxArgs) {
        panel.html(ajaxArgs[0]).fadeIn()
    })
})

在第一次点击时载入图像并打开面板
假如，我们已经的面板有内容，但我们只希望当第一次单击按钮时加载图像并且当所有图像加载成功后淡入图像。HTML 代码如下：

<div id="myPanel">
    {' '}
    <img data-src="image1.png" />
    <img data-src="image2.png" />
    <img data-src="image3.png" />
    <img data-src="image4.png" />
</div>

// 我们使用data-src属性描述图片的真实路径。
//那么使用deferred来解决该用例的代码如下：

$('#myBtn').firstClick(function () {
    var panel = $('#myPanel')
    var promises = []
    $('img', panel).each(function () {
        var image = $(this)
        var src = element.data('src')
        if (src) {
            promises.push(
                $.loadImage(src).then(
                    function () {
                        image.attr('src', src)
                    },
                    function () {
                        image.attr('src', 'error.png')
                    }
                )
            )
        }
    })
    promises.push(panel.slideDown)
    $.when.apply(null, promises).done(function () {
        panel.fadeIn()
    })
})

//在特定延时后加载页面上的图像
假如，我们要在整个页面实现延迟图像显示。要做到这一点，我们需要的 HTML 的格式如下：

<img data-src="image1.png" data-after="1000" src="placeholder.png" />
<img data-src="image2.png" data-after="1000" src="placeholder.png" />
 <img data-src="image1.png" src="placeholder.png" />
 <img data-src="image2.png" data-after="2000" src="placeholder.png" />

// 意思非常简单： image1.png，第三个图像立即显示，一秒后第一个图像显示 image2.png 一秒钟后显示第二个图像，两秒钟后显示第四个图像

$('img').each(function () {
                var element = $(this),
                    src = element.data('src'),
                    after = element.data('after')
                if (src) {
                    $.when($.loadImage(src), $.afterDOMReady(after))
                        .then(
                            function () {
                                element.attr('src', src)
                            },
                            function () {
                                element.attr('src', 'error.png')
                            }
                        )
                        .done(function () {
                            element.fadeIn()
                        })
                }
            })

   // 如果我们想延迟加载的图像本身，代码会有所不同：

$('img').each(function () {
                var element = $(this),
                    src = element.data('data-src'),
                    after = element.data('data-after')
                if (src) {
                    $.afterDOMReady(after, function () {
                        $.loadImage(src)
                            .then(
                                function () {
                                    element.attr('src', src)
                                },
                                function () {
                                    element.attr('src', 'error.png')
                                }
                            )
                            .done(function () {
                                element.fadeIn()
                            })
                    })
                }
            })


//这里，我们首先在尝试加载图片之前等待延迟条件满足。当你想在页面加载时限制网络请求的数量会非常有意义。

Deferred 的使用场所：

Ajax（XMLHttpRequest） Image Tag，Script Tag，iframe //（原理类似）
setTimeout/setInterval CSS3 Transition/Animation HTML5 Web Database postMessage Web Workers Web Sockets and more…

mouseover() 方法

当鼠标指针位于元素上方时时，改变元素的背景色：

$('p').mouseover(function () {
    $('p').css('background-color', 'yellow')
})

//Mousemove
//获得鼠标指针在页面中的位置：

$(document).mousemove(function (e) {
    $('span').text(e.pageX + ', ' + e.pageY)
})

定义和用法
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。

click() 方法

click()函数用于为每个匹配元素的 click 事件绑定处理函数。该函数也可用于触发 click 事件。

click 事件就是鼠标按钮单击事件。此外，你还可以额外传递给事件处理函数一些数据。

此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发 click 事件时，jQuery 会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过 click()绑定的事件，请使用 unbind()函数。

该函数属于 jQuery 对象(实例)。

语法
复制
全屏
全选

JavaScript:
jQueryObject.click( [ [ data ,] handler ] )

如果指定了至少一个参数，则表示绑定 click 事件的处理函数；没有指定任何参数，则表示触发 click 事件。

参数描述
data 可选/任意类型触发事件时，需要通过 event.data 传递给事件处理函数的任意数据。
handler 可选/Function 类型指定的事件处理函数。
jQuery 1.4.3 新增支持：click()支持 data 参数。

参数 handler 中的 this 指向当前 DOM 元素。click()还会为 handler 传入一个参数：表示当前事件的 Event 对象。
如果函数 handler 的返回值为 false，则表示阻止元素的默认事件行为，并停止事件在 DOM 树中冒泡。例如，链接的 click 事件的处理函数返回 false，可以阻止链接的默认 URL 跳转行为。

serialize()方法

//格式
var data = $("form").serialize();

//功能
将表单内容序列化成一个字符串。

//返回结果
username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook

serializeArray()方法

//格式
var jsonData = $("form").serializeArray();

//功能
将页面表单序列化成一个 JSON 结构的对象。注意不是 JSON 字符串。

//返回结果：
[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name。