jQuery_内容过滤|学习笔记

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

它们涉及的子元素都包括文本节点。 


上一篇:jQuery_鼠标事件|学习笔记


下一篇:极速理解设计模式系列:15.中介者模式(Mediator Pattern)