jQuery fuzzy selection

Original link: http://www.cnblogs.com/gaozihang/p/3859793.html

Attribute header selector (Attribute Contains Prefix Selector)

jQuery selector attribute header format is used jQuery ( '[attribute | = value]') , e.g. jQuery | ( '[herflang = en ]') will be selected in all the properties of a document containing herflang this code is executed, and herflang values to elements at the beginning of the "en", even behind the "en" followed by a hyphen "-" can also be selected.

Begin attribute selector (Attribute Starts With Selector)

the jQuery ( '[^ attribute = value]') , a value for an element selected attribute to the beginning of the string, but and jQuery ( '[attribute | = value ]') difference is that, if the latter is a value hyphen, then this element will not be selected. E.g. jQuery ( '[rel ^ = no ]') will be selected to values of all rel "no" elements at the beginning, but similar rel = "no - ****" of the element is not selected.

Properties include a selector (Attribute Contains Selector)

The basic use of the jQuery ( '[= attribute value *]') , for example, the jQuery ( '[rel * = NO]') , indicates that all elements with the rel attribute, and the value of the rel contains the substring "no" in (e.g. rel = "nofollow", rel = "yesorno" , etc.) will have been selected.

Attribute word selector (Attribute Contains Word Selector)

the jQuery ( '[~ attribute = value]') , the selector value is unique in that only the value must be an independent word (or string), e.g. jQuery ( '[rel ~ = no ]') , at the time of execution of the sentence will select elements with a rel = "yes or no", but does not select element with rel = "yesorno" of. This selector can be seen as supplements attribute contains the selectors for the time required for exact match.

Attribute selectors end (Attribute Ends With Selector)

the jQuery ( '[$ attribute = value]') , for selecting a value of a specific attribute to an element end of the string, e.g. jQuery ( '[rel $ = no ]') will select the value of the rel attribute to "no "element ending.

Equal selector attribute (Attribute Equals Selector)

the jQuery ( '[attribute = value]') , only the selected attribute values exactly equal elements, such as: the jQuery ( '[the rel = nofollow]') , only select rel = "nofollow" element, almost not possible!

Non selector attribute (Attribute Not Equal Selector)

the jQuery ( '[= attribute value!]') , and not ([attr = value]) : the same effect, for selecting the attribute value is not equal to a certain element, e.g. jQuery ( '[rel = nofollow! ]') All rel = "nofollow" elements will not be selected.

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>

Reproduced in: https: //www.cnblogs.com/gaozihang/p/3859793.html