Jquery选择器

  • 基础选择器

    • 标签选择器 $(div)
    • id选择器 $(#box)
    • 类选择器 $(.box)
    • 通用选择器 $('*')

  • 层级选择器（组合选择器）

    • 后代选择器 $('div p')
    • 子代选择器 $('div>p')
    • 毗邻选择器 $(div+li)
    • 兄弟选择器 $(div~li)

  • 基本过滤选择器

    			// 1.:eq(index) 等于index值的元素    $('ul li:eq(0)')
            $('ul li:eq(1)').css('color','red');

            // 2.:gt(index) 大于index值的元素(不含index)
            $('ul li:gt(5)').css('color','red');

            // 3.:lt(index) 小于index值的元素(不含index)
            $('ul li:lt(4)').css('color','yellow');

            // 4.:odd 选取的偶数
            $('ul li:odd').css('color','black');

            // 5.:even 选取的奇数
            $('ul li:even').css('color','green');

            // 6.:first   \   :last
            $('ul li:first').css('color','blue');
            $('ul li:last').css('color','gray');

  • 属性选择器

    $('input[type="text"]').css('background','red');
$('input[type="password"]').css('background','yellow');

  • 筛选选择器

    		//获取第n个元素 数值从0开始
        $('span').eq(0).css('font-size','30px')

        //first()获取第一个元素
        $('span').first().css('background','red')

        //last()获取最后一个元素  这里好像是$('span:last').css(...)

        //.parent() 选择父亲元素
    $('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})

        //.siblings()选择所有的兄弟元素
        $('.list').siblings('li').css('color','red')

        //.find()
        //查找所有的后代元素
        $('div').find('button').css('background','#313131')

    • siblings()应用：选项卡

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 400px;
            height: 100px;
            overflow: hidden;
        }
        ul li{
            list-style: none;
            float: left;
            width: 90px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: red;
            margin-right: 10px;
        }

        ul li a{
            padding: 20px;
            /* background-color: green; */
            color: #ffffff;
        }
        p{
            display: none;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="javascript:void(0)">q1ang</a>
        </li>
        <li>
            <a href="javascript:void(0)">q2ang</a>
        </li>
        <li>
            <a href="javascript:void(0)">q3ang</a>
        </li>
        <li>
            <a href="javascript:void(0)">q4ang</a>
        </li>
    </ul>
    <p>q1ang</p>
    <p>q2ang</p>
    <p>q3ang</p>
    <p>q4ang</p>

        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function(){
                $('ul li a').click(function(){
                    $(this).css('background','green').parent('li').siblings('li').children('a').css('background','transparent');
                    var i = $(this).parent('li').index();
                    $('p').eq(i).addClass('active').siblings('p').removeClass('active');
                });
            });
        </script>
    
</body>
</html>

img

posted @ 2018-10-21 21:18  q1ang  阅读(138)  评论(0)  编辑  收藏  举报