使用jQuery子元素过滤选择器选择元素

最新推荐文章于 2020-05-13 17:54:17 发布

liu_111111

最新推荐文章于 2020-05-13 17:54:17 发布

阅读量1.5k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/liu_111111/article/details/8818806

版权

jQuery 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!--

子元素过滤选择器：在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器：eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。

jQuery选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种
-->
<title></title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body
{
font-size: 12px;
text-align: center;
}
ul
{
width: 241px;
list-style-type: none;
padding: 0px;
}
ul li
{
height: 23px;
width: 60px;
line-height: 23px;
float: left;
border-top: solid 1px #eee;
border-bottom: solid 1px #eee;
margin-bottom: 5px;
}
.GetFocus
{
width: 58px;
border: solid 1px #666;
background-color: #eee;
}
</style>
<script type="text/javascript">
// $(function () {//增加每个父元素下的第二个子元素类别
// $('li:nth-child(2)').addClass('GetFocus');
// })
// $(function () {//增加每个父元素下的第一个子元素类别
// $('li:first-child').addClass('GetFocus');
// })
// $(function () {//增加每个父元素下的最后一个子元素类别
// $('li:last-child').addClass('GetFocus');
// })
// $(function () {//增加每个父元素下只有一个子元素类别
// $('li:only-child').addClass('GetFocus');
// })
</script>
</head>
<body>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
<ul>
<li>Item 3-0</li>
</ul>
</body>
</html>