jQuery 基础+选择器教程 - 七月、前端攻城师王子墨

前端攻城师 http://julying.com 

jQuery 

基础+选择器教程 

王子墨 Julying.com


目录 

第一章 JQUERY 基础 ................................ 6 

1.0 介绍 .................................................................................................................................. 6 

1.1 在 HTML 页面中添加 JQUERY ........................................................................................... 6 

1.2 在页面 DOM 加载结束后、整个页面加载结束前执行 JQUERY/JAVASCRIPT 代码 ........... 7 

1.3 使用选择器及 JQUERY 函数选择 DOM 元素.................................................................... 9 

1.4 在特定的上下文中查找元素 ........................................................................................ 11 

1.5 过滤封装的 DOM 元素 .................................................................................................. 12 

1.6 在选择的集合中查找子代元素 .................................................................................... 13 

1.7 返回有损操作之前的原始对象 .................................................................................... 14 

1.8 同时使用原始对象和当前对象 .................................................................................... 15 

1.9 依据当前上下文遍历 DOM 树获取新的 DOM 元素集合............................................ 16 

1.10 创建并插入 DOM 元素 ............................................................................................. 17 

1.11 移除 DOM 元素 ......................................................................................................... 19 

1.12 替换 DOM 元素 ......................................................................................................... 20 

1.13 克隆 DOM 节点 ......................................................................................................... 21 

1.14 获取、设置、移除 DOM 元素属性 ......................................................................... 23 

1.15 获取、设置 HTML 内容 ............................................................................................ 24 

1.16 获取、设置文本内容................................................................................................ 25 

1.17 使用$别名避免全局冲突.......................................................................................... 25 

第二章使用 JQUERY 选择元素 ....................... 27 

2.0 介绍 ................................................................................................................................ 27 

2.1 仅选择子元素 ................................................................................................................ 27 

2.2 选择指定的兄弟节点 .................................................................................................... 29 

2.3 根据索引顺序选择元素 ................................................................................................ 30 

2.4 选择动画元素 ................................................................................................................ 33 

2.5 基于包含的内容选择元素 ............................................................................................ 33 

2.6 选择不匹配的元素 ........................................................................................................ 34


2.7 根据可见性选择元素 .................................................................................................... 35 

2.8 根据属性选择元素 ........................................................................................................ 35 

2.9 根据类型选择表单元素 ................................................................................................ 37 

2.10 选择特定元素 ........................................................................................................... 37 

2.11 使用上下文参数 ....................................................................................................... 39 

2.12 创建自定义过滤器 ................................................................................................... 40

1.0 介绍 

略, 你们懂得。 


第一章 jQuery 基础 

1.1 在 HTML 页面中添加 jQuery 

问题 

如何在 Web 页面中添加 JQuery 库支持 

解决方案 

目前有 2 种方法将 JQuery 库嵌入刡 Web 页面中: 

使用 Google 在线提供的特定版本的库文件。(Google-hosted content delivery network) 

从 JQuery.com 网站下载特定版本的 JQuery 并将其存放刡本地服务器上。 

讨论 

在页面中添加 JQuery 库不添加其他库刡页面没有任何区删。你叧需要使用元素并丏将 

Jquery 库文件位置添加刡 src 属性中。例如:下面的代码可以作为任何时候添加 Jquery 刡您 Web 页面的 

写法的模版: 

 

 

 

 

 

 

 

 

alert('jQuery ' + jQuery.fn.jquery); 

 

 

 

请注意,在公共访问的Web页面中推荐使用Google-hosted方式加载minifled版的JQuery。然而当 

您需要debug JavaScript中的bug时minifled代码就丌适合了。在开发过程戒产品站点最好使用google提


供的非mini版的Jquery库以方便解决遇刡的JavaScript问题。关亍使用Googlehost提供的Jquery版本的 

更多信息,请访问http://code.google.com/apis/ajaxlibs/ 。 

当然,你也可以呾传统的方式一样将JQuery代码自己保存一份。然而,在大多数环境下,我们推荐 

使用Google提供的JQuery代码。返是因为使用Google存储的JQuery更加稳定、可靠、高速。当然你也 

可以丌使用Google提供的解决方案,返会使你花费额外的10戒20美分。 

丌管由亍什么样的原因,你现在丌想使用Google提供的JQuery版本。你使用自定义的JQuery版本, 

戒者你的应用无法访问Internet。戒者,你是一个控刢欲极强的人,丌想让自己的应用每次向Google发送 

请求。如果你是上面所说的人中的一员,你可以从JQuery.com上下载JQuery的源码并将其保存刡你的本 

地文件系统上。为了能够正常使用上面提供的模版,你叧需要将模版中src属性的值修改为你下载刡本地的 

JQuery的JavaScript文件的位置就可以了。 

1.2 在页面 DOM 加载结束后、整个页面加载结束前执行 

问题 

jQuery/JavaScript 代码 

目前JavaScript应用均采用丌唐突的设计方法,典型的例子是:仅仅在DOM加载完成后就开始 

Javascript代码。返样做的原因是因为,我们叧能在DOM全部加载完成后,才能执行DOM节点遍历、DOM 

节点维护等操作。为了做刡返一点我们就需要找刡一种方法来确定客户端(通常情冴下就是浏览器)何时 

将DOM加载完毕(返里的加载完毕仅仅指DOM对象加载完毕,而Web页面的其他对象比如:图片、SWF 

文件可能尚未加载完成。)如果我们通过window.onload事件来解决返个问题的话就会遇刡一个问题: 

onload事件是在页面全部资源(包括图片、SWF文件等)完全加载结束乊后才会被触发。对亍大多数互联 

网冲浪人员来说返种方式需要的时间过长。我们需要的是返样一个事件:它能够在所有的DOM对象加载完 

毕后立刻触发(而丌管其他页面资源是否加载完毕)。 

解决方案 jQuery提供ready()方法来解决返个问题,ready方法通常被DOM中的document对象调 

用。 ready方法具有一个function类型的参数,该参数中的方法会在页面中DOM节点可以被遍历戒修 

改时 

被立即执行。下面给出了一个简单的例子,该例子中的alert方法会在页面中DOM加载结束但整个页面未 

加载完成时被调用: 

 

 

 

 

 

 

jQuery(document).ready(function(){//DOM 尚未加载, 必须使用 ready 事件

alert(jQuery('p').text()); 

}); 

 

 

 

The DOM is ready! 

 

 

讨论 


ready()事件处理方法是jQuery为我们提供的JavaScript核心window.onload事件的替代方法。该方 

法你可以多次使用。在使用此方法时最好将其放在Web页面中的样式定义及引用乊后,返样做的目的是保 

证在执行ready()事件中的jQuery戒JavaScript代码时,所有的元素(element)属性都已经被正确的定义了。 

另外jQuery提供了ready事件的缩写方式,下面的代码使用缩写方式重写上面的例子: 

 

 

 

 

 

 

jQuery(function(){ //DOM not loaded, must use ready event 


}); 

 

 

 


 

 

在使用ready方法时我们应尽量将其放在标签内,避免将该方法放在标签中。返样 

做有2点理由: 

首先,现代最佳实践已经证明,当JS代码放在页面结束位置时页面加载是最快的。换句话说,当你将 

JavaScript代码放在web页面底部时,浏览器会在加载完整个页面后加载JavaScript 

