Jquey模糊选择
属性字头选择器(Attribute Contains Prefix Selector)
jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ,例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性,并且 herflang 的值以 “en” 开头的元素,即使 “en” 后面紧跟着连字符 “-” 也能进行选择。
属性开头选择器(Attribute Starts With Selector)
jQuery(‘[attribute^=value]‘) ,用于选择属性的值以某个字符串开头的元素,但和 jQuery(‘[attribute|=value]‘) 的区别是,如果 value 的后面是一个连字符的话,这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素,但类似于 rel=”no-****” 的元素不会被选择。
属性包含选择器(Attribute Contains Selector)
基本使用方法为 jQuery(‘[attribute*=value]‘),例如 jQuery(‘[rel*=no]‘),表示所有带有 rel 属性,并且 rel 的值里包含子字符串 “no” 的元素(如 rel=”nofollow”,rel=”yesorno” 等等)都将会被选择。
属性单词选择器(Attribute Contains Word Selector)
jQuery(‘[attribute~=value]‘),这个选择器的特别之处在于 value 的值只能必须是一个独立的单词(或者是字符串),例如 jQuery(‘[rel~=no]‘) ,此句在执行的时候会选择带有 rel=”yes or no” 的元素,但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品,用于需要进行严格匹配的时候。
属性结尾选择器(Attribute Ends With Selector)
jQuery(‘[attribute$=value]‘) ,用于选择特定属性的值以某个字符串结尾的元素,例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。
属性均等选择器(Attribute Equals Selector)
jQuery(‘[attribute=value]‘) ,只选择属性的值完全相等的元素,如:jQuery(‘[rel=nofollow]‘),则只选择 rel=”nofollow” 的元素,差一点都不行!
属性非等选择器(Attribute Not Equal Selector)
jQuery(‘[attribute!=value]‘) ,和 :not([attr=value]) 的效果一样,用于选择属性不等于某个值的元素,例如 jQuery(‘[rel!=nofollow]‘),所有 rel=”nofollow” 的元素都不会被选择。
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //以指定字符开头 alert($("[id^='A_M']").length); //所有以id为"A_M"开头的,弹出6 //以指定字符结尾 alert($("[id$='_04']").length); //所有以id为"_04"结尾的,弹出4 //包含指定字符 alert($("[id*='M']").length); //所有id包含"M"的,弹出9 //指定对象内选择 alert($("div[id^='A_M']").length); //所有div以id为"A_M"开头的,弹出4 //可以在指定DOM内选择 }); // 区分大小写 </script> </head> <body> <div id="A_M_01"> <li id="A_M_01_ul"></li> </div> <div id="A_M_02"> <li id="A_M_02_ul"></li> </div> <div id="A_M_03"></div> <div id="A_M_04"></div> <div id="B_M_04"></div> <div id="C_M_04"></div> <div id="D_M_04"></div> </body> </html>