转自：阮一峰 2011年7月26日

http://www.ruanyifeng.com/blo…

jQuery是现在运用最普遍的JavaScript函数库。

据统计，全球排名前100万的网站，有46%运用jQuery，远远凌驾其他库。微软公司以至把jQuery作为他们的官方库。

关于网页开辟者来讲，学会jQuery是必要的。由于它让你相识业界最通用的手艺，为未来进修更高等的库打下基础，而且确切能够很轻松地做出很多庞杂的效果。

虽然jQuery上手简朴，比其他库容易学会，然则要周全掌握，却不轻松。由于它涉及到网页开辟的各个方面，供应的种种要领和内部变化有上千种之多。初学者经常觉得，入门很轻易，进步很难题。

现在，互联网上最好的jQuery入门课本，是Rebecca Murphey写的《jQuery基础》（jQuery Fundamentals）。在Google里搜刮”jQuery 培训”，此书排在第一位。jQuery官方团队已赞同，把此书作为官方教程的基础。

这本书虽然是入门课本，但也足足有100多页。我对它做了一个细致的笔记，试图理清jQuery的设想头脑，找出进修的头绪。我的目的是周全掌握jQuery，遇到题目的时刻，心里有底，基础晓得运用它的哪个功用，然后能够敏捷从API手册中找到详细的写法。

下面就是我的笔记，它应该是现在网上不多的jQuery中文教程之一。你只须要一点javascript言语的基础知识，就可以看懂它，在最短的时间里，掌握jQuery的一切主要方面（除了ajax和插件开辟）。

===================================================================================

jQuery设想头脑

原文网址：http://jqfundamentals.com/book/

阮一峰 翻译整顿

【目次】

 一、挑选网页元素

 二、转变效果集

 三、链式操纵

 四、元素的操纵：取值和赋值
 
 五、元素的操纵：挪动
 
 六、元素的操纵：复制、删除和竖立
 
 七、东西要领
 
 八、事宜操纵
 
 九、特殊效果
 

【正文】

一、挑选网页元素

jQuery的基础设想头脑和主要用法，就是”挑选某个网页元素，然后对其举行某种操纵“。这是它区分于其他Javascript库的基础特征。

运用jQuery的第一步，每每就是将一个挑选表达式，放进组织函数jQuery()（简写为$()），然后取得被选中的元素。

挑选表达式能够是CSS挑选器：

    $(document) //挑选全部文档对象

　　$('#myId') //挑选ID为myId的网页元素

　　$('div.myClass') // 挑选class为myClass的div元素

　　$('input[name=first]') // 挑选name属性即是first的input元素

也能够是jQuery特有的表达式：
　　

    $('a:first') //挑选网页中第一个a元素

　　$('tr:odd') //挑选表格的奇数行

　　$('#myForm :input') // 挑选表单中的input元素

　　$('div:visible') //挑选可见的div元素

　　$('div:gt(2)') // 挑选一切的div元素，除了前三个

　　$('div:animated') // 挑选当前处于动画状况的div元素

二、转变效果集

jQuery设想头脑之二，就是供应种种壮大的过滤器，对效果集举行挑选，减少挑选效果。

    $('div').has('p'); // 挑选包括p元素的div元素
    
　　$('div').not('.myClass'); //挑选class不即是myClass的div元素
　　
　　$('div').filter('.myClass'); //挑选class即是myClass的div元素
　　
　　$('div').first(); //挑选第1个div元素
　　
　　$('div').eq(5); //挑选第6个div元素

偶然刻，我们须要从效果集动身，挪动到四周的相干元素，jQuery也供应了在DOM树上的挪动要领：

    $('div').next('p'); //挑选div元素背面的第一个p元素
    
　　$('div').parent(); //挑选div元素的父元素
　　
　　$('div').closest('form'); //挑选离div近来的谁人form父元素
　　
　　$('div').children(); //挑选div的一切子元素
　　
　　$('div').siblings(); //挑选div的同级元素

三、链式操纵

jQuery设想头脑之三，就是终究选中网页元素今后，能够对它举行一系列操纵，而且一切操纵能够衔接在一起，以链条的情势写出来，比方：

$('div').find('h3').eq(2).html('Hello');

<div>
    <h3></h3>
    <h3></h3>
    <span></span>
    <h3></h3>
    <span></span>
    <h3></h3>
    <h3></h3>
    <span></span>
</div>

剖析开来，就是下面如许：

$('div')    //找到div元素
    .find('h3')    //挑选个中的h3元素
    .eq(2)    //挑选第3个h3元素
    .html('Hello')    //将它的内容改成Hello  

这是jQuery最令人称道、最轻易的特征。它的道理在于每一步的jQuery操纵，返回的都是一个jQuery对象，所以差异操纵能够连在一起。

jQuery还供应了.end()要领，使得效果集能够退却一步：

