[02JQuery选择器.pptVIP

JQuery选择器 主讲：毛丽娟 jQuery的工作原理 以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。 jQuery选择器的类别 基本选择器/CSS选择器 元素选择器 属性选择器 伪类选择器 自定义选择器 位置选择器 过滤选择器 jQuery支持的CSS选择器 jQuery支持的CSS选择器 元素选择器-语法 jQuery 使用 CSS 选择器来选取 HTML 元素。 $(p) 选取 p 元素。 $(ro) 选取所有 class=intro 的 p 元素。 $(p#demo) 选取 id=demo 的第一个 p 元素。 实例02-01：元素选择器-页面结构 实例02-01：jquery处理 // Add a class to top-level list items. $(document).ready(function() { $(#selected-plays li).addClass(horizontal); }); 实例02-01：样式 .horizontal { float: left; list-style: none; margin: 10px; } 练习：为实例02-01添加子菜单样式。 页面浏览效果： 练习：为实例02-01添加子菜单样式。 子菜单样式代码： .sub-level { background: #ccc; } jQuery代码： //2.添加2级菜单样式 $(ul ul).addClass(sub-level); 元素选择器-练习 选中页面上的所有段落元素，给其添加新样式，如：添加5px宽的红色实线圆角边框。 属性选择器-语法 语法：$(“标记[属性名]”) jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $([href]) 选取所有带有 href 属性的元素。 $([href=#]) 选取所有带有 href 值等于 # 的元素。 $([href!=#]) 选取所有带有 href 值不等于 # 的元素。 $([href$=.jpg]) 选取所有 href 值以 .jpg 结尾的元素。 属性选择器-举例 举例：在页面中如果希望选择设置了title属性的超链接元素，语法如下： $(“a[title]”) 举例：如果要为上面选择的a元素添加制定样式，语法如下： $(“a[title]”).addClass(“myClass”); 举例：在同一个$( )结构中，可以用“,”来连接多个不同的选择器，如： $(“div,p”) $(“div[title],img[alt]”) 练习： 如何给页面中链接地址为“10-9.html”的a元素添加样式myClass？ $(“a[href=10-9.html]”).addClass(“myClass”); 如何将页面中所有的外部链接样式指定为myClass？ $(“a[href^=http://]”).addClass(“myClass”); 实例02-02：属性选择器-见教材p15图2-4。 浏览效果： 实例02-02：jquery处理。 // Add a class to links. $(document).ready(function() { $(a[href^=mailto:]).addClass(mailto); $(a[href$=.pdf]).addClass(pdflink); $(a[href*=henry][href!=mailto:henryiv@king.co.uk]).addClass(henrylink); }); jQuery自定义选择器 jQuery自定义选择器 伪类选择器-反向过滤的实现 语法：:not(selector) 参数：不用引号括起。 功能：去除所有与给定选择器匹配的元素。 举例： input:not(:radio)表示选择页面中所有的非radio元素。 过滤选择器的迭加使用$(“:input:not(:checkbox):not(:radio)”).addClass(“myClass”);表示选择所有表单元素（包括inputselecttextareabutton）中非checkbox和非radio的元素。 实例02-03：添加子菜单样式。 改写实例02-01代码： $(document).ready(function() { $(#selected-plays li).addClass(horizontal); $(#selected-plays li:not(.horizontal)).addClass(sub-level); }); 实例02-04：位置选择器的应用。 实例