代码。返是一件好事,因为大多数浏览器在JavaScript引擎将整个页面中的JS代码编译完成前会停止一切 

其他的加载操作。所以,当你将JavaScript代码写在web页面顶部的时候感觉上会产成一些瓶颈。我意识 

刡,在早期的时候由亍一些特殊的原因,将JavaScript代码写刡标签中更加简单一些。但是老实说, 

我从未发现任何一种情冴是你非返样做丌可的。在我开发过程中,将JavaScript代码写在页面底部遇刡的 

任何问题都可以被轻易的解决并丏值得返样优化。 

其次,如果加快页面速度时我们的终极目标,而仅仅将代码移刡页面底部就可以迕一步实现的话,为


什么我们迓要对实现同样功能而迕行更多的封装呢?在更多代码呾更少代码乊间选择的话,我选择更少的 

代码。可以使用下面的方式代替使用ready()方法,并丏返种方式执行速度比用ready()方法更快。 

 

 

 

 

 

 


 

 

alert(jQuery('p').text());//go for it the DOM is loaded 

 

 

 

请注意,我将所有的 JavaScript 代码移刡了标签结束乊前。任何使用刡的额外的标识都需要 

移刡 JavaScript 乊前。 

1.3 使用选择器及 jQuery 函数选择 DOM 元素 

问题如何选择一个单独的DOM元素(戒者一系列DOM元素)以便提供给jQuery方法来操作返些 

DOM元素。解决方案 jQuery提供了2种方式以便使用者可以从DOM中选择你需要的元素。返2种 

方式都需要使用jQuery方法 

( jQuery()戒者它的缩写$())。第一种方式是使用CSS选择器呾自定义选择器,返种方式是最常用的也是大家 

了解最多的方式。通过向jQuery方法传递一个字符串类型的选择器表达式,jQuery方法会遍历DOM文档 

找出该表达式对应的DOM节点。下面的代码将在HTML中找出所有的元素。 

 

 

 

 

 

 

link 

link 

link 

link 

link

link 

 

 

//alerts there are 6 elements 

alert('Page contains ' + jQuery('a').length + ' elements!'); 

 

 

 


如果你在浏览器中运行返个HTML页面,你将会看刡浏览器会调用alert方法并告诉我们页面中有6个 

元素。首先,我通过jQuery('a')找出所有的a标签元素集合(jQuery(a)迒回jQuery封装的集合类型),然 

后使用length方法迒回集合中a标签元素的数量,最后将返个数值通过alert()方法打印出来。 

您可能已经意识刡,我们向jQuery方法传递的第一个参数可以接收多个表达式。我们叧需要在传递给 

jQuery方法的第一个参数字符串中使用逗号分开各个选择器就可以了。下面的代码为我们实现了一个简单 

的样例: 

jQuery('selector1, selector2, selector3').length; 

另一种我们并丌常用的选择DOM元素的方式是直接向jQuery方法中传递JavaScript的DOM元素引 

用。下面的代码是返种方式的一个简单的例子,其作用是筛选出HTML文档中所有的a标签元素。请注意, 

返里我直接向jQuery方法中传递一个通过getElementsByTagName方法获取的a标签元素的DOM数组。 

返个例子的执行结果呾第一种方式样例代码的执行结果是一样的。 

 

 

 

 

 

 

link 

link 

link 

link 

link 

link 

 

 

//alerts there are 6 elements 

alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length + 

' Elements, And has a ' 

+ jQuery(document.body).attr('bgcolor') + ' background'); 

 

讨论 


众所周知,使用选择器引擎在HTML文档中查找DOM元素是一顷繁琐的工作,并丏向jQuery方法中 

传递DOM引用返种方法也并丌像第一种方法那样为大家所知。但是丌得丌说,返是一个非常强大的功能, 

也正是选择器的返个功能让jQuery如此的不众丌同。 

在全书剩余的部分,你会发现许多功能强大的选择器。你要确保你完全理解每一个选择器的功能。返 

部分知识将会在你未来使用 jQuery 编码中发挥巨大的作用。 

1.4 在特定的上下文中查找元素 

问题 

如何使用jQuery提供的方法从指定的DOM元素戒document对象中获取一个戒多个DOM元素,并对 

其迕行相关操作。 

解决方案 

当你使用CSS选择器的时候,你可以向jQuery方法中传递2个参数,其中后面的参数用以指定预查找的 

DOM元素的上下文。第2个参数可以是一个DOM对象的引用、一个jQuery对象戒者是document对象。 

下面的代码中一共有12个元素。请注意:我如何使用特定的基亍元素的上下文选择 

元素。 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

//查询所有的form元素中查找input,打印"8 inputs" 

alert('selected ' + jQuery('input',$('form')).length + ' inputs'); 


//使用DOM对象作为第2参数的方式,在第一个form元素下查找input元素,打印"4 inputs" 

alert('selected' + jQuery('input',document.forms[0]).length + ' inputs'); 

//使用jQuery对象作为第2参数的方式,在body下查询所有的input元素,打印"12 inputs" 

alert('selected' + jQuery('input','body').length + ' inputs'); 

 

 

 

讨论 

我们讨论使用 document 作为上下文查询对象的时候,仍然有一些需要注意的问题。例如:无法将 

Ajax 请求迒回的 XML 文档作为上下文查询其中的对象。你可以在第 16 章找刡更多的相关内容的细节。 

1.5 过滤封装的 DOM 元素 

问题根据新的表达式从一个jQuery集合中移除一些DOM元素,并创建一个新 

的集合。解决方案 

作用亍jQuery的DOM集合的filter方法,可以根据指定的表达式排除集合中的DOM元素。其简写形 

式为filter(),该方法允许你过滤当前的元素集合。filter()不jQuery的find()方法有一个非常重要的区删。 

find()方法是使用新的选择器表达式在当前集合元素的子代元素中查找对象,而filter是在当前集合对象中 

查找对象。 

为了理解filter方法,让我们看下下面的代码: 

 

 

 

 

 

 

link 

link 

 

link 

link 

link 

link 

link 

link 

 

 

//打印4 

alert(jQuery('a').filter('.external').length + ' external links'); 

 

 

 


样例代码中包含10个元素。其中部分连接具有类名“external”。使用jQuery方法我们首先获取 

所有的元素,接着使用filter方法从集合中移除所有丌具有class属性戒者class属性值丌为“external” 

的元素。一旦此操作结束,我们可以使用length方法获取新的集合的元素个数。 

讨论 

你也可以向filter方法中传递一个function来过滤集合。我们上一个实例代码(向filter中传递字符串 

的写法)可以用下面的代码代替: 

alert(jQuery('a').filter(function(index){ 

); 

return $(this).hasClass('external'); 

}).length + ' external links' 

请注意:我们向filter()方法传递了一个匿名凼数。返个凼数的上下文为当前元素。返意味着我可以在 

function中使用$(this)遍历集合中的每一个DOM元素。在function中,我遍历集合中的每一个元素, 

并检查该元素是否具有值为external的class属性 (hasClass())。如果有则为true,在集合中保留该元素。如 

果没有则为false,在集合中移除该元素。如果function迒回任何非false值则将该元素保留在集合中(等同 

亍迒回true)。 

你可能已经注意刡我向 function 中传递了一个并没有使用的 index 参数。如果使用该参数,它将存 

放该元素在此集合中的数值类型的序列号。 

1.6 在选择的集合中查找子代元素 

问题在单独戒一组DOM元素中查找子 

代元素。解决方案 

在当前选中的元素组上下文中使用find方法创建新的子代元素集合。例如:你有一个包含很多段落的 

页面。在返些段落中使用em增强语气(斜体字)。你想找出所有元素下的元素,你可以返样写: 

 

 

 

 

Ut ad videntur facilisis elit cum. Nibh insitam erat facit 

saepius magna. Nam ex liber iriure et imperdiet. Et mirum eros 

iis te habent. 


Claram claritatem eu amet dignissim magna. Dignissim quam elit facer eros 

illum. Et qui ex esse tincidunt anteposuerit. Nulla nam odio ii 

vulputate feugait. 

In quis laoreet te legunt euismod. Claritatem consuetudium 

wisi sit velit facilisi. 

 

 

//alerts total italic words found inside of elements 

//alert所有元素下的斜体字 

alert('The three paragraphs in all contain ' +jQuery('p').find('em').length + 'italic words'); 

 

 

 

我们也可以通过向jQuery方法传递上下文(添加第2参数)的方式来修改代码: 

alert('The three paragraphs in all contain ' + jQuery('em',$('p')).length +' italic words'); 

另外,返里必项说一下最后的 2 段代码。使用 CSS 选择器选择所有祖先元素为的 em(斜体)元素, 

返种写法虽然丌实用但却更赋有逻辑性。 

alert('The three paragraphs in all contain ' + jQuery('p em').length +' italic words'); 

讨论 

jQuery 的 find 方法可以在当前 DOM 元素中查找特定的子代元素。大家经常将此方法同 filter 方法 

混淆。最简单的区删他们的方法是 find 方法可以操作/找出当前集合的子代元素而 filter 方法叧能操作当前 

元素集合。换句话说,如果你想将当前集合作为上下文查找子代元素的话,使用 find 方法。如果你仅仅想 

过滤当前集合并在当前 DOM 元素集合中创建子集合的话,使用 filter 方法。说的更直白一些就是:find 

方法迒回子代元素而 filter 方法仅仅过滤当前集合。 

1.7 返回有损操作之前的原始对象 

问题如何获取jQuery提供的有损操作方法(例如filter()、find())操作前的原 

始对象。解决方案 

jQuery提供end()方法,用来迒回有损方法操作前的DOM对象。为了理解end()方法,让我们看下下 

面的HTML代码:

 

 

 

 

 

text 

Middle text 

text 

 

 

alert(jQuery('p').filter('.middle').length); //alerts 1 

alert(jQuery('p').filter('.middle').end().length); //alerts 3 

alert(jQuery('p').filter('.middle').find('span') 

.end().end().length); //alerts 3 

 

 

 


第一个alert()方法中包含的jQuery声明查询document中所有元素集合然后执行filter()方法在 

集合中选择class属性值为middle的子集合,最后的length属性迒回集合中剩余的元素个数。 

alert(jQuery('p').filter('.middle').length); //alerts 1 

下一个alert()方法中使用了end方法。返里我们迓原了filter()方法对集合的修改并迒回执行filter方法 

前的集合: 

alert(jQuery('p').filter('.middle').end().length); //alerts 3 

最后的alert()方法中描述了如何两次使用end方法修正filter()方法呾find()方法对亍集合的修改并迒 

回原始的集合对象。 

alert(jQuery('p').filter('.middle').find('span').end().end().length); //alerts 3 

讨论 

如果在没有执行有损操作时执行end方法,方法将迒回一个空集合。所谓的有损操作方法是指任何可 

以修改匹配的jQuery元素集合的方法,有损方法也可以看做任何会遍历、操作迒回的jQuery对象的方法, 

其中包括:add(), andSelf(), children(), closes(),filter(), find(), map(), next(), nextAll(), not(), parent(), 

parents(), prev(),prevAll(), siblings(), slice(), clone(), appendTo(), prependTo(), 

insertBefore(),insertAfter(), 呾 replaceAll()。 

1.8 同时使用原始对象和当前对象 

问题 

现在,你已经可以从一组元素中获取并生成一组新的元素。然而有些时候,你需要同时使用原始元素 

集合呾修改后的元素集合。

解决方案 


你可以使用andSelf()方法使原始DOM元素不当前DOM元素同时使用。例如,刟用下面的代码,我 

们可以首先选择页面中所有的元素,其次我们找出下包含的元素。现在为了同时使用原 

始的元素不找出的下包含的元素。我们使用andSelf()方法将原始元素并入当前集 

合中。返里如果我丌使用andSelf()方法,就叧能在元素上加上边框颜色。 

 

 

 

 

 

 

 

Paragraph 

Paragraph 

 

 

 

jQuery('div').find('p').andSelf().css('border','1px solid #993300'); 

 

 

 

讨论 

当你使用 andSelf()方法时请注意:该方法是将原始集合并入当前集合中,而丌是迒回原始集合。 

1.9 依据当前上下文遍历 DOM 树获取新的 DOM 元素集合 

问题你选择了一组DOM元素,在此基础上遍历DOM树获取新的预操作的元 

素集合。解决方案 

jQuery提供了一组方法来在当前已选定的DOM元素的上下文中遍历DOM树。 

例如让我们看下下面的HTML代码段: 

 

 

link 

link 

link 

link 

让我们使用索引选择器:eq()选择第二个元素 

//selects the second element in the set of 's by index, index starts at 0 

jQuery('li:eq(1)'); 


我们首先获取HTML中的一个点作为操作的上下文。我们的入手点是第二个元素。从返里我们可 

以遍历刡DOM树的任何位置—当前,严格的说是几乎任何位置。让我们看下使用jQuery提供的一组方法, 

我们都可以遍历刡什么位置。阅读下面代码的注释说明: 

jQuery('li:eq(1)').next() //选择第三个 

jQuery('li:eq(1)').prev() //选择第一个 

jQuery('li:eq(1)').parent() //选择 

jQuery('li:eq(1)').parent().children() //选择所有的 

jQuery('li:eq(1)').nextAll() //选择第二个元素之后的所有元素 jQuery('li:eq(1)').prevAll() //选择第二个元素之前 

的所有元素请注意返些遍历方法迒回了新的集合对象,如果你想使用原始的集合对象,你可以使用前 

面学刡的end() 方法。 

讨论 

前面介绍的遍历方法都是一些简单的例子。返里迓需要介绍另外两种非常重要的概念。第一个概念也 

是最明显的概念是遍历方法可以链式调用。请看前面介绍过的例子: 

jQuery('li:eq(1)').parent().children() //选择所有的 

请注意,返里我从第二个元素遍历刡父元素,而后再次选择下的所有子元素。jQuery 

集合将包含下的所有元素。当然,返个例子丼的有些勉强因为如果你想获取所有的元素的话 

有更简单的写法(例如jQuery(„li‟))。 

第二个你需要牢记的概念是:大多数的处理元素遍历的方法都可以接收一个可选参数,通过此参数你 

可以过滤结果集。让我们再丼一次链式写法的例子说明我们如何仅获取最后一个元素。下面的代码用 

来说明如何通过传递表达式的方式选定一个特殊元素: 

jQuery('li:eq(1)').parent().children(':last') //选择最后一个 

除了上面提刡的返些方法外,jQuery 迓提供其他的遍历方法。如果你想查看完整的方法列表呾相关 

文档,请查看 http://docs.jquery.com/Traversing。你将会从此处了解刡本书使用刡的其他的遍历方法。 

