1、JQuery选择器,.NET4班 一组组员：陈龙宽、秦磊、程小娇、王娅、张德婷、宁雷、况建伟、罗冠骁,锋利的JQuery,锋利的JQuery,知识回顾,Jquery有哪些优势？在页面中如何引入Jquery？关于$(document).ready()函数,轻量级、强大的选择器、出色的DOM操作封装、可靠的事件处理机制、完善的Ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层与结构层分离、丰富的插件支持、完善的文档、开源。,在编写页面代码中标签内引入jQuery库后就可以使用Jquery了,1.所有在页面运行得JavaScript函数，就必须写在该函数中 2.每个页面可以
2、有多个$(document).ready()函数 3.可以使用$(function().)来代替$(document).ready()函数，作为缩写形式,本章任务,了解JQuery选择器和CSS选择器的区别 掌握JQuery基本选择器 掌握JQuery层次选择器 掌握JQuery过滤选择器 了解其他选择器,锋利的JQuery,本章课程,锋利的JQuery,2.1 选择器是什么,Jquery选择器： jquery选择器按照功能主要分为”选择“和”过滤。并且是配合使用的。可以同时使用组合成一个选择器字符串,同时是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面
3、进行设置 CSS选择器： 它是一项出色的技术,它使得网页结构和表现样式完全分离，CSS选择器共有标签选择器、ID选择器、类选择器等等。如果要让样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元 素就是通过CSS选择器进行控制的，添加使用不同的CSS规则,就可以得到各种不同网页样式,CSS选择器,常用的CSS选择器,标签选择器ID选择器类选择器群组选择器后代选择器通配选择符,以文档元素作为选择符,以文档元素的惟一标识的ID作为选择符,以文档元素的Class作为选择符,多个选择符应用同样的样式规则,元素E的任意后代元素F,以文档的所有元素作为
4、选择符,锋利的JQuery,基本选择器 层次选择器 表单选择器,过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表达对象属性过滤选择器,jQuery选择器,jQuery分别有3个选择器，6个过滤选择器选择器,每个层次选择器使用之前都会有一个“$”符号,锋利的JQuery,相同点与不同点,都是用于html网页样式 布局,相同点：,区别：,CSS选择器:css中很多选择 器是IE6所不支持的. jQuery选择器:可以非常便捷和 快速的找出特定的DOM元素无 需担心浏览的是否支持。,1、简单的写法$()函数在很多JavaScript类库中都被作为一个选择器函数来使用
5、，在jQuery中也不例外。其中，$(“#ID”)使用代document.getElementById()函数，即通过ID获取元素：$(“tagName”)用来代替document.getElementByTagName()函数，通过标签名获取HTML元素*选择器的写法可以参见第2.3节。,2.2 JQuery选择器的优势,锋利的JQuery,锋利的JQuery,2.2 JQuery选择器的优势,2、支持CSS1到CSS3选择器jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时它也是少量独有的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常
6、容易的事，而对于没有接触过CSS技术的开发人员来说，在学习jQuery选择器的同时也可以掌握CSS选择器的基础规则。 使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中，开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。,注意：为了能有更快的选择器解析速度，从1.1.3.1版本后，jQuery废除了不需要常用的XPath选择器，但在引用相关插件后，依然可以至此XPath选择器。,锋利的JQuery,3、完善的处理机制使用jQuery选择器不仅比使用传统的getElementById()和getElementByTagName()函数
7、简洁得多，而且还能避免某些错误。看下面这个例子：,test Document.getElementById(“tt”).style.color=“red”; ,2.2 JQuery选择器的优势,运行这段代码。浏览器就会报错，原因是网页中没有id为“tt”的元素，改进后的代码如下： test If(Document.getElementById(“tt”).) Document.getElementById(“tt”).style.color=“red”; ,锋利的JQuery,如上一页的改进后代码。这样就可以避免浏览器报错，但如果要操作的元素很多，可能对每个元素都要进行一次判断，大量重复的工作
8、会使开发人员感到厌倦，而jQuery在这方面问题上的处理是非常不错的，即使用jQuery获取网页中不存在的元素也会报错。看下面的例子：,test $(#tt).css(“color”,”red”); ,2.2 JQuery选择器的优势,有了这个预防措施，即使以后因为某些原因删除网页上某个以前使用过的元素，也不用担心这个网页的JavaScript代码会报错。,锋利的JQuery,2.2 JQuery选择器的优势,需要注意的是，$(“#tt”)获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在是，不能使用以下代码：,If($(“#tt”) /do somet
9、hing ,而应该根据获取到元素的长度来判断，代码如下： If($(“#tt”).length0) /do something ,或者转化成DOM对象判断，代码如下： If($(“#tt”)0) /do something ,选择器分类,2.3 选择器,锋利的JQuery,2.3.1 基本选择器,基本选择器是JQuery中最常用的选择器，也是最简单的，它通过id,class和标签等来查找DOM元素。,锋利的JQuery,2.3.2 层次选择器,层次选择器是通过DOM元素之间的层次关系来获取特定元素的，列如后代元素、子元素、相邻元素和兄弟元素用层次选择器来获取都是非常不错的,锋利的JQuery,
10、注意事项,在Jquery中，为了使用户更加灵活地操作表单，Jquery中专门加入了表单选择器。利用这个选择器，可以获取到下一个临近的或者同级的兄弟元素。 当然也包括 :hidden 匹配所有隐藏域 查找所有隐藏域：$(“:hidden”),锋利的JQuery,2.3.3 表单选择器,2.3.4 过滤选择器,什么是过滤选择器？过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素，过滤过则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。,过滤选择器,内容过滤,可见
11、性过滤,属性过滤,子元素过滤,表单对象属性过滤,基本过滤,2.3.4 基本过滤选择器,基本过滤器,:first 选取第一个元素 返回单个元素:last 选取最后一个元素 返回单个元素:not(选择器名) 去除所有给定选择器匹配的元素 返回集合元素:even 选取索引是偶数的所有元素，索引从0开始 返回集合元素:odd 选取索引是偶数的所有元素，索引从0开始 返回集合元素:eq(索引值) 选取索引等于索引值的元素(索引值从0开始) 返回单个元素:gt(索引值) 选取索引大于索引值的元素(索引值从0开始) 返回集合元素:lt(索引值) 选取索引小于索引值的元素(索引值从0开始) 返回集合元素:he
12、ader 选取所有的标题元素 如 h1 h2 h3 等 返回集合元素:animated 选取当前正在执行动画的所有元素 返回集合元素,2.3.4 基本过滤选择器示例,:first 示例:last 示例:not 示例:even 示例,div:first 选取第一个元素,div:not(.one) 选取class不为one的元素,div:last 选取最后一个元素,div:even 选取索引值为偶数的元素,2.3.4 基本过滤选择器示例,:odd 示例:eq 示例:gt 示例:lt 示例,div:odd 选取索引值为奇数的元素,div:eq(3) 选取索引值等于 3 的元素,div:gt(3) 选
13、取索引值大于 3 的元素,div:lt(3) 选取索引值小于 3 的元素,2.3.4 基本过滤选择器示例,:header 示例:animated 示例,:header 选取所有的标题元素,Span#mover(:animated) 选取id为mover的span标签里面正在执行动画的元素,2.3.4 内容过滤选择器,内容过滤器内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上，介绍说明如下：,:contains(文本值) 选取含有文本内容的元素 返回集合元素:empty 选取不包含元素或者文本的空元素 返回集合元素:has(选择器) 选取含有选择器有匹配的元素的元素 返回集合元素:
14、parent 选取含有子元素或者文本的元素 返回集合元素,2.3.4 内容过滤选择器示例,:contains 示例:empty 示例:has 示例:parent 示例,div:contains(di) 选取里所有包含“di”文本的元素,div:empty 选取里所有不包含子元素或者文本为空的元素,div:has(.mini) 选取里class为 .mini 的元素,div:parent 选取里所含有子元素(包括文本元素)的元素,2.3.4 可见性过滤选择器,可见性过滤选择器可见性过滤选择器是根据元素的课件和不可见状态来选择相应的元素，介绍说明如下：,：hidden 选取所有不可见的元素 返回集
15、合元素：visible 选取所有可见元素 返回集合元素,2.3.4 可见性过滤选择器,:hidden 示例:visible 示例因为.show()方法是一种动态展开的效果所以无法截图，稍后在VS2008展示.,div:visible 选取里所有可见元素,div:hidden 选取里所有不可见元素,2.3.4 属性过滤选择器,属性过滤器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素，介绍说明如下：,attribute 选取拥有此属性的元素 返回集合元素attribute=value 选取属性为等于 value 的元素 返回集合元素attribute!=value 选取属性值不等于val
16、ue的元素 返回集合元素attribute=value 选取属性值以value开始的元素 返回集合元素attribute$=value 选取属性值以value结束的元素 返回集合元素attribute*=value 选取属性值含有value的元素 返回集合元素selector1selector2selectorN 用属性选择器合并成一个复合属性选择 器满足多个条件，用于缩小选择范围,2.3.4 属性过滤选择器示例,attribute 示例attribute=value 示例attribute!=value 示例attribute=value 示例,divtitle=te 选取里所有title属
17、性以 te 开头的元素,divtitle!=test 选取里所有title属性不等于test的元素,divtitle=test 选取里所有title属性等于test的元素,divtitle 选取里所有title属性的元素,2.3.4 属性过滤选择器示例,attribute*=value 示例attribute$=value 示例selector1selector2 复合属性选择器示例,divtitle$=st 选取里所有title属性值以 st 结束的元素,dividtitle!=test 选取里所有id属性和title属性包含es的元素,这种使用复合属性选择器，作用是缩小选取范围,divti
18、tle*=e 选取里title所有属性值包含 e 的元素,2.3.4 子元素过滤选择器,子元素过滤选择器子元素过滤选择器的过滤过滤规则相对亦其他的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也是非常简单的，另外还要注意它与普通的过滤选择器的区别，介绍说明如下：,: nth-child(even/odd/index/indexN/indexN+1) 选取每个父元素下的第 index个子元素或者奇偶数元素（index从1开始） 返回集合元素: first-child 选取每个父元素的第一个子元素 返回集合元素: last-child 选取每个父元素的第一个子元素
19、 返回集合元素:only-child 如果某个元素是它父元素中唯一的子元素，那个子元素则会 被选中，如果没有或者多于一个子元素,那么那些子元素会被无视,2.3.4 子元素过滤选择器示例,：nth-child(even)示例：nth-child(odd)示例：nth-child(index)示例：nth-child(indexN)示例,div.one :nth-child(even) 选取里class为one的子元素索引是偶数的元素,div.one :nth-child(3n) 选取里class为one的子元素索引为2的倍数的元素,div.one :nth-child(2) 选取里class为o
20、ne的子元素索引为2的元素,div.one :nth-child(odd) 选取里class为one的子元素索引是奇数的元素,2.3.4 子元素过滤选择器示例,：nth-child(indexN+1)示例：last-child示例：first-child示例：only-child示例,div:only-child 选取里只有一个子元素的元素,有多个子元素则无视,div.one :nth-child(3n+1) 选取里class为one的子元素索引为3的倍数 +1 的元素,div:last-child 选取里最后一个子元素,div:first-child 选取里第一个子元素,2.3.4 表单对象
21、属性过滤选择器,表单对象属性过滤选择器表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，如 下拉框、多选框等 ，介绍说明如下：,:enabled 选取所有可用的元素 返回集合元素:disabled 选取所有不可用的元素 返回集合元素:checked 选取所有被选中的元素(单选框，复选框) 返回集合元素:selected 选取所有被选中的选项元素(下拉列表) 返回集合元素,2.3.4 对象属性过滤选择器,:enabled 示例:disabled 示例:checked 示例:selected 示例,input:selected 选取里所有属性为selected的元素,#form1 input
22、:disabled 选取id为form1表单里所有可用的元素,#form1 input:enabled 选取id为form1表单里所有可用的元素,input:checked 选取里所有属性为checked的元素,2.4 JS和JQuery的对比1,简单的jQuery代码：,书写方式类似于CSS样式表,两种方式达到同一效果,案例1：JavaScript的onclick事件：,2.4 JS和JQuery的对比2.1,案例2：JavaScript使一个特定的表格隔行变色,获得id为tb的元素（table）,获取表格的第一个tbody元素,获得tbody下所有的tr元素,循环tr元素,判断取模,改变符
23、合条件的tr元素的背景色,锋利的JQuery,2.4 JS和JQuery的对比2.2,案例2：jQuery使一个特定的表格隔行变色：,代码：,两种方法效果完全一致！,（1）获取id为tbj的元素，然后寻找它下面的标签， 再寻找tbody下索引值为偶数的tr元素 （2）改变背景颜色,用来设置jQuery对象的样式,锋利的JQuery,2.4 JS和JQuery的对比3.1,案例3：对多选框进行操作，输出选中多选框的个数,以上代码做了以下工作： （1）进入onclick()事件（2）新建一个数组， （3）获取所有name为“check”的多选框 （4）循环判断多选框是否被选中，如果被选中则添加到数
24、组中 （5）输出数组长度！,2.4 JS和JQuery的对比3.2,案例3：对多选框进行操作，输出选中多选框的个数,先使用属性选择器，然后用表单对象属性过滤，最后获得jQuery对象的长度！,锋利的JQuery,2.4 案例小结,jQuery 强调的理念是写得少，做得多（write less， do more）jQuery独特的选择器、连接式的DOM操作、事件处理机制和封装完善的Ajax都是其他Javascript库望尘莫及的。,锋利的JQuery,2.5 选择器中的一些注意事项,普通方式处理,解决办法,bb cc,$(#id#b); $(#id1);,$(#id#b); $(#id1);,H
25、TML代码,锋利的JQuery,根据W3C的规定,属性值中不能含有“#“、“.“、“（“、“等特殊字符,2.5 属性选择器的引号问题,$( divtitle=“test“ );,$( divtile=“test“ );,错误,正确,1.3.1版本彻底放弃了1.1.0版本一留下的符号, 如果你使用1.3.1以上的版本则不需要考虑此问题,锋利的JQuery,2.5 选择器中含有空格的注意事项,HTML代码,aa bb cc ddee ff,使用jQuery选择器获取,锋利的JQuery,var $t_a = $(.test :hidden);/带空格对JQuery选择器 var $t_b = $(
26、.test:hidden);/不带空格对JQuery选择器var len_a = $t_a.length; /输出4 var len_b = $t_b.length;/输出3,2.5 结果分析,var $t_a = $(.test :hidden); /带空格的,var $t_b = $(.test:hidden); /不带空格的,选取class为“test“的元素里面的隐藏元素,选取隐藏的class为“test“的元素,原因:后代选择器与过滤器的不同,锋利的JQuery,2.6 案例分析,下面来看一下某个网站的导航功能,初始状态,单击显示全部按钮之后的状态,锋利的JQuery,锋利的JQue
27、ry,2.6 案例分析,实现以上效果的步骤,1、获得需要隐藏的元素 2、然后给按钮添加一个单击事件 3、在单击事件中判断获取的元素的状态 4、根据获取元素的状态，将内容显示或隐藏， 然后修改按钮的显示文本以及样式， 并且修改品牌的样式。 5、单击事件返回false，让超链接不跳转,2.6 案例分析,var $category = $(ul li:gt(5):not(:last);$category.hide();$btnshow = $(div.showmorea);,获取下的索引大于5且不是最后一个元素的集合， 然后将这些元素隐藏,获取“显示全部品牌”按钮,锋利的JQuery,2.6 案例分
28、析,$category.show(); $(.showmore a span).css(color, red).text(“精简显示品牌“); $(ul li).filter(“:contains(佳能),:contains(三星),:contains(索尼)“).addClass(“promoted“);,当$category中的元素为隐藏的时候，单击按钮执行的代码。首先是将$category中的元素显示，然后修改$btnshow的样式，和显示的文本。最后就是添加推荐品牌的高光样式。,锋利的JQuery,锋利的JQuery,2.7 其他选择器,2.7.1 jQuery提供的选择器的扩展虽然j
29、Query提供了许多实用的选择器,但还是有可能不能满足各种多变的业务需要，不过jQuery选择器是可以进一步扩展的。1.MoreSelectors for jQuery2.Basic XPath,MoreSelectors for jQuery这是一个jQuery的插件，用于增加更多的选择器，例如.color可以匹配颜色，:colIndex可以匹配表格中的列，:focus可以匹配获取焦点的元素等等。 $(“DIV:color(red)“) to match DIVs with red text. Handles #rrggbb and rgb(r,g,b) too. $(“TD:colInde
30、x(1)“) to match table cells in column 1 (allowing for colSpans too). $(“INPUT:modified“) to match INPUTs that have been changed. $(“FORM/*:blur“) to match form element that last had the focus. $(“DIV:parents(TD)“) - Match DIVs that are inside table cells. $(“DIV“).attrs(“id“) - Return an array of ID
31、s from all the DIVs. $(“TH“).filter(colSpan:2, title:“abc“) - An enhancement to the .filter() method to optionally filter by attributes provided in name:value object notation . and many more插件地址：http:/ XPath这个插件可以让用户使用基本的XPath。jQuery最开始支持XPath选择器，但由于使用人数不多，且降低了选择器匹配的效率，因此在1.2以后的版本中取消了默认对XPath选择器的支持，
32、改为通过插件来实现。 XPath Path Expressions(路径表达式) XPath uses path expressions to select nodes(节点) or node-sets(节点集) in an XML document. These path expressions look very much like the expressions you see when you work with a traditional computer file system. XPath通过路径表达式来选择XML文档中的节点或节点集,这些表达式很像那些传统的电脑文件系统的表达式
33、 插件地址：http:/ 其他选择器,2.7.2 其他使用CSS选择器的方法 除了jQuery提供了强大的选择器支持外，也有其他一些JavaScript脚本也提供了此类纯粹的CSS选择器的支持。1.document.getElementsBySelector()2.cssQuery()3.querySelectorAll(),document.getElementsBySelector()早在2003年，Simon Willison就编写了该脚本,document.getElementsBySelector 是一个xhtml的javascript函数，它通过标准css 选择器来获取文档中匹配该
34、选择器的一个元素数组，例如：document.getElementsBySelector(div#main p a.external) 获取文档中id为main的div层中段落p中的 所有应用样式external 的a锚点 数组（一个或多个）。该脚本最新版本为0.4版，更新日期为2003年3月25日。 发布地址：http:/ 这是Dean Edwards编写的一款利用Css选择器查找元素的脚本。支持所有CSS1、 CSS2以及部分CSS3选择器，jQuery的选择器其实是源自于此，它支持一些jQuery尚不支持的选择器，例如 E:link、E:nth-last-child(n)、E:root、
35、E:lang(fr)、E:target 和Efoo|=“bar”等。 语法结构如下： elements = cssQuery(selector,from); 该脚本最新版本为2.0.2版，更新日期为2005年9月10日。 官方网站：http:/dean.edwards.name/my/cssQuery/。,querySelectorAll()这不是一个脚本库，而是 W3C 在 Selectors API草案中提到的方法，该草案的最新版本是在2007年12月21日发布的。此方法也是用于实现通过CSS选择器来获取元素的。IE8的Beta2中已经率先实现此方法。相信其他几大浏览器也很快就能实现此方法
36、。JQuery的作者John Resig也表示将会利用querySelectorAll()这个浏览器原生的方法来重构jQuery的选择器，同时增加一节jQuery扩展的选择器，届时jQuery选择器的执行效率也将大大提高。 语法结构：baseElement.querySelectorAll(selector) 这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点W3C Selectors API:http:/www.w3.org/TR/selectors-api/。,本章详细讲解了jQuery中的各种类型的选择器。,本章总结,锋利的JQuery,基本选择器,层次选
37、择器,表单选择器,过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表达对象属性过滤选择器,选择器是行为与文档内容之间连接的纽带，选择器的最终目的就是能够轻松地找到文档中的元素。在本章的开始列举了3个用传统JavaScript方法写的简单例子，然后介绍了jQuery选择器，并用所学的jQuery选择器以及隐式迭代的特性将例子进行改写。此外还讲解了选择器中的一些注意事项。最后以一个网站的品牌列表作为例子，加深大家对选择器用法的理解。,锋利的JQuery,提问,1.jQuery有哪几种选择器？（请至少列举出五种）,基本、层次、表单、过滤、内容过滤、可见性过滤、属性过滤 、子元素过滤、表达对象属性过滤选择器。,2.jQuery选择器和CSS选择器的相同点和不同点是什么？,相同点：都是用于html网页样式布局。不同点:(1)CSS选择器:css中很多选择器是IE6所不支持的。(2) jQuery选择器:可以非常便捷和快速的找出特定的DOM元素无需担心浏览的是否支持。,3.jQuery选择器的优势有哪些？,（1）写法简单 （2）支持CSS1到CSS3选择器（3）处理机制完善，可以避免一些使用CSS选择器易犯的错误,只要掌声，不要尖叫，因为我们低调。,
