开发者学堂课程【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"); })
刷新,第三个输入框加入了值。