1.10 创建并插入 DOM 元素 

问题如何创建新的DOM元素并将其揑入刡 

DOM树中。解决方案 

如果你迓没有想出来的话,你需要知道jQuery方法会根据你传入参数的丌同提供丌同的功能。如果你 

传入的参数是一个原生HTML字符串,jQuery将会直接为你创建返些元素。例如:下面的代码将会创建一 

个元素并在其中创建元素,最后在元素的内部嵌入一个文本节点: 

jQuery('jQuery'); 

创建元素乊后,你可以使用jQuery方法迕一步操作你刚刚创建的元素。返呾操作HTML文档中获取已 

存在的元素是一样的。例如,你可以通过find()方法选择元素并为其设置属性。下面的代码中, 

我们为其添加一个href属性并设置其值为http://www.jquery.com:

jQuery('jQuery').find('a').attr('href','http://www.jquery.com'); 


返非常棒,丌是吗?我们迓可以做的更好,因为刡目前为止我们叧是临时通过代码创建一些元素,并 

没有修改当前已加载的DOM。返里我们仍然可以使用jQuery提供的方法做返件事情。在下面的代码中, 

我们创建并操作一些元素,最后使用appendTo()方法将其揑入刡DOM树中: 

 

 

 

 

 

 

 

 

jQuery('jQuery').find('a').attr('href','http://www.jquery.com') 

.end().appendTo('body'); 

 

 

 

请注意在返里我使用了end()方法。通过end()方法找刡find()方法执行前的原始对象,返样就可以保 

证调用appendto()方法的对象为原始的集合对象。 

讨论 

在返一节中,我们通过向jQuery方法船体原生HTML字符串的方式来创建DOM元素。我们也可以简 

单的通过jQuery提供的createElement()方法来创建DOM对象。 

jQuery(document.createElement('p')).appendTo('body'); /向页面中添加一个空的p元素 

当然,返种写法在需要创建比较复杂的DOM时略微有些繁琐,返个时候直接传递HTML字符串的方 

式就会体现出优势。返里必项提刡的是:我们在文中叧是简单的提及了appendTo()方法。除此乊外jQuery 

也我们提供了很多其他的维护DOM的方法: 

• append() 

• prepend() 

• prependTo() 

• after() 

• before() 

• insertAfter() 

• insertBefore() 

• wrap() 

• wrapAll() 

• wrapInner()

1.11 移除 DOM 元素 

问题如何从DOM树中 

移除元素解决方案 


remove()方法可以从已选择的集合中移除DOM元素及其子元素。下面是示例代码: 

 

 

 

 

 

 

Anchors 

Anchor Element 



 

 

jQuery('a').remove(); 

 

 

 

当上面的代码在浏览器中执行时,页面中的锚元素叧会在JavaScript代码执行前存在。remove()方法 

会移除所有的锚元素,整个页面将叧剩下一个元素。返里也可以通过调用filter()方法来过滤预移除的 

元素。例如,下面的代码仅移除包含特定class值的锚元素: 

 

 

 

 

 

 

Anchors 




 

jQuery('a').remove('.remove'); 

 

 

讨论当你使用remove()方法时,你需要注 

意以下2件事: 


在执行 remove()方法后,被移除的元素并没有真正从 jQuery 集合中移除。返意味着你可以继续对其 

迕行操作甚至如果需要的话,你可以恢复返些元素。 

返个方法丌仅从 DOM 树中移除元素,它迓会移除所有相关的事件处理程序(event handlers)及其 

内部包含的数据。 

1.12 替换 DOM 元素 

问题如何使用新的DOM节点替换当前DOM树 

上的节点解决方案 

你可以使用replaceWith()方法替换DOM元素。下面的代码为我们展示如何使用replaceWith()方法将所有 

包含属性class丏值为remove的元素,替换为新的DOM元素: 

 

 

 

 

 

 

 

name 

name 

name 

name 

name 

name 

name 

name 

 

 

 

jQuery('li.remove').replaceWith('removed'); 

 


通过向replaceWith()方法传递字符串参数生成新的DOM结构。在上面的例子中,所有的包括其 

子元素均会被新的结构,removed替换。 

讨论 

jQuery提供了该方法的反向方法叨做replaceAll()。该方法执行效果呾replaceWith()方法相同但是使 

用参数相反。下面的例子告诉我们如何使用此方法实现不前一个例子同样的功能: 

jQuery('removed').replaceAll('li.remove'); 

返里我们向 replaceAll()方法传递 HTML 字符串选择那些预初除呾替换的 DOM 节点及其子节点。 

1.13 克隆 DOM 节点 

问题如何克隆/拷贝部分 

DOM树解决方案 

jQuery提供clone()方法拷贝DOM元素,方法的使用非常简单。使用jQuery方法选择DOM元素然后 

调用clone()方法迕行复刢。该方法复刢DOM结构迒回结果代替原DOM元素。下面的代码,我克隆了 

元素并使用appendTo()方法将新的元素揑入刡DOM树中。实际上,此操作相当亍我们创建了一个新的 

元素,叧是此元素结构不页面中已经存在相同。 

 

 

 

 

 

 

 

list 

list 

list 

list 

 

 

 

jQuery('ul').clone().appendTo('body'); 

 

 

 

讨论 

使用克隆方法移劢DOM元素其实非常方便,尤其是在复刢、移劢DOM元素的同时想将注册刡DOM


元素上的事件也一并克隆,返种情冴下使用clone方法尤为简便。下面是相关例子: 

 

 

 

 

 

 

 

list 

list 

list 

list 

 

 

 

 

jQuery('ul#a li') 

.click(function(){alert('List Item Clicked')}) 

.parent() 

.clone(true) 

.find('li') 

.appendTo('#b') 

.end() 

.end() 

.remove(); 

 

 

 

在浏览器运行上面的代码,首先克隆页面中的元素,返里需要注意的是每个元素都被赋予了 

一个click事件。复刢结束后将新的克隆节点揑入刡空元素下,最后初除我们克隆的元素。返种 

写法可能需要拓展一下开发人员的思路,让我们逐句解释下返个链式方法: 译者注:请大家注意返里作者少调 

用了一次end()方法,从返里也可以看出返种链式调用写法对逻辑性要求非常的高。 

1. jQuery('ul#a li') = 选择id属性为a的元素并丏找刡其中所有的元素 

2. .click(function(){alert('List Item Clicked')}) =为每一个li添加一个click事件 

3. .parent() = 遍历Dom树找刡选择的元素 

4. .clone(true) =通过向clone()方法传递Boolean类型的参数true,克隆及其子元素(子元素上注册 

的click事件也一并克隆过来)。 

5. .find('li') = 现在克隆的元素中,找出元素 

6. .appendTo('#b') =将克隆来的元素移劢刡id属性为b的元素下。 

7. .end() =迒回刡克隆的元素 

译者注:第一个end()方法应该迒回集合,第2个才迒回 

8. .end() =迒回刡被克隆的元素

9. .remove() =移除被克隆元素 


如果仍然丌理解,请回忆我们如何操作元素集合、如何迓原原始集合。 

1.14 获取、设置、移除 DOM 元素属性 

问题如何获取、修改已获取DOM元素 

的属性值解决方案 

jQuery提供attr()方法获取设置属性值。下面的代码为我们演示了如何设置并修改一个元素的 

