1.jq 的基础选择器

empty jquery 选择器 jquery选择器实例_javascript

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {//页面加载完毕
            //打印ul 里面 的li
            console.log($('ul li'));
        })
    </script>
</body>

名称

用法 描述

子代选择器

$('ul>li"); 使用> 获取亲儿子层级元素 注意不会获取孙子层级的元素

后代选择器

$(“ul li”); 使用空格 ，代表后代选择器 包括孙子

2.隐式迭代

不需要进行for循环，Jquery内部进行遍历

<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));

        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style   原生用法：div.style.background-pink='pink'
        //原生Js的方法是利用queryselector得到第一个div,再改变其样式，要么就是利用queryselectorall得到div数组，用div[0]进行添加方法
        $("div").css("background", "pink");

        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        //原生的js 需要 queryselectorall  得到所有，然后for 循环遍历 用index分别进行添加方法
        $("ul li").css("color", "red");//这里是所有div都添加红色属性
    </script>
</body>

筛选选择器

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {//文档加载完后再执行
            $("ul li:first").css("color", "red");//第一个
            $("ul li:last").css("color","pink");//最后一个
            //:eq(index) 索引号
            $("ul li:eq(2)").css("color", "blue");//第三个 0 1 2 
            $("ol li:odd").css("color", "skyblue");//索引号是奇数的
            $("ol li:even").css("color", "pink");//索引号是偶数的
        })
    </script>
</body>

筛选方法-获取父子元素(选择方法）

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子？
            // (1) 亲儿子 children()  类似子代选择器  ul>li 孙子不选
            $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
        });
    </script>
</body>
<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
    </script>

empty jquery 选择器 jquery选择器实例_empty jquery 选择器_02