《《jQuery选择器》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《jQuery选择器》PPT课件.ppt（35页珍藏版）》请在金锄头文库上搜索。
1、第2章Jquery选择器目标l选择器简介l层次选择器l过滤选择器l表单选择器 选择器的概念lCSS选择器u它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构 ljQuery选择器ujQuery中的选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。 jQuery中的基本选择器选择器描述返回示例#id根据根据给定的定的idid匹配一个元素匹配一个元素单个元素个元素$(#test)$(#test)选取取idid为testtest的的元素元素.cla
2、ss根据根据给定的定的类名匹配元素名匹配元素集合元素集合元素$(.test)$(.test)选取所有取所有classclass为testtest的元素的元素element根据根据给定的元素名称匹配元素定的元素名称匹配元素集合元素集合元素$(p)$(p)选取所有的取所有的元素元素selector1,selector2,selector3.将每一个将每一个选择器匹配到的元素器匹配到的元素合并后一起返回合并后一起返回集合元素集合元素$(div,span,p.cls)$(div,span,p.cls)选取所取所有有，和和拥有有classclass为clscls的的标签的的一一组元素元素*匹配所有元素匹
3、配所有元素集合元素集合元素$(*)$(*)选取所有的元素取所有的元素选择器语法1、通过、通过ID选取元素选取元素语法：$(#id) 2、通过类名获取元素、通过类名获取元素 语法：$(.className)3、通过标签名获取元素、通过标签名获取元素语法：$(tagName) 4、一次性获取多个元素、一次性获取多个元素 语法：$(selector1, selector2, select3 .) 基本选择器示例l改变 id 为 one 的元素的背景色为 红色$(#one).css(backgroundColor,red);l改变元素名为 的所有元素的背景色为 # bbffaa，字体颜色为红色$(p)
4、.css(color:red,backgroundColor:#bbffaa);改变第一个元素的背景色为红色$(p).eq(0).css(backgroundColor,red);改变所有元素和 id 为 one 的元素的背景色为 # bbffaa$(h1,#one).css(backgroundColor,#bbffaa);基本选择器示例l如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器层次选择器选择器描述示例$(ancestor descendant)选取取ancestor元素里的所有元素里的所有descend
5、ant(后代后代)元素元素$(div span)选取取里的里的所有的所有的元素元素$(parent child)选取取parent元素下的元素下的child(子子)元素元素$(div span)选取取元元素下元素名是素下元素名是的的子元素子元素$(prev + next)选取取紧接在接在prev元素后的元素后的next元素元素$(div + span)选取取元元素的下一个素的下一个兄弟兄弟元素元素$(prevsiblings)选取取prev元素之后的所有元素之后的所有siblings元素元素$(divspan)选取取元元素后面的所有素后面的所有兄兄弟元素弟元素l注意: (“prev div”)
6、 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取l改变 内所有所有 的背景色为 # bbffaal$(“body div)l改变 内子子 的背景色为 # bbffaal$(“bodydiv)l改变 id 为 one 的下一个下一个 的背景色为 # bbffaa层次选择器示例l$(#one+div)l改变 id 为 two 的元素后面的所有兄弟所有兄弟的元素的背景色为 # bbffaal$(#twodiv)l改变 id 为 two 的元素所有 兄弟元素的背景色为 # bbffaa $(#two
7、). siblings(p) Left Right_1 Right_2层次选择器示例 bodyfont-size:12px;text-align:center div,spanfloat:left;border:solid 1px #ccc;margin:8px;display:none .clsFraAwidth:65px;height:65px .clsFraPwidth:45px;height:45px;background-color:#eee .clsFraCwidth:25px;height:25px;background-color:#ddd $(function() /匹配后代
8、元素 $(#divMid).css(display,block); $(div span).css(display,block); ) $(function() /匹配子元素 $(#divMid).css(display,block); $(divspan).css(display,block); )层次选择器示例$(function() /匹配后面元素 $(#divMid + div).css(display,block); $(#divMid).next().css(display,block); ) $(function() /匹配所有后面元素 $(#divMid div).css(di
9、splay,block); $(#divMid).nextAll().css(display,block); ) $(function() /匹配所有相邻元素 $(#divMid).siblings(div).css(display,block); )层次选择器示例过滤选择器l过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头l按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器基本过滤选择器选择器描述示例:first选取第一个元素取第一个元素$(div:first)选取所有取所有
10、元素中元素中第一个第一个元素元素:last选取最后一个元素取最后一个元素$(div:last)选取所有取所有元素中最元素中最后一个后一个元素元素:not(selector)去除所有与去除所有与给定定选择器匹配的元素器匹配的元素$(input:not(.myClass)选取取类名不名不是是myClass的的元素元素:even选取索引是偶数的所有元素，索引取索引是偶数的所有元素，索引从从0开始开始$(input:even)选取索引是偶数的取索引是偶数的元素元素:odd选取索引是奇数的所有元素，索引取索引是奇数的所有元素，索引从从0开始开始$(input:odd)选取索引是奇数的取索引是奇数的元素元
11、素:eq(index)选取索引等于取索引等于index的元素的元素(index从从0开始开始)$(input:eq(1)选取索引等于取索引等于1的的元素元素:gt(index)选取索引大于取索引大于index的元素的元素(index从从0开始开始)$(input:gt(1)选取索引大于取索引大于1的的元素元素:lt(index)选取索引小于取索引小于index的元素的元素(index从从0开始开始)$(input:lt(1)选取索引小于取索引小于1的的元素元素:header选取所有取所有标题元素，例如：元素，例如：h1,h2,h3等等等等$(:header)选取网取网页中所有的中所有的标题元素
12、元素l改变第一个 div 元素的背景色为 # bbffaal$(div:first)l改变id不为 one 的所有p元素的背景色为 # bbffaal$(p:not(#one)l改变索引值为偶数的 tr元素的背景色为 # bbffaal$(“tr:even)l改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaal$(“p:gt(3):odd)l改变所有的标题元素的背景色为 # bbffaal$(:header)l改变当前正在执行动画的所有元素的背景色为 # bbffaa基本过滤选择器示例页面JavaScript代码片段$(function()$(tr:even).css(bac
13、kground-color,red););这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容 内容过滤选择器选择器描述示例:contains(text)选取含有文本内容取含有文本内容为text的元素的元素$(div:contains(abc)选取含有取含有文本文本abc的的元素元素:empty选取不包含子元素或者文本的空元素取不包含子元素或者文本的空元素$(div:empty)选取不包含子元取不包含子元素素(包括文本元素包括文本元素)的的空空元素元素:has(selector)选取含有取含有选择器所匹配的元素的元素器所匹配的
14、元素的元素$(div:has(p)选取含有取含有元素元素的的元素元素:parent选取含有子元素或者文本的元素取含有子元素或者文本的元素$(div:parent)选取取拥有子元素有子元素(包括文本元素包括文本元素)的的元素元素l改变含有文本 di 的 p元素的背景色为 # bbffaal$(p:cotains(di)l改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaal改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaal$(p:has(.mini)l改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa内容过滤选择器示例
15、页面JavaScript代码片段$(function()$(tr:contains(李).css(background-color,red);$(td:empty).html(不详不详););李启俊20男男甘景花甘景花女女李清峰20男男曾海兵曾海兵男男 可见性过滤选择器选择器描述示例:hidden选取所有不可取所有不可见的的元素元素$(:hidden)选取所有不可取所有不可见的元素。的元素。包括包括，和和等元素。如果只等元素。如果只想想选取取元素，可以使用元素，可以使用$(input:hidden):visible选取所有可取所有可见的元的元素素$(div:visible)选取所有可取所有可见
16、的的元元素素属性过滤选择器选择器描述示例attribute选取取拥有此属性的元素有此属性的元素$(divid)选取取拥有属性有属性id的的元素元素attribute=value选取属性的取属性的值为value的元素的元素$(divtitle=test)选取属性取属性title为test的的元素元素attribute!=value选取属性的取属性的值不等于不等于value的元素的元素$(divtitle!=test)选取属性取属性title不等于不等于test的的元素元素(注意：没有属性注意：没有属性title的的元素也会被元素也会被选取取)attribute=value选取属性的取属性的值以以
17、value开始的元素开始的元素$(divtitle=test)选取属性取属性title以以test开始的开始的元素元素attribute$=value选取属性的取属性的值以以value结束的元素束的元素$(divtitle$=test)选取属性取属性title以以test结尾的尾的元素元素attribute*=value选取属性的取属性的值含有含有value的元素的元素$(divtitle*=test)选取属性取属性title含有含有test的的元素元素selector1selector2selector3用属性用属性选择器合并成一个复合属性器合并成一个复合属性选择器，器，满足多个条件。每足多
18、个条件。每选择一次，一次，缩小一次范小一次范围$(dividtitle$=test)选取取拥有属性有属性id，并且属性，并且属性title以以test结尾的尾的元素元素l选取下列元素,改变其背景色为 # bbffaal含有属性title 的div元素.l属性title值等于test的div元素.l属性title值不等于test的div元素(没有属性没有属性title的也的也将被选中将被选中).l属性title值 以te开始 的div元素.l属性title值 以est结束 的div元素.l属性title值 含有es的div元素.l选取有属性id的div元素，然后在结果中选取属性title值含有“
19、es”的 div 元素.属性过滤选择器示例页面JavaScript代码片段$(function()var msg = ;msg += 表单中有表单中有+ $(inputtype=text).size() +个文本框个文本框rn;msg += $(inputtype=checkbox).size() + 个复选框个复选框rn;msg += $(inputtype=radio).size() + 个单选按钮个单选按钮;alert(msg);); 子元素过滤选择器选择器描述示例:nth-child(index/even/odd/equation)选取每个父元素下的第取每个父元素下的第index个子元
20、素或个子元素或者奇偶元素者奇偶元素(index从从1算起算起):eq(index)只匹配一个元素，而只匹配一个元素，而:nth-child将将为每一个父元素匹配子每一个父元素匹配子元素，并且元素，并且:nth-child(index)的的index是从是从1开始的，而开始的，而:eq(index)是从是从0算起的算起的:first-child选取每个父元素的第一个子元素取每个父元素的第一个子元素:first只返回只返回单个元素，而个元素，而:first-child选择符将符将为每个父元素匹配第每个父元素匹配第一个子元素。例如一个子元素。例如$( ul li:first-child);选取每个取
21、每个中第一个中第一个元素元素:last-child选取每个父元素的最后一个子元素取每个父元素的最后一个子元素同同样，:last只返回只返回单个元素，而个元素，而:last-child选择符将符将为每个父元每个父元素匹配最后一个子元素。例如素匹配最后一个子元素。例如$( ul li:last-child);选择每个每个中最后一个中最后一个元素元素:only-child如果某个元素是它父元素中唯一的子元如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素素，那么将会被匹配。如果父元素中含有其他元素，中含有其他元素，则不会被配置不会被配置$( ul li:only-child)在在中中选
22、取取是唯一子元素的是唯一子元素的元素元素l选取下列元素,改变其背景色为 # bbffaal每个class为one的div父元素下的第2个子元素.l每个class为one的div父元素下的第一个子元素l每个class为one的div父元素下的最后一个子元素l如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素子元素过滤选择器示例页面JavaScript代码片段$(function()$(table tr:nth-child(3n).css(background-color,red);$(tr td:last-child).css(background-color,red
23、););1234123412341234123412341234123412341234 表单元素选择器选择器描述示例:input选取所有的取所有的、和和元素元素$(:input)$(:input)选取所有的取所有的、和和元素元素:text选取所有的取所有的单行文本框行文本框$(:text)$(:text)选取所有的取所有的单行文本框行文本框:password选取所有的密取所有的密码框框$(:password)$(:password)选取所有的密取所有的密码框框:radio选取所有的取所有的单选按按钮$(:radio)$(:radio)选取所有的取所有的单选按按钮:checkbox选取所有的复
24、取所有的复选框框$(:checkbox)$(:checkbox)选取所有的复取所有的复选框框:submit选取所有的提交按取所有的提交按钮$(:submit)$(:submit)选取所有的提交按取所有的提交按钮:image选取所有的取所有的图像按像按钮$(:image)$(:image)选取所有的取所有的图像按像按钮:reset选取所有的重置按取所有的重置按钮$(:reset)$(:reset)选取所有的重置按取所有的重置按钮:button选取所有的按取所有的按钮$(:button)$(:button)选取所有的按取所有的按钮:file选取所有的上取所有的上传控件控件$(:file)$(:fi
25、le)选取所有的上取所有的上传控件控件:hidden选取所有不可取所有不可见元素元素$(:hidden)$(:hidden)选取所有的不可取所有的不可见元素，元素，已已经在可在可见性性过滤选择器中器中讲解解过表单对象属性过滤选择器选择器描述示例:enabled选取所有可用元素取所有可用元素$(#form1 :enabled)$(#form1 :enabled)选取取idid为form1form1的表的表单内的所内的所有可用元素有可用元素:disabled选取所有不可用元素取所有不可用元素$(#form1 :disabled)$(#form1 :disabled)选取取idid为form1for
26、m1的表的表单内的内的所有不可用元素所有不可用元素:checked选取所有被取所有被选中的元素中的元素( (单选按按钮，复，复选框框) )$(input:checked)$(input:checked)选取所取所有被有被选中的中的元素元素:selected选取所有被取所有被选中的中的选项元元素素( (下列列表下列列表) )$(select :selected)$(select :selected)选取所有被取所有被选中的中的选项元元素素表单对象属性过滤选择器示例页面JavaScript代码片段function doDelete()if($(:checkbox:checked).length = 0)alert(请至少选择一条数据请至少选择一条数据!);elsealert(删除成功删除成功!);总结l选择器简介l层次选择器l过滤选择器l表单选择器 作业l1. 给网页中所有的 元素添加 onclick 事件l2. 是一个特定的表格隔行变色l3. 对多选框进行操作, 输出选中的多选框的个数作业l简述选择器的概念。l简述选择器的分类。l简述选择器:first和:first-child的区别。l简单属性过滤选择器的用法。