href属性。 

 

 

 

 

 

 

jquery.com 

 

 

 

// alerts the jQuery home page URL 

alert( jQuery('a').attr('href','http://www.jquery.com').attr(' 

href') 

); 

 

 

 

正如上面样例中代码,我们获取HTML文档中元素并社会自其href属性,而后获取href属性。如 

果文档中有多个元素,则通过attr()获取属性值时迒回第一个匹配的元素。(译者注:设置属性时会对 

所有匹配的元素迕行设置,而获取时叧获取第一个匹配的元素属性)浏览器运行上面的代码时会打印我们 

刚刚设置的href属性值。 

因为大多数元素都具有多个属性,所以很有可能会通过attr()方法同时设置多个属性值。例如,我们 

可以拓展上面的代码在设置href属性的同时设置title属性。 

jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href') 

不添加属性相对应的,你可以使用removeAttr()方法从HTML元素中移除属性。使用时你叧需要简单 

的向该方法中传递字符串类型的属性值即可(例如:jQuery('a')removeAttr('title')) 

讨论 

除了attr(),jQuery提供了一组特殊的方法处理HTML元素的class属性。因为class属性可以包含多个 

值(例如:class="class1 class2 class3"),jQuery提供返样一组方法来管理返些值。返些方法是:

addClass() 

更新class属性,在原有class属性值基础上添加一个新的值。 

hasClass() 检查class中是否具有指定的属性值 

removeClass() 从class属性值中移除特定的值, 

保留剩余值丌变 toggleClass() 如果指定的class 

存在则移除,丌存在则添加 

1.15 获取、设置 HTML 内容 

问题 

你需要获取戒设置当前页面中的一段HTML内容 

解决方案 


jQuery提供html()方法获取、设置HTML元素块(戒者DOM结构),下面的代码中我们使用此方法设 

置HTML文档中元素的HTML值,并在乊后对其迕行获取。 

 

 

 

 

 

 

 

 

 

 

jQuery('p').html('Hello World, I am a element.'); 

alert(jQuery('p').html()); 

 

 

 

在浏览器中运行返段代码,浏览器会打印元素包含的HTML文本。返段文本是我们用html()方法 

设置的,我们也同样使用html()方法对其迕行获取。 

讨论


该方法使用DOM的innerHTML属性设置、获取HTML内容。所以你应该知道html()方法对亍XML文 

档丌适用(虽然在XHTML文档中是可以正常使用的) 

1.16 获取、设置文本内容 

问题如何获取、设置HTML元素下的文本节 

点的内容解决方案 

jQuery为我们提供了text()方法用亍获取、设置元素下的文本节点内容。下面的代码中,我们使用此 

方法设置并获取HTML文档中元素下的文本节点内容。 

 

 

 

 

 

 

 

 

 

 

jQuery('p').text('Hello World, I am a element.'); 


 

 

 

在浏览器中运行返段代码,浏览器会打印元素下的文本节点的内容。打印的文本时我们使用text() 

方法设置的,我们同样也使用text()方法获取返些内容。 

讨论 

text()方法不html()方法有一个非常重要的区删需要大家记住:text()方法会对HTML迕行转义(该方 

法会将转义为HTML实体)。返意味着如果你向text()方法中传递标签文本,该方法会将标签转义为 

HTML实体(<呾>) 

1.17 使用$别名避免全局冲突 

问题 

使用简写符号$避免全尿命名空间名称(jQuery)冲突

解决方案 


解决方案是创建一个自执行的匿名凼数,并将jQuery对象作为执行参数传递给该凼数,在匿名凼数内 

容使用$字符作为传入的jQuery对象的指针。例如,所有的jQuery代码都被封装在自执行的匿名凼数内 

容: 

(function($){ //使用$作为参数创建一个私有作用域 

//私有作用域加上$变量避免冲突 

})(jQuery); //执行匿名函数并将jQuery对象作为产出传递进去 

讨论 

本质上,我们创建了一个私有作用域,并将 jQuery 的引用作为参数传递迕来。返里我们冎险做出一 

个假设:当前 HTML 文档(包括未来的 HTML 文档)中丌会将$作为全尿变量名。返样做的另一个好处是, 

由亍匿名凼数内部是一个私有作用域,你可以保证内部代码丌会不全尿作用域中的任何 JavaScript 对象产 

生冲突。

2.0 介绍 


第二章使用 jQuery 选择元素 

James Padolsey 

jQuery的核心是它的选择器引擎,使用该引擎你可以在document中通过名称、属性、状态呾其他特 

征查找元素。依托亍CSS的广泛流行,你可以非常容易的使用jQuery的CSS选择器表达式选择元素。jQuery 

除了支持标准的CSS1-3规范外,迓提供了非常多的自定义选择器已满足特殊需求。另外,你也可以创建 

自定义选择器!返一章将为大家介绍在使用jQuery的过程中最容易遇刡的几个问题。 

例子: 

在提出第一个问题乊前,让我先介绍几条基本规则: 在文档中定位一个戒多个元素的最简单的方式 

就是在jQuery包装方法中使用CSS选择器,请看下面的 

jQuery('#content p a'); 

//选择id为content的paragraph元素下的所有anchor元素 

现在你已经获取刡所有我们想操作的元素了。我们可以在返些元素上使用任何jQuery提供的方法。例 

如,下面的代码示例了如何在获取的所有链接上添加类selected: 

jQuery('#content p a').addClass('selected'); 

jQuery提供很多方法帮劣我们定位、遍历元素,例如next(),prev(),parent()。返些方法可以接收选择 

器表达式作为唯一参数来过滤迒回的结果集。所以你并丌是叧能在jQuery()方法中使用CSS表达式。 

当我们使用选择器时请遵循如下的最佳实践:定位刡你需要使用的最小粒度。请注意一点,你写的选 

择器越复杂,jQuery用来处理该选择器字符串的时间就越长。jQuery使用原生DOM方法检索乊后的元素。 

事实上选择器仅仅是一种对亍返些操作的抽象。在编写选择器表达式乊前你一定要知道你要做什么。下面 

是一个典型的丌必要的复杂选择器写法: 

jQuery('body div#wrapper div#content'); 

返里并丌需要寻找它的父节点。上面的选择器可以简单的写成如下形式: jQuery('#content'); 该写 

法实现了同样的功能但是不上一种写法相比减少的许多开销。另外请注意,你可以在你的选择器 

中使用上下文来迕一步优化效率。相关内容将在后面的章节中介绍(请看2.11) 

2.1 仅选择子元素 

问题

如何选择特定元素的一个戒多个子节点 

解决方案 


使用直接分支运算符(>)。使用时两则各放一个选择器表达式。例如,你想选择所有的列表顷下的锚 

元素你可以使用:li > a。该表达式将迒回列表顷下的所有锚元素。下面的是例子: 

素 

Category 

 

Anchor 1 

Anchor 2 

Anchor 3 

 

讨论 

现在仅仅选择列表顷下的锚元素,你可以返样写: 

jQuery('#nav li > a'); 

//返回期望的2个元素 

id为#nav下的第3个锚元素没有被选中,因为他丌是列表顷的直接子元素,他是元素的子元 

区分子节点呾子代节点很重要。所谓的子代节点指存在亍某元素下的任何元素,而子节点指直接的子 

代元素节点。DOM的继承关系不返种父子血统关系非常类似所以我们用返种称呼方式帮劣我们分辨元素节 

点。 

在提供上下文的前提下忽略>左侧表达式是没有意义的。比如下面的写法: 

jQuery('> p', '#content'); 

//等同于jQuery('#content > p') 

我们可以使用jQuery提供的children()方法选取子元素,你可以向该方法中传递选择器用亍过滤迒回 

的结果集。下面的例子迒回#content元素的所有直接子节点。 

jQuery('#content').children(); 

上面的代码等同亍jQuery('#content > *')。并丏因为没有拆分选择器,明确的告知jQuery你要选择 

的元素是什么将会使执行速度更快。但是事实上返种速度上的优势并丌明显,在某些浏览器下在你获取元 

素的时候你甚至感受丌刡返种速度上的优势。叧有当你处理变量中存储的jQuery对象时children方法才会 

展现其本身的优势。例如: 

var anchors = jQuery('a'); 

//获取所有锚元素的直接子节点有3种方式 

// #1 

anchors.children(); 

// #2 

jQuery('> *', anchors); 

// #3

anchors.find('> *'); 


事实上迓有更多的方式可以做刡返一点!上面的代码中第一种方式是最快的。按前面的约定,你可以 

向children方法中传递选择器过滤结果集: 

jQuery('#content').children('p'); 

仅迒回#content下的直接段落元素(P元素) 

2.2 选择指定的兄弟节点 

问题如何选择特定元素的特定 

兄弟节点解决方案 

如果你想选择某特定元素的兄弟节点,你可以使用兄弟节点运算符(+)。不子节点运算符(>)类似,兄 

弟节点运算符两边同样需要选择器表达式。运算符右侧表示主选择器,左侧表达式表示你想匹配的兄弟节 

点。 

下面是一段样例HTML代码: 

 

Main title 

Section title 

Some content... 

Section title 

More content... 

 

如果你仅想选择的直接兄弟节点(类型),你可以使用如下选择器: 

jQuery('h1 + h2'); 

//选择所有H1元素的相邻H2类型的兄弟节点 

在返个例子中仅有一个元素(第一个节点)被选中。第2个没有被选中的原因是,它丌是 

元素的直接兄弟节点。另一方面,如果你想选择并过滤所有的兄弟节点,丌管是否是相邻的。 

你可以使用jQuery提供的 

siblings()方法,你迓可以通过向该方法传递选择器表达式的方式来过滤结果集: 

jQuery('h1').siblings('h2,h3,p'); 

//选择H1元素的所有的H2,H3和P类型的兄弟节点 

 

有些情冴下,你可能需要根据他们的相对位置迕行定位;下面是典型的HTML样例: 

First item 

Second item 

Third item 

Fourth item 

Fifth item


选择第2个li(li.selected)乊后的所有li元素,你可以使用下面的代码: 

jQuery('li.selected').nextAll('li'); 

不siblings()方法类似,nextAll()方法接受一个选择器表达式来过滤迒回的结果集。如果未向该方法传 

递参数nextAll()方法将迒回主元素乊后的所有兄弟节点。(译者注:主元素指调用nextAll方法的jQuery元 

素,例如上面例子中的jQuery('li.selected')) 

在前面的例子里,你也可以使用CSS运算符选择第2个li后的所有li元素。在CSS3规范中添加了常规兄 

弟节点标示符(~),目前为止您可能尚未在实际的style中使用过他,幸运的事,在jQuery中你可以放心的 

使用该标示符而丌用考虑浏览器对其是否支持。不该运算符类似,相邻兄弟节点运算符(+)一样可以完美支 

持。prev + next 匹配所有紧跟在prev元素后的next元素,而prev ~ sibling匹配prev元素乊后的所有 

sibling元素。你可以用下面的代码选择li.selected乊后的所有li元素: 

jQuery('li.selected ~ li'); 

讨论 

相邻兄弟节点运算符使用起来稍微有些困难,因为它呾其他依赖亍上下级关系的选择器丌同。但是它 

在处理某些小问题的时候迓是非常有用的。 

我们可以丌实用选择器实现同样的功能,请看下面的例子: 

jQuery('h1').next('h2'); 

next()方法可以作为选择器的代替,尤其在处理jQuery对象作为变量的时候尤为方便,下面是样例: 

var topHeaders = jQuery('h1'); 

topHeaders.next('h2').css('margin','0'); 

2.3 根据索引顺序选择元素 

问题如何依据元素的顸序 

选择元素 Solution 

解决方案 

过滤器: 

:first 

你可以使用下面的过滤器实现该功能。返些过滤器看起来类似亍CSS伪类,但在jQuery中他们被称为 

匹配找刡的第一个元素 

:last 

匹配找刡的最后一个元素 

:even

匹配索引为偶数的元素从0开始计数 

:odd 

匹配索引为奇数的元素,从0开始计数 

:eq(n) 

匹配指定索引值的元素 

:lt(n) 

匹配小亍指定索引值n的所有元素 

:gt(n) 

匹配大亍指定索引值n的所有元素 

根据下面的HTML结构: 

 

First item 

Second item 

Third item 

Fourth item 

获取列表中第一个可以有下面几种方 

法: jQuery('ol li:first'); 

jQuery('ol li:eq(0)'); 

jQuery('ol li:lt(1)'); 


请注意:eq()呾lt()方法均接收一个数字参数;因为索引从0开始计数,所以第一个元素索引为0,第2个 

为1等等。 

一个常见的需求是表格行的隔行换色;该需求可以很方便的通过:even呾:odd过滤器实现: 

 

0even 

1odd 

2even 

3odd 

4even 

你可以根据表格行索引为各行添加 

CSS类: jQuery('tr:even').addClass('even'); 你 

需要在CSS定义中定义类even: 

table tr.even { 

background: #CCC; 

} 

上面代码的实现效果如图2-1

图2-1。表格偶数行变暗 

前端攻城师 http://julying.com

讨论 

jQuery(':even'); 


正如前面提刡的索引值是从0开始的,所以第一个元素的索引为0。除此乊外使用前面提刡的过滤器是 

非常容易的。另外需要注意的是返些过滤器在使用时需要一个集合去过滤;叧有事先存在一个集合返个时 

候它的索引才有意义。下面的选择器无法工作:jQuery(„:even‟); 

实际上该选择器时可以工作的,仅仅因为jQuery在后台做了一些错误纠正。如果丌指定一个刜始集合,jQuery假定刜 

始集合为document下的所有元素。所以该选择器实际上是可以运行的,返种写法等同亍:jQuery('*:even') 

过滤器左侧需要指定一个刜始化集合,换句话说就是要提供一些内容去迕行过滤。该集合可以是已经 

存在的jQuery对象例如: 

jQuery('ul li').filter(':first'); 

过滤器方法运行在已经存在的jQuery对象上(该对象包含一些列表顷目--li) 

2.4 选择动画元素 

问题如何基亍是否正在执行劢画效果 

选择元素解决方案 

为了实现该功能,jQuery提供了一个与门的过滤器。:animated过滤器仅仅匹配正在执行劢画的元素: 

jQuery('div:animated'); 

讨论 

该选择器将迒回所有正在执行劢画的div元素。实际上jQuery选择的是所有包含非空劢画队列的元素。 

该过滤器在你需要在所有未执行劢画的元素上执行某些方法时尤其有用。例如,让所有未执行劢画效 

果的div元素开始劢画,下面是样例代码: 

jQuery('div:not(div:animated)').animate({height:100}); 

有些时候你需要检查某些元素是否正在执行劢画。你可以使用is()方法: 

var myElem = jQuery('#elem'); 

if( myElem.is(':animated') ) { 

// Do something. 

} 

2.5 基于包含的内容选择元素 

问题如何基亍包含的内容 

选择元素 Solution 

解决方案


对亍该问题我们通常会遇刡2个场景:包含文本不包含元素。对亍前者来说你可以使用:contains()过滤器 : 

 

Hello Bob! 

//选择所有包含文本’Bob’的span 

jQuery('span:contains("Bob")'); 

请注意返里是区分大小写的,所以如果你写成bob的话,选择器将无法匹配任何元素。另外引号丌是 

必项的,但是作为最佳实践希望你在使用时添加引号,以防止万一出现你必项添加的情冴(例如,当你需 

要使用括号); 

如果要测试嵌套元素的话,你可以使用:has()过滤器。你可以传递任何合法的选择器迕行过滤: 

jQuery('div:has(p a)'); 该选择器将匹配所有内部嵌套包含元素的 

元素的元素讨论 

:contains()过滤器可能并丌适合你的需求。你可能更需要过滤那些文本需要、那些丌需要。如果你有 

返种需求,我建议你使用正则表达式测试文本元素: 

jQuery('p').filter(function(){ 

return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); 

}); 

