jquery中的子元素过滤选择器

来源:互联网 发布:虚拟专用网软件 编辑:程序博客网 时间:2024/06/10 17:54

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    ul
    {
        list-style-type:none;
        padding:0px;
        }
    </style>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //$('li:eq(0)').css('background-color', '#eee');// 给第一个ul的li加上背景颜色
                //$('li:first-child').css('background-color', '#eee'); //获取每个父元素的第一个子元素
                //$('li:last-child').css('background-color', '#eee'); //获取每个父元素的最后一个子元素
                //$('li:only-child').css('background-color', '#eee'); //获取每个父元素下的仅有的一个子元素
                //$('li:nth-child(2)').css('background-color', '#eee'); //获取每个父元素下任意的一个子元素,从0开始

            })
        })
    </script>
</head>
<body>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
<ul>
<li>五</li>
<li>六</li>
<li>七</li>
<li>八</li>
</ul>
<ul>
<li>九</li>

</ul>
<input type="button" id="btn" value="click" />
</body>
</html>

原创粉丝点击