$('div')
    .find('h3')
    .eq(2)
    .html('Hello')
    .end()    //退回到选中一切的h3元素的那一步（即$('div').find('h3')）
    .eq(0)    //选中第一个h3元素
    .html('world');    //将它的内容改成World

四、元素的操纵：取值和赋值

操纵网页元素，最罕见的需求是取得它们的值，或许对它们举行赋值。

jQuery设想头脑之四，就是运用同一个函数，来完成取值（getter）和赋值（setter），即”取值器”与”赋值器”合一。究竟是取值照样赋值，由函数的参数决议。

$('h1').html();    //html()没有参数时，示意掏出h1的值
$('h1').html('Hello');    //html()有参数时，示意对h1举行赋值

罕见的取值和赋值函数以下：

.html()    //掏出或设置html的内容
.text()    //掏出或设置text的内容
.val()    //掏出或设置某个表单元素的值
.attr()    //掏出或设置某个属性的值
.width()    //掏出或设置某个元素的宽度
.height()    //掏出或设置某个元素的高度

须要注重的是，假如效果集包括多个元素，那末赋值的时刻，将对个中一切的元素赋值；取值的时刻，则是只掏出第一个元素的值（.text()破例，它掏出一切元素的text内容）。
【注】.html()、.text()以及.val()的区分https://segmentfault.com/n/13…

五、元素的操纵：挪动

jQuery设想头脑之五，就是供应两组要领，来操纵元素在网页中的位置挪动。一组要领是直接挪动该元素，另一组要领是挪动其他元素，使得目的元素到达我们想要的位置。

假定我们选中了一个div元素，须要把它挪动到p元素背面。

第一种要领是运用.insertAfter()，把div元素挪动p元素背面：

$('div').insertAfter($('p'));

第二种要领是运用.after()，把p元素加到div元素前面：

$('p').after($('div'));

表面上看，这两种要领的效果是一样的，唯一的差异好像只是操纵视角的差异。然则实际上，它们有一个严重差异，那就是返回的元素不一样。第一种要领返回div元素，第二种要领返回p元素。你能够依据须要，挑选究竟运用哪一种要领。

运用这类形式的操纵要领，一共有四对：

    .insertAfter()和.after()：在现存元素的外部，从背面插进去元素
    
　　.insertBefore()和.before()：在现存元素的外部，从前面插进去元素
　　
　　.appendTo()和.append()：在现存元素的内部，从背面插进去元素
　　
　　.prependTo()和.prepend()：在现存元素的内部，从前面插进去元素

六、元素的操纵：复制、删除和竖立

除了元素的位置挪动之外，jQuery还供应其他几种操纵元素的主要要领。

复制元素运用.clone()。

删除元素运用.remove()和.detach()。
二者的区分在于，前者不保存被删除元素的事宜，后者保存，有利于从新插进去文档时运用。

清空元素内容（然则不删除该元素）运用.empty()。

竖立新元素的要领异常简朴，只要把新元素直接传入jQuery的组织函数就好了：

    $('<p>Hello</p>');
    
　　$('<li class="new">new list item</li>');
　　
　　$('ul').append('<li>list item</li>');
　　

七、东西要领

jQuery设想头脑之六：除了对选中的元素举行操纵之外，还供应一些与元素无关的东西要领（utility）。没必要选中元素，就可以够直接运用这些要领。

假如你晓得Javascript言语的继续道理，那末就可以明白东西要领的本质。它是定义在jQuery组织函数上的要领，即jQuery.method()，所以能够直接运用。而那些操纵元素的要领，是定义在组织函数的prototype对象上的要领，即jQuery.prototype.method()，所以必需天生实例（即选中元素）后运用。假如不明白这类区分，题目也不大，只要把东西要领明白成，是像javascript原生函数那样，能够直接运用的要领就好了。

经常使用的东西要领有以下几种：

    $.trim() 去除字符串双方的空格。
    
　　$.each() 遍历一个数组或对象。
　　
　　$.inArray() 返回一个值在数组中的索引位置。若不在数组中，则返回-1。
　　
　　$.grep() 返回数组中相符某种规范的元素。
　　
　　$.extend() 将多个对象合并到第一个对象中。
　　
　　$.makeArray() 将对象转化为数组。
　　
　　$.type() 推断对象的种别（函数、日期、数组、正则等），比js原生要领typeof鉴别的更详细。
　　
　　$.isArray() 推断某个参数是不是为数组。
　　
　　$.isEmptyObject() 推断某个对象是不是为空（不含有任何属性）。
　　
　　$.isFunction() 推断某个参数是不是为函数。
　　
　　$.isPlainObject() 推断某个参数是不是为用"{}"或"new Object"竖立的对象。
　　
　　$.support() 推断浏览器是不是支撑某个特征。

八、事宜操纵

jQuery设想头脑之七，就是把事宜直接绑定在网页元素之上。

    $('p').click(function(){
　　　　alert('Hello');
　　});