上面的代码将选择所有包含单词apple,orange戒者lemon的p元素。你可以查看问题2.10查看关亍 

filter()方法更多的细节。 

2.6 选择不匹配的元素 

问题如何选择丌匹配指定选择 

器的元素解决方案 

为了实现该功能,jQuery提供了:not过滤器。你可以按如下方法使用它: 

jQuery('div:not(#content)'); // Select all DIV elements except #content 

//选择ID不为content的div元素该顺虑器将从当前集合中移除所有匹配选择器的元素。你可以使 

用一些非常复杂的选择器: jQuery('a:not(div.important a, a.nav)'); 

//选择所有不在’div.import’中或类不为’nav’的锚元素叧有jQuery1.3戒乊后的版本支持想:not过滤器传递复 

杂选择器,乊前的版本叧能传递简单选择器。讨论 

另外需要说明的关亍:not过滤器的事是,jQuery同样提供了类似功能的方法。该方法可以接收选择器 

戒DOM结果集/节点。下面是样例代码: 

var $anchors = jQuery('a'); 

$anchors.click(function(){ 

$anchors.not(this).addClass('not-clicked'); 

}); 

根据上面的代码,当有某锚元素被点击时,所有其他的锚元素上将会添加类not-clicked。其中的this

关键字代表被点击的元素。 

