jQuery的整体设计思路

JQuery是目前使用最广泛的javascript函数库。据统计，全球排名前100万的网站中，有46%使用jQuery，远超其他图书馆。微软甚至使用jQuery作为他们的官方库。

web开发人员有必要学习jQuery。因为它让你了解了行业中最常见的技术，为以后学习更高级的库打下了基础，真的可以轻松做出很多复杂的效果。jQuery虽然比其他库容易使用、容易学习，但是要全面掌握并不容易。因为它涉及到网页开发的各个方面，所以提供了成千上万的方法和内部变更。初学者往往觉得入门很方便，很难提高。目前网上最好的jQuery入门教材是Rebecca Murphey写的《jQuery基础》 (jQuery基本面)。在谷歌搜索jQuery培训’，这本书排名第一。官方jQuery团队已经同意将这本书作为官方教程的基础。

这本书虽然是入门教材，但有100多页。我在上面做了详细的笔记，试图理清jQuery的设计思路，找出学习的脉络。我的目标是全面掌握jQuery。遇到问题，心里有底，基本知道用哪个功能，然后就能从手册里快速找到具体的编写方法。以下是我的笔记，应该是目前网上为数不多的jQuery中文教程之一。只需要一点javascript语言的基础知识，就可以在最短的时间内理解并掌握jQuery的所有主要方面(ajax和插件开发除外)。=================================jQuery设计思路原创网站：http://jqfundamentals.com/book/阮一峰翻译整理【目录】一、选择网页元素二。变更结果集三。元素操作：复制、删除和创建。7.工具和方法。8.事件操作。9.特效[文字]。1.选择网页元素。jQuery的基本设计和主要用途是‘选择一个网页元素，然后对其执行一些操作’。这是它区别于其他函数库的基本特征。使用jQuery的第一步是将一个选择表达式放入构造函数jQuery()(缩写为$)，然后获取所选元素。选择表达式可以是CSS选择器：$(document) //选择整个文档对象$('#myId') //选择Id为myId $('div.myClass') //选择Class为myClass $('input[name=first]')的div元素//选择name属性等于first的输入元素也可以是jQuery独有的表达式：$('a:first') //选择网页中的第一个a元素$(' tr 3360 odd ')//选择表$(')的奇数行选择可见的div元素$ ('div 3360 gt(2)')//选择除前三个$(' div 3360动画')之外的所有div元素//选择当前处于动画状态的div元素。 2.更改结果集。如果选择了多个元素，jQuery。//选择div元素$('div ')。不是('。myClass ')包含p元素；//选择div元素$ ('div ')。筛选器('。my CLaSS’)的类不等于my CLaSS；//选择div元素$('div ')。第一个()的类等于myClass//选择第一个div元素$('div ')。等式(5)；//选择第六个div元素。有时，我们需要从结果集开始，移动到附近的相关元素。jQuery还在DOM树上提供了一个移动方法：$('div ')。下一个(' p ')；//选择第一个p元素$('div ')。div元素后的parent()；//选择div元素$('div ')的父元素。最接近(' form ')；//选择表单父元素$('div ')。最接近div的children()；//选择div $('div ')的所有子元素。兄弟姐妹()；//选择div的同级元素。3.链式操作选择网页元素后，可以对其进行一些操作。JQuery允许所有操作链接在一起，并以链式形式编写，例如：$ ('div ')。查找(' H3 ')。等式(2)。html(' hello ')；分解后如下：$('div') //查找div元素。find('h3') //选择h3元素。等式(2) //选择第三个h3元素。html(‘Hello’)；//将其内容改为Hello，这是jQuery最令人钦佩和方便的特性。它的原理是jQuery操作的每一步都返回一个jQuery对象，所以不同的操作可以链接在一起。JQuery还提供了一个。end()方法，以便结果集可以后退一步：$ ('div ')。查找(' h3 ')。等式(2)。html ('hello ')。end()//返回到选择所有h3元素的步骤。等式(0) //选择第一个H3元素。html。//将内容改为世界四。元素操作：取值赋值操作网页元素。最常见的要求是获取它们的值或为它们赋值。JQuery使用相同的函数来完成getter和setter。是取值还是赋值取决于函数的参数。

