开发者学堂课程【jQuery 开发教程: jQuery_内容过滤】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4280
1、:contains()Selector
描述∶选择所有包含指定文本的元素
语法:jQuery( ":contains(text)" )
注意:text:用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中,或在该元素的任何后代中,或两者兼有。
举例:写入几个<div>写上人名:
<body> <div> John Resig</ div> <div>gggg Resig< / div> <div>Malcom John. sinclair</ div> <div>J.ohn</div> 引入 jQuery:<script src="jquery-2.2.1.min.js">< /script> </ body>
写入 js:
< /script> < /script>
选择所有包含 John 的<div>加入 css 样式强调它们并加入下划线:
<script> $( function () { $ ( "div:contains( ' John ' ) ").css("text-decoration" , "underline"); }) </script>
执行可以看到第一个和第三个被加上了下划线。
2、:empty Selector
描述∶选择所有没有子元素的元素(包括文本节点)。
语法:jQuery( ":empty" )
举例:创建文件为 empty,首先引入 jQuery:
<script src="jquery-2.2.1.min.js">< /script>
写入 table 加入表头和没有内容的<td>标签:
<table border="1"> <tr><td>TD#0</td><td>< /td></tr> <tr><td>TD#2</td><td></td></tr> <tr><td></td><td>TD #5</td></tr> < /table>
查找所有空元素添加背景颜色:
<script> $ ( function() i $("d:empty").text( "was empty").css("background-color" ,"red"); })
执行,此时只有空元素被添加上了背景颜色。
3、:has() Selector
描述︰选择元素其中至少包含指定选择器匹配的一个种元素
语法:jQuery( ":has(selector)" )
举例:写入<div>写入<p>标签加入内容:
<div><p>hello in a paragraph</p></div> <div>hello again : (with no p)</div>
写入 css:
<style> .text{ border: 1px solid green; } < /style>
给所有含有<p>标签的元素段落标签的<div>添加 .text 类:
<script> $ ( function() { $( "div:has(p)" ).addclass ( "text" ); })
第一个 div 被加上边框,因为有一个 p 标签。
4、:parent Selector
描述∶选择所有含有子元素或者文本的父级元素
注意:JOuery ":parent" )
它们涉及的子元素都包括文本节点。