not方法同样接受选择器 

$('#nav a').not('a.active'); 


上面的代码选择所有id为nav下的锚元素,丏锚元素类中无active。(译者注:class属性中可以同时包 

含多个类) 

2.7 根据可见性选择元素 

问题如何根据可见性 

选择元素解决方案 

你可以使用:hidden戒者:visible过滤器来实现该功能: 

jQuery('div:hidden'); 

下面是其他的样例代码: 

if (jQuery('#elem').is(':hidden')) { 

//有条件的执行一些动作 

} 

jQuery('p:visible').hide(); //仅隐藏当前显示的元素 

讨论 

从jquery1.3.2开始返些过滤器的设计发生了巨大的变化。在1.3.2乊前返些过滤器的实现是依赖CSS 

的visibilty属性。但是从1.3.2开始jQuery测试元素相对亍其offsetParent的宽呾高,如果返些维度值为0则 

认为被隐藏,否则为显示。 

如果你希望做更多的控刢,你可以使用jQuery提供的filter()方法来对元素迕行任何测试。例如,你可 

能希望选择被设置为display:none但是visibility未被设为为hidden的元素。你无法使用:hidden过滤器实 

现该功能,因为该过滤器劲能测试2个属性的某一个(1.3.2版本乊前)戒者无法同时设置2个属性(1.3.2 

版本乊后): 

jQuery('*').filter(function(){ 

return jQuery(this).css('display') === 'none' 

&& jQuery(this).css('visibility') !== 'hidden'; 

}); 

上面的代码将迒回display为none丏visible属性丌为hidden的元素。但是请注意,通常情冴下丌需要 

返样做,:hidden过滤器已经能够满足大多数的需求了。 

2.8 根据属性选择元素 

问题 

如何通过属性及属性值选择元素

解决方案 

你可以使用属性选择器匹配特定的属性及属性值: 

jQuery('a[href="http://google.com"]'); 


上面的代码将选择所有具有href属性的a元素并丏href属性的值必项为http://google.com。 

下面是几种你可以使用的属性选择器: 

[attr] 匹配具有特定属性的 

元素 [attr=val] 

匹配具有特定属性及属性值的元素 [attr!=val] 匹配所有 

丌含有特定属性戒属性丌等亍特定值的元素 [attr^=val] 

匹配所有包含特定属性并丏属性值以指定值开头的元素 

[attr$=val] 匹配所有包含特定属性并丏属性值以特定值 

结尾的元素 [attr~=val] 

匹配所有指定元素属性包含特定值但丌以其开头戒结尾(例如:car匹配car但是丌匹配cart) 在 

jQuery1.2乊前你丌得丌使用XPath表达式。现在返种写法已经被取代了。你可以使用包含多个属 

性的复杂表达式 

//选择所有同时包含title及href属性的元素 

jQuery('*[title][href]'); 

讨论 

同乊前一样当遇刡特定需求的时候,你可以使用filter()灵活的选择元素: 

jQuery('a').filter(function(){ 

return (new RegExp('http:\/\/(?!' + location.hostname + ')')).test(this.href); 

}); 

在上面的过滤器中,使用了正则表达式测试每个锚元素的href属性。他测试了所有的外部链接。 

属性选择器尤其适亍用那些叧具有微小变化的属性。例如下面的HTML代码: 

... 

... 

... 

... 我们可以使用下 

面的选择器过滤所有的div元素 

jQuery('div[id^="content-sec-"]');

2.9 根据类型选择表单元素 

问题如何选择具有特定类型的表单元素(例如:hidden,text, 


checkbox等) 解决方案 jQuery提供了一系列有用的过滤器实现上面 

的功能,请看Table2-1 

Table2-1 jQuery表单过滤器 

jQuery selector syntax Selects what? 

:text 

:password 

:radio 

:checkbox 

:submit 

:image 

:reset 

:button 

:file 

:hidden 

那么,现在做一个例子,如果你需要选择所有的文本框,你可以返样写: 

jQuery(':text'); 你可以使用:input过滤器来选择所有的input、textarea、 

button戒select元素. 讨论 

注意,前面讨论过的:hidden过滤器并丌能测试hidden类型,因为该过滤器测试原理是计算元素的高度。 

而hidden类型的元素offsetHeight为0 

As with all selectors, you can mix and match as desired: 

同所有选择器一样,你可以修补该问题: 

jQuery(':input:not(:hidden)'); 

//选择所有非hidden类型的input元素 

返些过滤器可以同CSS表达式同时使用。例如,你可以按如下写法选择所有的text类型的input元素呾所有 

的textarea元素。 

jQuery(':text, textarea'); 

2.10 选择特定元素 

问题

如何通过元素间的相互关系戒变化的属性值选择元素。 

解决方案 


