jQuery内容选择器
内容选择器
- 所谓的内容选择器指的是可以根据元素中所包含的内容来实现相关验证,对于元素内容的判断,可以选择如下的选择器判断
| 1 | :contains(内容) | 返回包含指定文本内容的所有元素 | 元素集合 |
| 2 | :empty() | 选择所有空元素 | 元素集合 |
| 3 | :parent | 选择所有含有内容的非空元素 | 元素集合 |
| 4 | :has(选择器) | 获取所有包含制定选择器所匹配的元素 | 元素集合 |
| 5 | parent() | 使用parent()函数取得指定元素的父元素 | 元素集合 |
| 6 | :parent() | 选择含有指定元素的子元素 | 元素集合 |
- parent()和:parent()区别为一个是函数,使用在对象.函数上,一个为选择器有冒号";"使用在字符串中
- 此时是需要对应关系以及模糊数据的查询操作的
查询指定的内容
- 使用:contains()可以将模糊匹配文本的元素进行列出
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//选择table下的所有td元素中包含有"Janmes"内容
$("table td:contains(Janmes)").attr("class","init");
})
</script>
</head>
<body>
<div>
<table border="">
<tr><td>姓名</td><td>年龄</td><td>编号</td></tr>
<tr><td>xiemaoshu</td><td>22</td><td>9527</td></tr>
<tr><td>Janmes Jake</td><td>64</td><td>4561</td></tr>
<tr><td>lanchaohui</td><td>21</td><td>78945</td></tr>
<tr><td>Janmes Gosling</td><td>64</td><td>4561</td></tr>
<tr><td>kill</td><td>20</td><td>45612</td></tr>
<tr><td>Janmes Sthmis</td><td>64</td><td>4561</td></tr>
<tr><td>admin</td><td>33</td><td>4561</td></tr>
<tr><td>Janmes Rouse</td><td>64</td><td>4561</td></tr>
</table>
</div>
</body>
</html>
- 此实质性的模糊查询的操作
空元素判断
-
所谓的空元素有两种描述形式"<元素/">或者是"<元素></元素>"这些都表为空元素信息.
-
查找空元素
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//选择table下的所有td元素中包含有"Janmes"内容
$("div li:empty").attr("class","init");
})
</script>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>world</li>
<li></li>
<li></li>
<li>Comn</li>
<li>Let'go</li>
</ul>
</div>
</body>
</html>
- 但是于"empty"对应的选择器有一个":parent",这个描述的是具备子元素或文本的父级元素
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//选择div元素下的所有li元素,并且这个li元素包含文本或者子元素
$("div li:parent").attr("class","init");
})
</script>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>world</li>
<li></li>
<li></li>
<li>Comn</li>
<li>Let'go</li>
</ul>
</div>
</body>
</html>
利用has判断
- has处理相当于使用了一过滤的操作概念,针对于选择好的元素进行一次指定元素的匹配过程
- 例如
- 示例:使用ahs()进行验证
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//选择div元素下的所有包含span元素的父元素
$("div *:has(span)").attr("class","init");
})
</script>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>world</li>
<li>Comn</li>
<li>Let'go</li>
</ul>
</div>
<div>
<ul>
<span>武林外传</span>
<span>天龙八部</span>
<span>降龙十八掌</span>
<span>九阴真经</span>
</ul>
</div>
</body>
</html>
- 以上的操作选择了包含span的ul元素,而不是span元素
选择父元素
- 可以根据指定的子元素找到它所有对应的父元素信息
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//选择div元素下span元素的父元素li
$("div span").parent("li").attr("class","init");
})
</script>
</head>
<body>
<div>
<ul>
<li>
<span>武林外传</span>
</li>
<li>world</li>
<li>Comn</li>
<li>Let'go</li>
</ul>
</div>
<div>
</body>
</html>
- 内容选择器中最为使用的就是:contains()文本内容选择器