推荐书籍：《锋利的jquery》《犀利开发jquery内核详解与实践》《jquery源码详细中文注释》
第一章 jquery基础
一、jquery背景简介及使用
1、jquery背景
prototype.js 是（Sam Stephenson写的）最早成型的javascript基础类库。而jquery是一个轻量级的库。jQuery强调的理念就是write less,do more(写得少，做的多)。它的优势有：（1）轻量级；（2）强大的选择器；（3）出色的DOM操作；（4）可靠的事件处理机制；（5）完善的ajax;(6)不污染顶级变量；（7）出色的浏览器兼容性；（8）行为层与结构层分离；（9）丰富的插件支持；（10）开源等。
Jquery库的类型分为两种：jQuery1.3.1.js(114kb)完整无压缩版，主要用于学习、测试和开发；jQuery1.3.1.min.js(54kb/18kb),经过JSMin等工具压缩后的版本，如果服务器开启Gzip压缩后，大小只有18kb,主要用于产品和项目。
2、jQuery的使用
//引入：
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
//使用：
<script>
$(document).ready(function(){ //类似于js中的window.onload
console.log(1);
})
$(function(){ //简写方式
console.log(1);
})
</script>$(document).ready 和 window.onload 的区别：
<1>执行时间不同：前者在页面DOM结构加载完毕后就执行，后者需在页面全部加载完毕（包括图片下载）后才能执行；前者效率高。
<2>执行数量不同：前者可以重复写多个，而后者虽然可以写多个，但只会执行最后一个。
注：DOM文档加载步骤：
<1>首先浏览器会解析静态html结构：head/body...标签
<2>加载外部脚本和样式表文件
<3>解析并执行js/其他 脚本代码
<4>构造html DOM对象，也就是ready操作
<5>加载html和css中引用的外部资源文件(如图片等)
<6>页面加载完成，进行load操作，js进行一些事件的绑定和处理。
3、jquery对象和DOM对象
DOM对象：每个html结构都可以描述为一棵DOM树，节点和元素元素都是DOM对象。
jQuery对象：通过jquery包装DOM对象后产生的对象。本质上他是DOM对象的集合。
注：Jquery对象和DOM对象并不等价，jquery对象不能直接使用DOM对象的属性和方法，DOM对象也不能直接使用jquery对象的属性和方法。这是关键。
注:在jQuery中--当我们调用jQuery()[等价于$()]函数时，其实他本身就返回了一个jQuery对象,会创建对象new jQuery.fn.init( selector, context );而init.prototype的原型已被修改为init.prototype = jQuery.fn，而jQuery.fn = jQuery.prototype所以当执行jQuery()时，他继承了jQuery的原型，所以就能调用到jQuery上的方法了。
例如：
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}<script>
$(function(){
var $b = $('#form1'); //jquery对象
var b = $b[0]; //jquery对象转换为DOM对象
var b1 = $b.get(0); //jquery对象转换为DOM对象
var form1 = document.getElementsByTagName(“form”);
var $form1 = $(form1[0]); //将DOM对象转换为jQuery对象单个:[form1[0]]集合:[form1]
consle.log($b); //object Object
console.log(b); //object HTMLInputElemnet b--DOM对象
console.log(b1); //object HTMLInputElemnet b1--DOM对象
console.log($b.innerHTML); //undefined jquery对象中并没有innerHtml属性
console.log(b.innerHTML); //<input type="checkbox" value="" id="box">
console.log($b.html()); //<input type="checkbox" value="" id="box">
//注:innerHtml是DOM对象的属性,html()是jquery对象的方法
});
</script>
<body>
<form action="" method="post" id="form1">
<input type="checkbox" value="" id="box"/>
</form>
</body>4、jQuery构造函数
jQuery把所有的操作都包装在一个jQuery()构造函数中。他能解析四种类型的参数。
<1>jQuery(expression,content)
expression:可以是id、DOM元素、css表达式（div #warp>p:first）、XPath表达式（div #warp/p:first）
注：XPath是在XML文档中查找信息的语言
<2>jQuery(html)
html:html结构的字符串
<3>jQuery(elements)
elements:元素对象或者集合。例如：$(document).ready(function(){//.})
<4>jQuery(fn)
fn:处理函数。例如：$(function(){//...})
5、解决jquery和其他库冲突问题
注：在jquery中，我们常见到的$符号，是jQuery的快捷方式。在jquery.js中我们可以发现：window.jQuery = window.$ = jQuery;
<script>
jQuery.noConflict(); //将变量$的控制权转移给其他库
$('p').style.display = 'none'; //prototype.js
jQuery(function(){ //方式一：直接用jQuery()函数
jQuery('p').click(function(){
alert("jQuery");
})
});
var $j = jQuery.noConflict(); //方式二：自定义jquery快捷方式
$j(function(){
//代码块
})};
(function($){ //方式三：定义匿名函数 $为形参-即传入的参数为jQuery
$(function(){ //自动执行这里面的方法
//代码块
})
})(jQuery);
</script>二、jquery选择器
Jquery选择器包括：基本选择器、层次选择器、过滤选择器、表单选择器
1、基本选择器
| 基本选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| #id | 获取指定id元素 | 单个元素 | $("test")id为test元素 |
| .class | 获取指定类名匹配元素 | 集合元素 | $(".test") |
| element | 获取指定元素名元素 | 集合元素 | $("p") |
| * | 匹配所有元素 | 集合元素 | $("*") |
| selector1,selector2... | 将匹配的元素合并后返回 | 集合元素 | $("#test,div,span") |
2、层次选择器
| 层次选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 获取ancestor 元素里所有的后代元素 | 集合元素 | $("div span")div里所有的span元素 |
| $("parent>child") | 获取子代元素 | 集合元素 | $("div>span") div元素下的span元素 |
| $("prev+next") | 获取相邻元素 | 集合元素 | $(".one+div")选class为one的下一个div元素/等价于$(".one").next(" div") |
| $("prev~siblings") | 匹配pre元素之后的所有的siblings（兄弟代） | 集合元素 | $("#two~div")id为two的元素后面所有的div兄弟元素/等价于$(".one").nextAll(" div") |
3、过滤选择器
| 基本过滤选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $("div：first")div里所的第一个div元素 |
| :last | 选取最后一个元素 | 集合元素 | $("div:last") div里的最后一个div元素 |
| :not(selector) | 去除给定的元素 | 集合元素 | $("input:not(.myClass)")选class不是myClass的input元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 | $("input:event")索引是偶数的input元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $("input:odd")索引是奇数的input元素 |
| :eq(index) | 选取索引等于index的元素，索引从0开始 | 单个元素 | $("input:eq(1)")索引等于1的input元素 |
| :gt(index) | 选取索引大于index的元素，索引从0开始 | 集合元素 | $("input:gt(1)")大于1的input元素 |
| :lt(index) | 选取索引小于index的元素，索引从0开始 | 集合元素 | $("input:lt(1)")小于1的input元素 |
| :header | 选取所有的标题元素 | 集合元素 | $("：header")选取所有的标题元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div：animated")选取正在执行动画的div元素 |
| 内容过滤选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 获取含有文本内容为text的元素 | 集合元素 | $("div:contains(‘我’）")含我的所有的div元素 |
| :empty | 获取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty") 不包含子元素和文本的div |
| :has(selector) | 获取含有选择器所匹配的元素 | 集合元素 | $("div:has(p)")含有p的div元素 |
| :parent | 获取含有子元素的文本的元素 | 集合元素 | $("div:parent")有子元素或文本的div元素 |
| :hidden | 获取所有的不可见的元素 | 集合元素 | $(":hidden")包括input的隐藏元素、设置了不可见的元素display/ visiblity |
| :visible | 获取所有的可见的元素 | 集合元素 | $("div:visible")所有可见的div |
| 属性过滤选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 获取拥有此属性的元素 | 集合元素 | $("div[id]")拥有属性id的div元素 |
| [attribute=value] | 获取属性值为value的元素 （!=不等于） | 集合元素 | $("div[title=i]")选取属性title为i的元素 |
| [attribute^=value] | 获取属性值value开头的元素 | 集合元素 | $("div[title^=i]")属性title为i开头的元素 |
| [attribute$=value] | 获取属性值为value结尾的元素 | 集合元素 | $("div[title^=i]")属性title为i结尾的元素 |
| [attribute*=value] | 获取属性值包含value的元素 | 集合元素 | $("div[title^=i]")属性title为包含i的元素 |
| [selector1][selector2] | 获取多个条件综合，即满足多个条件的 | 集合元素 | $("div[id][title=i]")有属性id并且title为i的元素 |
| 子元素过滤选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| nth-child(index/event/odd) | 获取父元素下的index元素/奇偶元素 | 集合元素 | $("：nth-child(index)") index从1开始 |
| :first-child | 获取每个父元素的第一个子元素 | 集合元素 | $("ul li:first-child")取每个ul下的第一个li |
| :last-child | 获取每个父元素的最后一个子元素 | 集合元素 | $("ul li:last-child")每个ul下的最后一个li |
| :only-child | 如果某个元素时父元素中唯一的子元素则匹配 | 集合元素 | $("ul li:only-child")取ul中唯一一个子元素li |
| 表单对象属性过滤选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 获取所有可用元素 | 集合元素 | $("#form1:enabled") Id为form1中所有可用 |
| :disabled | 获取所有不可用元素 | 集合元素 | $("#form1:disabled") |
| :checked | 获取所有被选中元素 | 集合元素 | $("input：checked") |
| :selected | 获取所有被选中的选项元素 | 集合元素 | $("select:selected")取所有被选中的选项元素 |
4、表单选择器
| 表单选择器 | |||
| 选择器 | 描述 | 返回 | 示例 |
| :input | 获取所有的表单输入元素：<input><textarea> <select><button> | 集合元素 | $(":input")：包括 <input> <textarea> <select><button>元素 |
| :text | 获取所有单行文本框 | 集合元素 | $(":text") |
| :password | 获取所有密码框 | 集合元素 | $(":password") |
| :radio | 获取所有单选框 | 集合元素 | $(":radio") |
| :checkbox | 获取所有的多选框 | 集合元素 | $(":checkbox") |
| :submit | 获取所有的提交按钮 | 集合元素 | $(":submit") |
| :image | 获取所有的图像按钮 | 集合元素 | $(":image") |
| :reset | 获取所有的重置按钮 | 集合元素 | $(":reset") |
| :button | 获取所有的按钮 | 集合元素 | $(":button") |
| :file | 获取所有的上传域 | 集合元素 | $(":file") |
| :hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
三、DOM操作
DOM就是一个对象化的数据接口，一个与语言无关、与平台无关的标准接口规范。DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。
1、DOM操作分类
<1>DOM Core
标准的DOM方法和属性，用来操作任何一种使用标记语言编写的文档，xml、html...核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。
常见的DOM Core:Document、Element、Node、Event
<2>XML DOM
用于XML文档的标准模型，对XML元素进行操作。与核心的区别是专为操作具体XML文档所提供的高级接口。
XML DOM：XMLHttpRequest、XMLSerializer等
<3>HTML DOM
HTML特有的DOM方法和属性。用来操作html元素，当然html与xml很相似。DOM Core可以操作html,而HTML DOM它只能操作web文档,但HTML DOM操作html比DOM Core更精简。
HTML DOM：Form对象、form属性、forms集合、Button等
<4>CSS DOM
在jS中主要是获取和设置style对象的各种属性。
2、jquery-核心
<1>jQuery()方法
jQuery() 函数有三种语法：(注[参数可选])
语法一：jQuery(selector, [context]);
接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
等价于：$([context]).find(selector)
<script>
$(function(){
console.log($("input","#a2").get(0)); //object HTMLInputElement
console.log($("#a2").find("input").get(0)); //object HTMLInputElement
})
</script>
<body>
<div id="a2">
<div id="a4"></div>
<input value="呵呵哒" />
</div>
</body>
//----$(function(){// 文档就绪});语法二：jQuery(html,[ownerDocument]);
使用原始 HTML 的字符串来创建 DOM 元素
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
语法三：jQuery( callback );
绑定一个在 DOM 文档载入完成后执行的函数
$(function(){// 文档就绪});
注：jquery中将$定义为jQuery的快捷方式，即$--jQuery
<2>noConflict() 方法
让渡变量 $ 的 jQuery 控制权，亦可重新定义jQuery的快捷方式
扩展：juqery调用实现原理：
var $ = jQuery = function(){
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init : function(){
this.length = 0;
this.test = function(){
return this.length;
}
return this;
},
jquery: "1.3.2",
length: 1,
size: function(){
return this.length;
}
}-----方式一：
console.log($().length) //0
console.log($().test()) //0
console.log($().jquery); //undefined
console.log($().size()); //undefined is not a function
解释：$()返回的是this,在js中this均会指向当前（类/函数）的对象，而在这$()调用，返回的new jQuery.fn.init(); 所以这里的this,所指就是init这个对象了。init是jQuery.fn原型上的方法，他的length属性为0，test方法也是返回0，而我们调用jquery属性和size()方法的时候，因为他是jQuery.fn上面的属性和方法，自然取不到了。Jquery想了一个办法解决。
-----方式二：
jQuery.fn.init.prototype = jQuery.fn; //实现跨域访问
console.log($().length) //0
console.log($().test()) //0
console.log($().jquery); //1.3.2 //访问到了jQuery.fn上的属性
console.log($().size()); //0
解释：jQuery()构造，通过改变初始化构造器的原型指向jQuery.fn.init.prototype = jQuery.fn;，实现了跨域访问。虽然$()返回的this是init对象，但是改变的他的原型指向，为此他的原型不在是init的默认原型了，而是jQuery的原型了，所以他访问到jQuery原型中的方法和属性.
四、jQuery操作DOM
[具体的结合api更详细]
1、元素属性操作-attr
attr(Object,[Object],[Object])-后面的可选
<1>获取元素属性：oJquery.attr("属性名");
<2>设置元素的属性：oJquery.attr("name","value");
同时设置多个：oJquery.attr({"name1":"value1","name2":"value2"});
<3>绑定一个函数：oJquery.attr("name1",function(){return 1});
<4>删除元素属性：oJquery.removeAttr("name");
2、元素内容操作--html、text
<1>获取元素的HTML内容：oJquery.html();
<2>设置元素的HTML内容：oJquery.html(String）;
<3>获取元素的文本内容：oJquery.text();
<4>设置元素的文本内容：oJquery.text(String);
3、元素值操作--val
<1>获取元素的值：oJquery.val();
<2>设置元素的值：oJquery.val(String);
注：这个只能操作含有value属性的元素
4、元素样式操作--css
<1>直接设置元素样式：oJquery.css("color","red");
设置多个：oJquery.css({"color":"red","fontSize":"20px"});
<2>增加CSS类别：oJquery.addClass(class);
例如：在style属性中有.div的样式：oJquery.addClass("div");
<3>类别样式切换：oJquery.toggleClass(class);
<4>删除类别样式:oJquery.removeClass(class);
<5>判断是否有某个class：oJquery.hasClass(class);
5、插入节点
<1>oJquery.append(content):向每个匹配的元素内部内容后面追加
<2>appendTo(element):将什么添加到指定的元素内部内容后面
<3>prepend(content):向每个匹配的元素内部内容前面追加
<4>prependTo(element):将什么添加到指定的元素内部内容前面
<5>after(content):向每个匹配元素之后外部插入内容
<6>insertAfter(element):将什么添加到指定的元素外部后面
<7>before(content):向每个匹配元素外部前面插入内容
<8>insertBefore(element)：将什么添加到指定的元素外部前面
6、删除节点
<1>oJquery.remove()
注：移除被选元素，但是不会把它从jquery对象中删除，将来还可以使用，返回被移除的元素。
<script>
$(function(){
var remDiv = $("#a4").remove(); //被移除
remDiv.prependTo("#a2"); //可以再次添加
})
</script><2>empty()
从被选元素中移除所有内容，包括文本节点和子节点。返回boolean值
7、复制节点
<1>oJquery.clone():克隆，生成被选元素的副本
<2>clone(true):克隆，包括其事件处理器
8、替换节点
<1>replaceWith(String)：将匹配的元素替换成String
<2>replaceAll(element)：指定的这个元素被什么替换
9、包裹节点
<1>wrap(html/element)：包裹所选元素(外部)
例如：$("strong").warp("<b></b>") //<b><strong></strong></b>
<2>unwrap():不包裹所选元素
<3>wrapInner(html):包裹所选元素(内部)
10、遍历节点
<1>children() 取得匹配元素的子元素集合
<2>next() 取得匹配元素后面紧邻的同辈元素
<3>prev() 取得匹配元素前面紧邻的同辈元素
<4>siblings() 取得匹配元素的所有同辈的元素
<5>each(function) 为每个匹配的元素运行指定的函数
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
注：返回false可以提前结束循环
五、jquery中的事件
1、事件绑定bind
bind(type,[data],function(eventObject))
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
注：后多用on
2、合成事件
<1>hover([over,]out)
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
<2>toggle([speed],[easing],[fn])
speed: 隐藏/显示效果的速度。默认是 "0"毫秒。slow，normal，fast。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
3、Event事件对象
<1>属性
① event.data 函数参数
② event.type 事件的类型
③ event.currentTarget 事件冒泡中当前DOM元素
④ event.pageX/event.pageY 鼠标相对于文档左边缘的位置
⑤ event.namespace 事件命名空间
⑥ event.target 注册事件时的对象或者他的子元素
<2>方法
① event.preventDefault(); 取消默认行为
② event.isDefaultPrevented(); 判断是否调用过preventDefault()方法
③ event.stopPropagation(); 阻止冒泡行为
4、模拟操作
<1>trigger(type,[data])
例如：模拟点击
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2); //Hello World!
});
$("p").trigger("myEvent", ["Hello","World!"]);
//或者可以写成,也可以被调用：$("p").click();<2>triggerHandler(type, [data])
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的
jQuery对象。如果最开始的jQuery对象集合为空，则这个方法返回 undefined
六、jquery中的动画效果
1、显示与隐藏
<1>show([speed],[easing],[fn])
<2>hide([speed],[easing],[fn])
//等价于oJquery.css("display",”none”);但是调用hide时会记住之前的display是block/inline/..,调用show时会还原其原来的属性值。
//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)[slow-600,fast-200]
<3>toggle([speed],[easing],[fn])也可以实现显示隐藏，它综合了这两个方法,不必判断显示隐藏状态，自动切换。
2、滑动
<1>slideDown([speed],[easing],[fn])
当元素隐藏时，调用该方法，才会慢慢下滑显示出来，相当于把show()的动作以下滑方式放慢显示出来。
<2>slideUp([speed],[easing],[fn])
当元素显示时，调用该方法，会慢慢上滑隐藏起来，相当于把hide()的动作以上滑方式放慢隐藏起来。
<3>slideToggle([speed],[easing],[fn]) 该方法综合了上面两个方法。不必判断显示隐藏状态，自动切换。
3、淡入淡出
<1>fadeIn([speed],[easing],[fn])
通过不透明度的变化实现元素的淡入效果。
<2>fadeOut([speed],[easing],[fn])
通过不透明度的变化实现元素的淡出效果。
<3>fadeTo([[speed],opacity,[easing],[fn]])
以渐进的方式将不透明度调整到指定的不透明度。
<4>fadeToggle([speed],[easing],[fn])
如果元素最开始是隐藏的，则淡入显示。如果是显示的则淡入隐藏。但是不会自动切换。
4、自定义动画
<1>animate(params,[speed],[easing],[fn])
*params:一组包含作为动画属性和终值的样式属性和及其值的集合{属性：值}
*speed:三种预定速度("slow","normal", or "fast")或时长的毫秒数值(如：1000)
*easing:要使用的擦除效果的名称,默认jQuery提供"linear" 和 "swing".
*fn:在动画完成时执行的函数，每个元素执行一次。
<2>stop([clearQueue],[jumpToEnd]) --停止元素的动画
*clearQueue:如果设置成true，则清空队列。可以立即结束动画。
*gotoEnd:设置为true让当前正在执行的动画立即完成（到末状态）。
注：例如当鼠标移出时，mouseover事件还在执行中，而mouseout事件就会被放进队列中等待mouseover执行完成在执行mouseout事件
<3>oJquery.is(“:animated”) //判断元素支付正处于动画状态
第二章 jquery 中extend 解析（前面已经发布过）
第三章 插件开发
一、jQuery命名空间
1、事件命名空间
jQuery支持事件命名空间，以方便事件管理。之前很多使用的都是bind绑定和unbind解绑。但是之后都统一使用on 和 off [bind -- on][unbind -- off]。
例如：
$(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>")
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>")
});
$("button").click(function(){
$("div").trigger("click") //1-- click事件、click.plugin事件
$("div").trigger("click.plugin")//2-- click.plugin事件
//$("div").trigger("click!");
//触发不含命名空间的click事件，但是在1.72-1.83中支持，在1.9中把该属性去除了
});
$("div").unbind("click.plugin",function(){
//解绑
});
/*注1.72源码中有这么一段，但是在1.9中没有了:
trigger:function(event,data,elem,onlyHandlers){
if(type.indexOf("!")>=0){
// Exclusive events trigger only for the exact event (no namespaces)
type=type.slice(0,-1);
exclusive=true;
}
}*/
});2、jQuery命名空间
命名空间是为了防止全局命名空间污染而将函数和属性作为命名变量的属性来定义。因此我们习惯将一些方法封装到一个自定义的命名空间里。另外也方便管理。
//--例如：函数级别（类）
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
//采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
//--对象级别:
//--形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
//--形式2：
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery); 二、jquery插件
1、插件种类
<1>封装全局函数的插件
例如：noConflict()、each()、ajax()、trim()...这些方法都是jQuery内部作为全局函数附加上去的。jQuery他本身就是一个变量对象，这个变量对象被赋值为一个函数对象。然后为其添加很多内置方法或属性，是可以直接通过函数名去调用的。
<2>封装对象方法的插件(jQuery对象的方法)
例如：addClass()、val()、trigger()...只能通过jQuery对象去引用
因为这些方法并不是直接添加在jQuery上的，而是在其原型上的。直接用jQuery.val()是会报错的，undefined is not a function。在jquery源码中都是附加到了这个对象上的：jQuery.fn。而jQuery.fn = jQuery.property 即在jQuery的原型上添加方法，其后代只有通过new 构造后的对象可以取到。
<3>封装选择器插件
个性开发，自定义选择器插件。
2、模拟插件
;(function($){ //注：匿名函数前面最好加上个;如果他前面的没加分号会出问题的
$.fn.extend({
"focusColor":function(li_col){
var def_col = "#ccc";
var lst_col = "#fff";
li_col = (li_col == undefined)? def_col:li_col;
$(this).find("li").each(function(){
$(this).mouseover(function(){
$(this).css("background-color",li_col).mouseout(function(){
$(this).css("background-color",lst_col);
});
});
});
return $(this);
}});
})(jQuery);
//---调用
$(function(){
$("#ul").focusColor("green");
})
//扩展一个处理li标签背景色的插件。传入颜色即可实现背景色切换。第四章 jquery工具方法
一、字符串处理
1、serializeArray()方法
此方法返回的是JSON对象而非JSON字符串。
$(function(){
var fields = $("select, :radio").serializeArray(); //这里不能直接是form
console.log(JSON.stringify(fields))
//[{"name":"single","value":"Single"},{"name":"radio","value":"radio1"}]
});
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>2、param()方法
能够将表单元素数组或者对象序列化，它是serialize()方法的基础。
var options = {
width:400,
height:300}
var str = jQuery.param(options);
console.log(str); //width=400&height=300二、数组处理
1、gerp() 过滤数组
$(function(){
var arr = [1,2,3,4,5,6,7,8,9];
arr = jQuery.grep(arr,function(value,index) {return value > 5};
console.log(arr) //6,7,8,9
});2、merge()合并数组
$(function(){
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = $.merge(arr1,arr2);
console.log(arr3); //1.2.3.4.5.6
});3、unique()删除数组中的重复项
$(function(){
var arr1 = [1,2,3,1,3,2,4,5,6];
var arr3 = $.unique(arr1);
console.log(arr3); //1,2,3,4,5,6
});三、数据队列
1、queue([name],callback)添加队列
*name不是队列的名称，可以省略，默认值为fx
*callback回调函数
$(function(){
$("input").click(function(){
$("div").slideDown("slow");
$("div").animate({left:'+=400'},2000);
$("div").queue(function(){$(this).addClass("bg");}); //执行到这背景变蓝
$("div").animate({left:'-=400'},2000); //队列回调函数执行完成后面的不会执行
$("div").queue(function(){$(this).removeClass("bg");})
$("div").slideUp("slow");
});
});2、queue(name)获取队列
*name 表示队列名称，返回的是一个函数数组。
$(function(){
$("input").click(function(){
$("div").slideDown("slow");
$("div").animate({left:'+=400'},2000);
var fx = $("div").queue();
console.log(fx.length) //2
});
});3、queue(name1,name2)替换队列
$("div").queue(f1,f2); //使用f2队列替换f1
$("div").queue("fx",[]); //fx默认动画，[]空数组替换，即清空动画4、dequeue()删除队列
$(function(){
$("input").click(function(){
$("div").slideDown("slow");
$("div").animate({left:'+=400'},2000);
var fx = $("div").dequeue(); //执行到此2000毫秒可能该动画队列还没执行完成就被移除了
$("div").animate({
left:'-=100'
},2000); //所以最后的位置相对最开始的位置靠左
});
});
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