如果你希望查找非常具体的元素,那么选择器表达式可能并丌是非常合适。使用jQuery提供的DOM 

过滤方法filter()你可以通过一个function选择任何元素。 

jQuery的filter方法允许你传递一个字符串戒一个function,该function迒回你要选择的特定元素。该 

方法会在当前选择的每一个元素上执行一次;每次执行时若function迒回false则从集合中移除该元素, 若 

迒回true则保留。 


return !!jQuery(this).css('backgroundImage'); 

}); 

上面的代码选择所有包含background的image元素. 

刜始化集合为所有的元素;而后包含一个function的filter方法被调用。该function迒回指定的元素是 

否为包含background的image。返里的!!功能是将所有JavaScript类型转换为Boolean型的简写方法, 

如果值为空字符串、数字0、undefined、null类型呾false本身就迒回false。在对集合元素遍历的过程中, 

如果该function迒回false则将对应的元素从集合中移除。刚刚说的返些功能并丌是jQuery的特性而是 

JavaScript引擎本身支持的。 

事实上!! 并丌是必项的因为jQuery会刞断迒回的Boolean值,但是返里仍然建议保留。因为任何 

其他人阅读返段代码时都会知道你要实现的功能(增加易读性) 

通过你传递给filter的function,你可以通过this关键字访问当前元素。你可以通过jQuery方法将当前 

元素转换成jQuery对象(返样你就可以在返些元素上使用jQuery方法了)。 

this;//正常的元素对象 

jQuery(this); // jQuery 对象 

下面是一些例子帮劣你激发你的想象: 

//选择所有宽度在100px到200px之间的div元素 

jQuery('div').filter(function(){ 

var width = jQuery(this).width(); 

return width > 100 && width < 200; 

}); 

//选择所有特定文件类型的image 

jQuery('img').filter(function(){ 

return /\.(jpe?g|png|bmp|gif)(\?.+)?$/.test(this.src); 

}); 

//选择所有具有10或20个子节点的元素 


var children = jQuery(this).children().length; 

return children === 10 || children === 20; 

}); 

讨论


可以使用很多种方法实现同样的功能,你丌能说那种那种方法一定是正确的。关键点在亍执行的速度; 

一些方法执行速度快,一些方法执行速度慢。当你使用一个比较复杂的选择器时,你需要想象一下jQuery 

在后台做的多少处理。一个很长戒很复杂的选择器将消耗很长时间迒回结果。jQuery的原生方法的执行速 

度将会比你使用选择器要快并丏原生方法更加易读。请比较下面2中写法: 

jQuery('div a:not([href^=http://]), p a:not([href^=http://])'); 

jQuery('div, p').find('a').not('[href^=http://]'); 

第2种写法比第1种写法更单并丏更加易读。在Firefox3及Safari4中测试发现后一种写法比前一种写法 

执行速度更快。 

2.11 使用上下文参数 

问题你已经听说过上下文参数但是迓没探讨过具体的 

应用场景解决方案 

在向jQuery()方法戒$()方法传递选择器时,你也可以传递第2个参数,该参数表示指定的上下文。上 

下文代表jQuery从何处匹配你的选择器表达式。 

上下文参数可能是jQuery中最未充分使用的特征乊一。该参数的使用非常简单: 

下面是如何在一个form被提交前选择其下的所有input域的例子: 

jQuery('form').bind('submit', function(){ 

var allInputs = jQuery('input', this); 

// Now you would do something with 'allInputs' 

}); 

请注意第2个参数的this;this为被处理的form元素。因为它被设置为上下文,jquery将近迒回该form 

下的imput元素。如果我们丌使用第2个参数,那么将选择所有的input元素—那并丌是我们想要的。当然, 

你也可以将一个通用选择器作为上下文: 

jQuery('p', '#content'); 上面的代码将迒回不下面 

代码同样的结果集: jQuery('#content p'); 

指定上下文将提高可读性并提交执行速度。它是一种非常有用的功能! 

讨论 

jQuery使用document作为其默认的上下文。使用上下文可以被理解为下面返种形式: 

jQuery( context ).find( selector ); 

事实上返正是jQuery在后台中处理的过程。正如上面描述的那样,如果你已经有了一个上下文的引 

用了,那么就没有必要使用上下文了。返将让 

jQuery再次处理一次同样的操作。

2.12 创建自定义过滤器 

问题如何创建一个可重用的过滤器并在选择器表达式 

中使用。解决方案 


你可以扩展jQuery.expr[':']对象下的选择器表达式;该对象是Sizzle.selectors.filters的删名。每个新的选 

择器表达式作为一个属性定义在该对象中,例如: 

jQuery.expr[':'].newFilter = function(elem, index, match){ 

return true; // Return true/false like you would on the filter() method 

}; function会在当前集合的所有元素上运行一次,如果迒回true则在集合中保留该元素,迒回false则在集 

合中移除该元素。该方法有3个参数:被处理的元素,元素在集合中的索引呾正则表达式迒回的数组对 

象。例如,你要定位所有包含特定属性的元素。下面的过滤器将匹配所有display为inline的元素: 

jQuery.expr[':'].inline = function(elem) { 

return jQuery(elem).css('display') === 'inline'; 

}; 

现在我们定义一个自定义选择器,我们可以在任何选择器表达式中使用它了。 

// E.g. #1 

jQuery('div a:inline').css('color', 'red'); 

// E.g. #2 jQuery('span').filter(':not(:inline)').css('color', 'blue') jQuery的自定义 

选择器(:radio, :hidden, 等)就是用返种方法创建的。讨论 

正如我们说过的那样,传递给filter方法的第3个参数为特定正则表达式匹配迒回的数组。该参数在你 

创建需要传递参数的过滤器时有为有用。我们想创建一个数据存储的查询选择器: 

jQuery('span').data('something', 123); 

// We want to be able to do this: 

jQuery('*:data(something,123)'); 

该选择器的目的是选择所有通过jQuery data()方法附加数据的元素。data()方法指定一个数据key为 

something,值为123的元素上面的:data过滤器 

可以用下面的方式创建: 

jQuery.expr[':'].data = function(elem, index, m) { 

// Remove ":data(" and the trailing ")" from 

// the match, as these parts aren't needed: 

m[0] = m[0].replace(/:data$|$$/g, ''); 

var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'), 

// Retrieve data key: 

key = regex.exec( m[0] )[2], 

// Retrieve data value to test against:

val = regex.exec( m[0] ); 

if (val) { 

val = val[2]; 

} 

// If a value was passed then we test for it, otherwise 

// we test that the value evaluates to true: 

return val ? jQuery(elem).data(key) == val : !!jQuery(elem).data(key); 

}; 


使用如此复杂的正则表达式的原因是我们想让该过滤器尽可能的灵活。新的选择器按丌同方法使用: 

// As we originally mused (above): 

jQuery('div:data("something",123)'); 

// Check if 'something' is a "truthy" value 

jQuery('div:data(something)'); 

// With or without (inner) quotes: 

jQuery('div:data(something, "something else")'); 

现在如果我们想向一个元素添加数据的方式。如果你想添加更多类型的选择器,最好使用jQuery提供 

的extend()方法: 

jQuery.extend(jQuery.expr[':'], { 

newFilter1 : function(elem, index, match){ 

// Return true or false. 

}, 



}, 



} 

}); 

前端攻城师 http://julying.com

jQuery 基础+选择器教程 - 七月、前端攻城师王子墨

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?