开发者学堂课程【jQuery 开发教程:jQuery_属性选择器】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4276
jQuery_属性选择器
1.Attribute Contains Prefix Selector [namel="value"]
描述∶选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“ ”)的元素。
语法∶$( "[attributel='value']")
注意:引号是可选的.可以是一个不带引号的一个单词或带一个引号的字符串。
举例:
写入a 标签加入内容并复制一个:
<a href=""#" hreflang="en">英文</a>
<a href=""#" hreflang="zh">中文</a>
Hreflang 是指定被链接文档的语言,仅在使用 href 属性的时候才可以使用。
引入 jQuery:<script src="jquery-2.2.1.min.js">< /script>
让“en”标签中的英文变为红色:
<script>
$ ( function( ) {
$ ( "[hreflang=en]" ).css( "color" , "red");
})
执行,英文变为了红色。
2.Attribute Contains Selector [name*="value"]
描述︰选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)
语法︰$( "[attribute*= 'value']" )
3.Attribute Contains Word Selector [name~ ="value"]
描述︰选择指定属性用空格分隔的值中包含一个给定值的元素。
语法:$( "[attribute~ ='value']" )
举例:
首先在 <body>里写入几个输入框,加入name属性:
<body>
<input name="man-news" / >
<input name="milk man" / >
<input name="letterman2" />
<input name="newmilk" / >
选择第二个输入框,并加入值(’mr.man is in it!’):
<script>
$ ( function() {
s ( "input[name~= ' man ' ]" ).val( ' mr.man is in it: ');
})
执行只有第二个输入框被选中。
4.Attribute Ends With Selector [name$ ="value"]
描述:选择指定属性是给定值的元素。
语法∶$( "[attribute ='value']")
5.Attribute Not Equal Selector [name!= "value"]
描述︰选择不存在指定属性,或者指定的属性值不等于给定值的元素。
语法:$("[attribute!= 'value']")
6.Attribute Ends With Selector [name$="value"]
描述∶选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
语法:$( "[attribute$='value']" )
7.Attribute Starts With Selector [name个 = "value"]
描述︰选择指定属性是以给定字符串开始的元素。
语法∶$( "[attribute个='value']" )
8.Has Attribute Selector [name]
描述∶选择所有具有指定属性的元素,该属性可以是任何值。
语法∶$( "[attribute]" )
9.Multiple Attribute Selector [name="value"][name2="value2"]
描述∶选择匹配所有指定的属性筛选器的元素。
语法:$( "[attributeFilter1][attributeFilter2][attributeFilterN]" )
举例:
<body>
<input name="man-news" id="man-news" / >
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk"/ >
查找有 id 属性且 name 属性是以 man 结尾的输入框,并将它们的值设为“only this one”:
<script>
$ ( function() i
$ ( "input[id] [name$=' man ' ]").val( "only this one");
})
刷新,第三个输入框加入了值。