JQUERY

为什么学习jQuery

原生JavaScript写代码很不方便而且容易出错（一直感觉写getElementById非常地烦），再加上浏览器之间差异处理起来就更烦躁了，jQuery刚好能解决这些问题，而且：

轻量级
链式编程
隐式迭代
丰富的插件支持

那么，赶紧开始jQuery之旅！

元素选择及操作

用jQuery在选择元素时和用CSS选择非常像且代码量很少，因此上手很容易：

选择器	用法
基本选择器	$(‘div’)
层次选择器	$(‘.a > div’)
基本过滤选择器	$(‘div:first’)、$(‘input:even’)、$(‘header’)
内容过滤选择器	$(‘div:contains(di)’)
可见性过滤选择器	$(‘div:visible’)、$(‘div:hidden’)
属性过滤选择器	$(‘div[title]’)、$(‘div[id][title*=es]’)
子元素过滤选择器	$(‘div.one :nth-child(2)’)、$(‘div.one :first-child’)
表单对象属性过滤选择器	$(‘#form1 input:enable’)、$(‘input:checked’)
表单选择器	$(‘#form1 :input’)、$(‘#form1 :password’)

遇到特殊字符时需要转义，比如对<div id=”id#b”>bb</div>需要用$(‘#id\#b’)来选取，编写时尤其需要注意空格，挨着和不挨着的区别太大了：

$(‘.test :hidden’)
$(‘.test:hidden’)

除了可以使用jQuery，还有其他的方式支持CSS选择器，这里就省略了~ 用选择器拿到的是jQuery对象（对dom对象做了封装），可用$cr[0]拿到对应的dom对象~

另外jQuery对DOM操作的封装有：

操作	用法
创建	$(‘<li>abc</li>’)
插入	$(“p”).prepend($(‘<li>abc</li>’))
删除	remove
复制	$(this).clone(true)没有参数时复制生成的对象不具有任何行为
替换	$(“p”).replaceWith(“<strong>abc<strong>”)
包裹	$(“strong”).warp(“<b></b>”)
设置/获取属性	获取：$para.attr(“title”)，设置：$para.attr(“title”, “new title”)
样式	addClass、removeClass、toggleClass、hasClass、css
文本	获取：$para.html()，设置：$para.html(“<strong>abc<strong>”)，text()/val()
子元素	children
兄弟元素	next、pre、sibling

事件与动画

以前经常在代码中看到：

$(function(){
    // DOM就绪时执行的方法
});

作用像是绑定了对ready的响应，而对于普通的事件（鼠标点击等）可以用on来统一搞定：

on(events, [, selector] [, data], handler) on( eventsMap [, selector ] [, data ] )

参数的含义如下：

events：一个或多个用空格分隔的事件类型和可选的命名空间
eventsMap：属性对应事件类型和可选的命名空间，属性值对应绑定的事件处理函数
selector：指定哪些后代元素可以触发绑定的事件
data：触发事件时，需要通过event.data传递给事件处理函数的任意数据
handler：事件处理函数

注：在jQuery1.8之后bind、delegate、live都不建议使用，所以干脆就都用on好了！

另外并不是每个事件都只有一个处理函数，在jQuery中有两个合成事件：hover和toggle，其中hover的使用方法如下：

hover(enter, lever)

分别用两个函数来响应移入和移出，相比较toggle就更加暴力了：

toggle(f1, f2, …., fn)

在第一次点击时调用f1、第二次调用f2、依次类推，n个方法循环调用（没想到需要用到什么地方- -!），jQuery对事件对象进行了封装，提供如下方法：

方法	作用
type()	类型
stopPropagation()	停止事件冒泡
preventDefault()	阻止默认的行为，比如可以阻止点击<a>标签打开新页面的行为
target()	触发事件的元素
relatedTarget()	获取相关元素，在mouseover和mouseout的时候经常用到
which()	鼠标点击或者键盘点击事件中，获取具体的按键

既然能绑定就应该能解除：

jQueryObject.off( [ events [, selector ] [, handler ] ] ) jQueryObject.off( eventsMap [, selector ] )

注：可以用trigger来模拟事件，用来实现一些功能（比如快捷键）还是非常方便的！在jQuery中对DOM元素上的动画做了一些封装（不用再蛋疼地使用setTimeout）：

操作	效果
show/hide	显示、隐藏元素，可通过参数控制速度
fadeIn/fadeOut	改变元素不透明度
slideUp/slideDown	改变元素高度
animate	自定义动画，上面的功能用该方法都很容易搞定
toggle	两种状态切换，用在按钮的效果上面非常合适
slideToggle	通过高度变化来切换元素的可见性
fadeTo	以渐进的方式修改不透明度

其中animate的定义如下：

animate(params, speed, callback)

参数含义如下：

params：包含样式属性及值的映射，用来控制动画的行为
speed：速度
callback：结束时的回调函数

下面来看几个实际的例子感受下：

$(this).animate({left:"500px"}, 3000);// 使left从原来的值变为500
$(this).animate({left:"+=500px"}, 3000);// 使left从原来的值增加500
$(this).animate({left:"+=500px",height:"+=600px"}, 3000);// 多重动画
$(this).animate({left:"+=500px"}, 3000)
       .animate({height:"+=500px"}, 3000);// 两个动画效果链式写法

延迟总是会带来问题，比如为元素的移入、移出设计了动画，但是在鼠标快速移动的时候动画的效果可能就与实际鼠标的位置不一致了，这时候需要

stop([cleanQueue] [, gotoEnd])

其中：

cleanQueue：是否清空未执行完成的动画
gotoEnd：是否将正在执行的动画跳转到末状态

另外可以使用$(this).is(“:animated”)判断元素是否处于动画状态！

Ajax

全称为Asynchronous JavaScript and XML，并不是指一种单一的技术，而是有机地利用一系列交互式网页应用相关的技术所形成的结合体，优势：

不需要插件支持
优秀的用户体验
提高Web程序的性能
减轻服务器和带宽的负担

不足：

浏览器对XMLHttpRequest对象的支持度不足
破坏浏览器前进、后退按钮的正常功能
对搜索引擎的支持不足
开发和调试工具的缺乏

关于JavaScript原生的写法可以看这里，在jQuery中的封装如下：

方法	作用
load(url [,data] [, callback])	加载HTML文档并插入DOM中
get(url [,data] [, callback] [, type])	使用GET方式异步请求
post(url [,data] [, callback] [, type])	使用POST方式异步请求
getScript()	加载脚本文件
getJson()	加载JSON文件
ajax()	最底层的实现，是其他方法的基础

方法ajax()的参数如下：

url：发送请求的地址
type：请求方式（GET or POST）
timeout：请求超时时间（毫秒）
data：发送到服务端的数据
dataType：预期服务器返回的数据类型
beforeSend：发送请求前执行的函数
complete：请求完成后的回调函数
success：请求成功后的回调函数
error：请求失败时的回调函数
global：是否触发全局Ajax事件

对于巨大的表单在提交的时候获取参数是非常繁琐的，在jQuery做了简单的封装serialize()、serializeArray()、param()。在用上面的方法发送请求的过程中会触发事件：

ajaxStart
ajaxSend
ajaxSuccess
ajaxComplete
ajaxError
ajaxStop

利用这些事件我们可以很容易为请求的各个环节封装相同的响应！

插件

jQuery的插件非常多，再很多地方（比如这里）可以搜索，这里主要来看下自己如何造插件，涉及到的方法有：

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

该方法用来将一个或者多个对象的成员属性和方法复制到指定的对象上，参数的含义为：

deep：是否深度合并对象
target：目标对象，其他对象的成员属性将被复制到该对象上
object1：第一个被合并的对象
objectN：第N个被合并的对象

还有一个用来扩展jQuery对象方法：

jQuery.fn.extend( object )

现在可以编写插件了：

;(function($){
    // 封装jQuery对象方法
	$.fn.extend({
        "color" : function(value){/* 插件代码 */}
    })
    // 直接对jQuery对象进行扩展
    $.extend({
        ltrim : function(text) {
            return (text || "")
        }
    })
})(jQuery);

编写一些插件写法需要对jQuery本身的运行的机制由一定的了解~

总结

jQuery主要是用来简化开发，对JavaScript做了一些封装，不需要再考虑很多兼容性的东西，而且代码也更加简洁，列出一些参考资料：