$('h1 ')。html()；//html()没有参数，这意味着要取出h1 $('h1 ')的值。html(‘Hello’)；//html()有一个参数Hello，表示赋值h1的常用值和赋值函数如下：html()获取或设置html内容。text()获取或设置文本内容。attr()获取或设置属性值。width()获取或设置元素的宽度。height()获取或设置元素的高度。val()获取表单元素的值。取值时，只取出第一个元素的值(除。text()，它取出所有元素的文本内容)。5.元素操作：移动如果要移动选中的元素，有两种方法：一种是直接移动元素，另一种是移动其他元素，让目标元素到达想要的位置。假设我们选择一个div元素，并需要将它移到p元素的后面。第一种方法是使用。insertAfter()将div元素移到p元素后面：$(“div”)。insert after(' p ')；第二种方法是使用。在()之后，在div元素之前添加p元素：$('p ')。在(' div ')之后；表面上看，这两种方法的效果是一样的，唯一的区别似乎就是操作视角的不同。然而，事实上，它们之间有一个主要的区别，那就是返回的元素不同。第一个方法返回div元素，第二个方法返回p元素。你可以根据自己的需要选择使用哪种方法。使用此模式的操作方法有四对：insertAfter()和。在():插入元素后。insertBefore()和。从现有元素之外的后面在()之前；插入元素。appendTo()和。从现有元素的前面追加()；在现有元素中，插入元素。前置到()和。从后面前置():在现有元素中从前面插入元素。不及物动词元素操作：使用复制、删除和创建复制的元素。克隆()。使用。移除()和。分离()以删除元素。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档。清空元素内容(但不要删除元素)并使用。空()。创建新元素的方法很简单，只需将新元素直接传递给jQuery的构造函数：$(' pHello/p ')；$(' Li class=' new ' new list item/Li ')；$('ul ')。追加(' lilist item/Li ')；七.工具方法除了操作选中的元素之外，jQuery还提供了一些实用方法，可以直接使用，无需选择元素。了解了Javascript语言的继承原理，就能理解工具方法的本质。它是在jQuery构造函数上定义的方法，即jQuery.method()，所以可以直接使用。操作元素的方法是在构造函数的原型对象上定义的方法，即jQuery.prototype.method()，因此必须在生成实例(即选择元素)后使用。如果你不理解这种区别，就不会有问题。只要把工具方法理解为可以像javascript原生函数一样直接使用的方法就可以了。常用的工具和方法如下：$。trim()删除字符串两端的空格。$.每个()遍历一个数组或对象。$.inArray()返回数组中某个值的索引位置。如果该值不在数组中，则返回-1。$.grep()返回数组中符合特定标准的元素。$.extend()将多个对象合并到第一个对象中。$.makeArray()将对象转换为数组。$.type()决定了对象的类型(函数对象、日期对象、数组对象、正则对象等。).$.isArray()确定参数是否为数组。$.isEmptyObject()确定对象是否为空(没有任何属性)。$.isFunction()确定参数是否是函数。$.isPlainObject()确定参数是用“{ 0 }”还是“新对象”创建的对象。$.support()确定浏览器是否支持某个功能。八.事件操作jQuery可以将事件绑定到网页元素。根据不同的事件，运行相应的功能。$('p ')。点击(函数(){ alert(' Hello ')；});目前jQuery主要支持以下事件：blur()表单元素失去焦点。

的价值。change()表单元素更改。单击()鼠标单击。dblclick()鼠标双击。focus()表单元素获得焦点。focusin()子元素获得焦点。focusout()子元素失去焦点。悬停()。同时，指定mouseenter和mouseleave事件的处理程序。keydown()按下键盘(长时间按键，只会返回一个事件)。按键()按下键盘(长时间按键，将返回多个事件)。keyup()释放键盘。load()元素已加载。mousedown()按下鼠标。mouseenter()要输入的鼠标(输入子元素不会触发)。mouseleave()鼠标离开(离开子元素不触发)。mousemove()鼠标在元素内移动。mouseout()。鼠标离开(由离开子元素触发)。鼠标悬停()鼠标输入(通过输入子元素触发)。mouseup()鼠标释放。ready() DOM加载已完成。resize()浏览器窗口大小已更改。scroll()滚动条位置已更改。选择()用户选择文本框中的内容。提交()。用户提交表单。toggle()运行几个函数。根据鼠标点击次数依次卸载()。这些事件都是方便的方式。在jQuery内部绑定()。使用。bind()更灵活地控制事件，例如，为多个事件绑定同一个函数：$ ('input ')。绑定(' clickchange '，//同时绑定click和change事件函数(){ alert(' Hello ')；});有时，您只希望事件运行一次，因此可以使用。one()方法。$('p ')。一个(' click '，function(){ alert(' Hello ')；//只运行一次，以后点击不运行})；unbind()用于解除事件的绑定。$('p ')。解除绑定(“点击”)；的所有事件处理函数都可以接受事件对象作为参数，例如e: $ ('p ')。在以下示例中，单击(函数(e) {alert (e.type );//' click ' })；event对象有一些有用的属性和方法：event.pageX事件发生时鼠标与网页左上角的水平距离，event.pageY事件发生时鼠标与网页左上角的垂直距离。事件类型(如click)事件.按下哪个键事件. data来绑定事件对象上的数据，然后，事件处理程序事件所针对的网页元素event . preventdefault(). target阻止事件的默认行为(例如，单击链接将自动打开新页面)。event.stopPropagation()阻止事件冒泡到上层元素。在事件处理程序中，可以使用这个关键字。返回事件所针对的DOM元素：$ ('a ')。单击(function () {if ($ (this))。attr ('href ')。match('邪恶')){//如果确认为有害链接e . preventdefault()；//防止打开$(this)。addClass('邪恶')；//添加有害类} })；有两种方法可以自动触发事件。一是直接使用事件函数，二是使用。trigger()或。triggerHandler()。$('a ')。单击()；$('a ')。触发器(' click ')；九、特效jQuery允许对象呈现一些特效。$('h1 ')。show()；//显示h1标题中常用的特殊效果如下：fadeIn()淡入。fadeOut()淡出。fadeTo()调整透明度。hide()隐藏元素。show()显示元素。slideDown()向下扩展。向上滑动()向上滚动。slideToggle()。依次展开或卷起元素。switch()依次显示或隐藏元素。除了。show()和。hide()，所有其他特效的默认执行时间为400毫秒(毫秒)，但您可以更改此设置。$('h1 ')。法丁(300)；//淡入$('h1 ')。300毫秒内淡出(“慢”)；//慢慢淡出特效结束后，可以指定执行某个功能。$('p ')。fadeOut(300，function() { $(this))。移除()；});可以使用自定义更复杂的特效。制作动画()。$(“div”)。动画({left:'=50 '，//不断向右移动不透明度： 0.25 //指定透明度}，300，//duration function(){ alert(' done '！)。);}//回调函数)；停止()和。delay()用于停止或延迟特效的执行。$.fx.off如果设置为true，将关闭所有网页效果。(结束)