您的位置：首页 > Web前端 > JQuery

jQuery16(内容过滤器,子元素过滤器)

2016-02-06 23:44 615 查看

内容过滤器

表示所有层内包含哈哈内容的层,注意,fontSize S大写

$('div:contains(哈哈)').css('fontSize', '50px');

空的层,注意,实例ie11及谷歌无效

$('div:empty').text('我也不为空啦');

所有层中包含a标签的

$('div:has(a)').css('backgroundColor', 'red');

父亲元素

$('div:parent').css('backgroundColor', 'red');

兄弟元素

$('div:sibling').css('backgroundColor', 'red');

完整实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//表示所有层内包含哈哈内容的层
// $('div:contains(哈哈)').css('fontSize', '50px');
//空的层,实测ie11及谷歌无效
//div中没有任何元素(文本)
//$('div:empty').text('我也不为空啦');
//所有div中包含a标签的div背景为红色
//$(
4000
'div:has(a)').css('backgroundColor', 'red');
//父亲元素 sibling兄弟元素
$('div:parent').css('backgroundColor', 'red');
});
});
</script>
<style type="text/css">
div
{
width: 300px;
height: 300px;
background-color: Green;
margin-bottom: 20px;
}
</style>
</head>
<body>
<input type="button" name="name" value="显示效果" id='btn' />
<div>
哈哈,天气好晴朗 <a href="#">蓝色</a>
</div>
<div>
</div>
<div>
德玛西亚
</div>
</body>
</html>

子元素过滤器

每个ul里的第一个li

$('ul li:first-child').css('backgroundColor', 'red');

每个ul里的最后一个li

$('ul li:last-child').css('backgroundColor', 'red');

注意,如果这里面的没有-child,则指的只有一个

每个ul中只有一个li的

$('ul li:only-child').css('backgroundColor', 'red');

例外nth-child详见完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//hr标签,下划线
$(function () {
$('#btn').click(function () {
//每个ul里面的第一个li
// $('ul li:first-child').css('backgroundColor', 'red');
//每个ul里面的最后一个li
// $('ul li:last-child').css('backgroundColor', 'red');
//每个ul中只有一个li元素
$('ul li:only-child').css('backgroundColor', 'red');
//nth-child 对比eq来理解,eq()值匹配一个,nth-child()为每个父元素都
//要匹配一个子元素
/*
nth-child(index) 注意index从1开始
nth-child(even)
nth-child(odd)
nth-child(3n),选取3的倍数+1的元素
nth-child(3n+1) 满足3的倍数+1的元素
children() 方法,只考虑子元素,不考虑后代元素
*/
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id='btn' />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr color='gray' />
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<hr color='gray' />
<ul>
<li>31</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航