jQuery_属性选择器|学习笔记

简介: 快速学习 jQuery_属性选择器

开发者学堂课程【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");
})

执行,英文变为了红色。

图片1.png


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: ');
})

执行只有第二个输入框被选中。

图片2.png

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");
})

刷新,第三个输入框加入了值。

图片3.png

相关文章
|
3月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
8月前
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
9月前
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
12月前
|
JavaScript 前端开发 索引
JavaScript学习笔记(五) jQuery
JavaScript学习笔记(五) jQuery
70 0
|
Web App开发 JavaScript 前端开发
jQuery学习笔记——jQuery基础
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。
104 0
|
JavaScript 前端开发 API
jquery学习笔记
1.jquery是一个框架,是javasript框架。 2.jquery能做什么? *取得页面中元素,遍历DOM(document object model文档对象模型)树,jquery为了准确的获取需要检查活操纵的文档元素,提供了可靠而富有效率的选择符机制。
63 0
|
Web App开发 JSON JavaScript
html+css+js+jQuery学习笔记(二)
html+css+js+jQuery学习笔记
149 0
html+css+js+jQuery学习笔记(二)
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
108 0
html+css+js+jQuery学习笔记(一)
|
Web App开发 JSON JavaScript
html+css+js+jQuery学习笔记(三)
html+css+js+jQuery学习笔记
102 0
html+css+js+jQuery学习笔记(三)
|
JavaScript 前端开发 开发者
最好不用 jquery |学习笔记
快速学习 最好不用 jquery
135 0