现在，jQuery主要支撑以下事宜：

　　.load() 元素加载终了
　　
　　.unload() 用户脱离页面
　　
　　.click() 鼠标单击
　　
　　.dbclick() 鼠标双击
　　
　　.focus() 表单元素取得核心
　　
    .blur() 表单元素落空核心
　　
　　.focusin() 子元素取得核心
　　
　　.focusout() 子元素落空核心
　　
　　.change() 表单元素的值发作变化
　　
　　.keydown() 按下键盘（长时间按键，只返回一个事宜）
　　
　　.keypress() 按下键盘（长时间按键，将返回多个事宜）
　　
　　.keyup() 松开键盘
　　
　　.mousedown() 按下鼠标
　　
　　.mouseup() 松开鼠标
　　
　　.mouseenter() 鼠标进入（进入子元素不触发）
　　
　　.mouseleave() 鼠标脱离（脱离子元素不触发）
　　
　　.hover() 同时为.mouseenter()和.mouseleave()事宜指定处置惩罚函数
　　
　　.mousemove() 鼠标在元素内部挪动
　　
　  .mouseover() 鼠标进入（进入子元素也触发）
　　
　　.mouseout() 鼠标脱离（脱离子元素也触发）
　　
　　.ready() DOM加载完成
　　
　　.resize() 浏览器窗口的大小发作转变
　　
　　.scroll() 滚动条的位置发作变化
　　
　　.select() 用户选中文本框中的内容
　　
　　.submit() 用户递交表单
　　
　　.toggle() 依据鼠标点击的次数，顺次运转多个函数

以上这些事宜在jQuery内部，都是.bind()的便利体式格局。运用.bind()能够更天真地掌握事宜，比方为多个事宜绑定同一个函数：

    $('input').bind(
　　　　'click change', //同时绑定click和change事宜
　　　　function() {
　　　　　　alert('Hello');
　　　　}
　　);

偶然，你只想让事宜运转一次，这时候能够运用.one()要领。

    $("p").one("click", function() {
　　　　alert("Hello"); //只运转一次，今后的点击不会运转
　　});

.unbind()用来消除事宜绑定。

    $('p').unbind('click');

一切的事宜处置惩罚函数，都能够接收一个事宜对象（event object）作为参数，比方下面例子中的e：

    $("p").click(function(e) {
　　　　alert(e.type); // "click"
　　});

这个事宜对象有一些很有效的属性和要领：

    event.pageX 事宜发作时，鼠标间隔网页左上角的程度间隔
　　
　　event.pageY 事宜发作时，鼠标间隔网页左上角的垂直间隔
　　
　　event.type 事宜的范例（比方click）
　　
　　event.which 按下了哪个键
　　
　　event.data 在事宜对象上绑定数据，然后传入事宜处置惩罚函数
　　
　　event.target 事宜针对的网页元素
　　
　　event.preventDefault() 阻挠事宜的默许行动（比方点击链接，会自动翻开新页面）
　　
　　event.stopPropagation() 住手事宜向上层元素冒泡

在事宜处置惩罚函数中，能够用this关键字，返回事宜针对的DOM元素：

$('a').click(function(e) {
    if($(this).attr('href').match('evil')) {  //假如确认为有害链接
        e.preventDefault();  //阻挠翻开
        $(this).addClass('evil');  //加上示意有害的class
    }
});

有两种要领，能够自动触发一个事宜。一种是直接运用事宜函数，另一种是运用.trigger()或.triggerHandler()。

  $('a').click();
  $('a').trigger('click');

九、特殊效果

末了，jQuery许可对象显现某些特殊效果。

$('h1').show(); //展现一个h1题目

经常使用的特殊效果以下：

    .fadeIn() 淡入
　　
　　.fadeOut() 淡出
　　
　　.fadeTo() 调解透明度
　　
　　.hide() 隐蔽元素
　　
　　.show() 显现元素
　　
　　.slideDown() 向下睁开
　　
　　.sildeUp() 向上卷起
　　
　　.slideToggle() 顺次睁开或卷起某个元素
　　
　　.toggle() 顺次展现或隐蔽某个元素

除了.show()和.hide()，一切其他殊效的默许实行时间都是400ms（毫秒），然则你能够转变这个设置。

    $('h1').fadeIn(300); // 300毫秒内淡入
　　$('h1').fadeOut('slow'); // 缓慢地淡出

在殊效完毕后，能够指定实行某个函数。

$('p').fadeOut(300, function() { $(this).remove(); });

更庞杂的殊效，能够用.animate()自定义。

$('div').animate(
    {
        left: "+=50",  //不停右移
        opacity: 0.25  //指定透明度
    },
    300,  //持续时间
    function() { alert('done!'); }  //回调函数
);

.stop()和.delay()用来住手或延缓殊效的实行。

$.fx.off假如设置为true，则封闭一切网页殊效。

（完）