JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

时间:2021-12-16 09:46:33

我们在使用 JQuery 的时候,有时需要选择多个属性以指定字符串开头或者包含某些字符串的时候。

比如,我们一个页面中,所有的被罚款人的 input 输入框的 id 或者 name命名规则如下:

都以 beFineMan 开头,然后后面依次加上不同的数字,例如这样

<input id="beFinedMan1" name="beFinedMan1" />
<input id="beFinedMan2" name="beFinedMan2" />
<input id="beFinedMan3" name="beFinedMan3" />

那么,选择所有的被罚款人输入框中的 value,我们就需要使用模糊匹配。

JQuery API 提供的模糊匹配方法常用的有如下几个:

1、选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的元素

(Attribute Contains Prefix Selector [name|="value"])                                                           例子请见博客底部 例1.

2、选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)

(Attribute Contains Selector [name*="value"] )                                                                    例子请见博客底部 例2.

3、选择指定属性用空格分隔的值中包含一个给定值的元素

(Attribute Contains Word Selector [name~="value"] )                                                         例子请见博客底部 例3.

4、选择指定属性是以给定值结尾的元素。这个比较是区分大小写的

(Attribute Ends With Selector [name$="value"] )                                                                                    例子请见博客底部 例4.

5、选择指定属性是给定值的元素

(Attribute Equals Selector [name="value"])                                                                          例子请见博客底部 例5.

6、选择不存在指定属性,或者指定的属性值不等于给定值的元素

(Attribute Not Equal Selector [name!="value"])                                                                    例子请见博客底部 例6.

7、选择指定属性是以给定字符串开始的元素

(Attribute Starts With Selector [name^="value"])                                                                 例子请见博客底部 例7.

例1:
jQuery( "[attribute|='value']" )
attribute: 一个属性名.
value: 一个属性值,引号是可选的. 可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找hreflang属性值是英语的所有链接

<!DOCTYPE html>
<html>
<head>
    <style>
        a { display: inline-block; }
    </style>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
<script>
    $('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例2:
jQuery( "[attribute*='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有 input 的 name 属性中带有 'man' 的元素,并将它们的值设为一些文本

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例3:
jQuery( "[attribute~='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有属性中含有 'man' 这个单词的文本框,并且修改其文本值

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例4:
jQuery( "[attribute$='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有的属性名称以“letter”的结束,并把他们的文字输入

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例5:
jQuery( "[attribute='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有属性值为 'Hot Fuzz' 的 input 元素,并且将跟在它后面的 span 元素中的文本修改成 " Hot Fuzz"

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
    <label>
        <input type="radio" name="newsletter" value="Hot Fuzz" />
        <span>name?</span>
    </label>
</div>
<div>
    <label>
        <input type="radio" name="newsletter" value="Cold Fusion" />
        <span>value?</span>
    </label>
</div>
<div>
    <label>
        <input type="radio" name="newsletter" value="Evil Plans" />
        <span>value?</span>
    </label>
</div>
<script>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例6:
jQuery( "[attribute!='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有 name 属性不是 'newsletter' 的元素,并在其后的 span 中追加 '; not newsletter' HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name is newsletter</span>
</div>
<div>
    <input type="radio" value="Cold Fusion" />
    <span>no name</span>
</div>
<div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name is accept</span>
</div>
<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>
</body>
</html>
结果如下:

JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )

例7:
jQuery( "[attribute^='value']" )
attribute: 一个属性名.
value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。

例:查找所有 input 中 name 属性以 'news' 开头的元素,并将它们的值设置为一些文本

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
</body>
</html>
结果如下:
JQuery 模糊匹配(JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 )