黑马程序员技术交流社区
标题:
jQuery子元素过滤器的使用方法
[打印本页]
作者:
东流水
时间:
2019-4-24 11:25
标题:
jQuery子元素过滤器的使用方法
所有的使用方法请实践,具体了解实际效果.
引入jQuery jquery-3.3.1.min.js这个文件请在jQuery官网下载即可.
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("ul li:first-child").css("background","pink")
//所有ul 的第一个子元素li :first-child是直接拿的第一个子元素
$("ul li:first-of-type").css("background","red")
//所有ul 的第一个子元素li :first-of-type是通过筛选找到的第一个子元素
$("ul li:last-child").css("background","blue")
//所有ul 的最后一个子元素li :last-child是直接拿的最后一个子元素
$("ul li:last-of-type").css("background","#e31336")
//所有ul 的最后一个子元素li :last-of-type是通过筛选找到的最后一个子元素
$("ul li:nth-child(2)").css("background","#ccc")
// 通过父级元素ul 找到第(2)个子元素 child()的括号你是几就是第几个子元素
$("ul li:nth-last-child(3n+2)").css("background","#009494")
//选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
//必须为整数，注意从1开始而不是0
//使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2)
从倒数第二个子元素开始，匹配每个3的倍数的元素
//:nth-last-child()是直接找到的子元素
$("ul li:nth-last-of-type(3n+2)").css("background","#e31436")
//选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
//必须为整数，注意从1开始而不是0
//使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2)
从倒数第二个子元素开始，匹配每个3的倍数的元素
//:nth-last-child()是通过筛选找到的子元素
$("ul li:nth-of-type(3n+2)").css("background","yellow")
//选择所有他们父元素的第n个子元素。 计算从第一个元素开始到最后一个.
//必须为整数，注意从1开始而不是0
//使用特殊公式如(an + b)进行选择. 例如:nth-of-type(3n+2)
从第二个具此标签元素开始，匹配每个3的倍数的元素
//:nth-of-type(3n+2)是通过筛选找到的子元素
$("ul li:only-child").css("background","#666")
// 如果某个元素是父元素中唯一的子元素，那将会被匹配
// 就是ul里只有一个子元素li,就会被选取.
// :only-child是直接找到子元素
$("ul li:only-of-type").css("background","#2563")
//如果某个元素是父元素中唯一的子元素，那将会被匹配
//就是ul里只有一个子元素li,就会被选取.
//:only-of-type是通过筛选找到的子元素
</script>
下面是body里ul >li的试子:
<body>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="arrse">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</body>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2