jQuery中的过滤性选择器有哪些
jQuery中的选择器有很多,比如子元素选择器,后代选择器,过滤性选择器等等,这篇文章就和大家讲讲jQuery中的过滤性选择器,正在学习选择器的朋友可以参考一下,希望对你有帮助。
:first和:last过滤选择器
:first得到一组相同标签元素中的第1个元素
:last得到一组相同标签元素中的最后1个元素
例如:
<body> <div>改变最后一行"苹果"背景颜色:</div> <ol> <li>葡萄</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> <li>苹果</li> </ol> <script type="text/javascript"> $("li:last").css("background-color", "red"); </script>
:contains(text)过滤选择器
:contains(text)选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象
例如:
<body> <div>改变包含"jQuery"字符内容的背景色:</div> <ol> <li>强大的"jQuery"</li> <li>"javascript"也很实用</li> <li>"jQuery"前端必学</li> <li>"java"是一种开发语言</li> <li>前端利器——"jQuery"</li> </ol> <script type="text/javascript"> $("li:contains('jQuery')").css("background", "green"); </script> </body>
:has(selector)过滤选择器
:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素
例如:
<body> <div>改变包含"label"元素的背景色:</div> <ol> <li><p>我是P先生</p></li> <li><label>L妹纸就是我</label></li> <li><p>我也是P先生</p></li> <li><label>我也是L妹纸哦</label></li> <li><p>P先生就是我哦</p></li> </ol> <script type="text/javascript"> $("li:has('label')").css("background-color", "blue"); </script> </body>
:hidden过滤选择器
:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素
例如:
<body> <h3>显示隐藏元素的内容</h3> <input id="hidstr" type="hidden" value="我已隐藏起来"/> <div></div> <script type="text/javascript"> var $strHTML = $("input:hidden").val(); $("div").html($strHTML); </script> </body>
:visible过滤选择器
:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。
例如:
<body> <h3>修改可见“水果”的背景色</h3> <ul> <li style="display:none">橘子</li> <li style="display:block">香蕉</li> <li style="display:">葡萄</li> <li>苹果</li> <li style="display:none">西瓜</li> </ul> <script type="text/javascript"> $("li:visible").css("background-color","blue"); </script> </body>
[attribute=value]属性选择器
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
例如:
<body> <h3>改变"title"属性值为"蔬菜"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="水果">苹果</li> <li title="水果">西瓜</li> </ul> <script type="text/javascript"> $("li[title='蔬菜']").css("background-color", "green"); </script> </body>
[attribute!=value]属性选择器
[attribute!=value]属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
[attribute*=value]属性选择器
[attribute*=value]它可以获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
例如:
<body> <h3>改变"title"属性值包含"果"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="人参果">小西红柿</li> <li title="水果">西瓜</li> </ul> <script type="text/javascript"> $("li[title*='果']").css("background-color", "green"); </script> </body>
:first-child子元素过滤选择器
:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。
例如:
<body> <h3>改变每个"蔬菜水果"中第一行的背景色</h3> <ol> <li>芹菜</li> <li>茄子</li> <li>萝卜</li> <li>大白菜</li> <li>西红柿</li> </ol> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> <script type="text/javascript"> $("li:first-child").css("background-color", "green"); </script> </body>
:last-child子元素过滤选择器
与:first-child子元素过滤选择器功能相反,:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,它也是一个集合,常用多个集合数据的选择处理。
以上是jQuery中的过滤性选择器有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

jQuery引用方法详解:快速上手指南jQuery是一个流行的JavaScript库,被广泛用于网站开发中,它简化了JavaScript编程,并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法,并提供具体的代码示例,帮助读者快速上手。引入jQuery首先,我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入,也可以下载

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

jQuery如何移除元素的height属性?在前端开发中,经常会遇到需要操作元素的高度属性的需求。有时候,我们可能需要动态改变元素的高度,而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性,并提供具体的代码示例。在使用jQuery操作高度属性之前,我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:<

标题:使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库,被广泛用于处理DOM操作。在网页开发中,经常会遇到需要修改页面上链接标签(a标签)的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标,并提供具体的代码示例。首先,我们需要在页面中引入jQuery库。在HTML文件中添加以下代码:

jQuery是一种流行的JavaScript库,被广泛用于处理网页中的DOM操作和事件处理。在jQuery中,eq()方法是用来选择指定索引位置的元素的方法,具体使用方法和应用场景如下。在jQuery中,eq()方法选择指定索引位置的元素。索引位置从0开始计数,即第一个元素的索引是0,第二个元素的索引是1,依此类推。eq()方法的语法如下:$("s

如何判断jQuery元素是否具有特定属性?在使用jQuery操作DOM元素时,经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下,我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性,并附上具体的代码示例。方法一:使用attr()方法和typeof操作符//判断元素是否具有特定属

目录1:basename()2:copy()3:dirname()4:disk_free_space()5:disk_total_space()6:file_exists()7:file_get_contents()8:file_put_contents()9:filesize()10:filetype( )11:glob()12:is_dir()13:is_writable()14:mkdir()15:move_uploaded_file()16:parse_ini_file()17:
