【jQuery学习】 jQuery常用API

1.jQuery选择器

1.1 jQuery基础选择器

$("选择器") //css怎么写 括号里面就怎么写

<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(){
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>

 2. jQuery隐式迭代

隐式迭代：把匹配的所有元素内部进行遍历循环，给每一个元素添加方法。

<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 1.获取四个div元素
        console.log($("div"));
        // 2.设置div背景色为粉色 jQuery对象不能使用style
        $("div").css("background", "pink");
        $("ul li").css("color", "red");
    </script>

 

 3. jQuery筛选选择器

 

 

 <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(){
            // 选择第一个 last选择最后一个
            $("ul li:first").css("color", "red");
            // :eq(index) 选择特定的某个 从0开始
            $("ul li:eq(2)").css("color", "blue");
            // :odd :even 选择奇数行和偶数行
            $("ol li:odd").css("color", "pink");

        })
    </script>

 4.jQuery筛选方法（重点）

parent():返回最近一级的父亲元素，不会返回爷爷元素。

children():返回亲儿子，也就是最近一级，相当于css中的 ul>li。

find():返回所有符合的孩子， 相当于css中的ul li。

siblings(): 返回除了自己之外的所有兄弟元素，适用于排除自己的操作。

:eq()和eq()的区别：

当括号内使用变量时：

var index = 2;
$("div:eq("+index+")");
$("div").eq(index);

经常使用eq方法。

 <div class="father">
        <div class="son"></div>
    </div>
    <div class="nav">
        <p>我是皮</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <ol>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li class="item">我是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>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <div class="current">current</div>
    <div>nocurrent</div>
    <script>
        // 注意一下 筛选方法都是方法 带括号
        $(function(){
            // 父 parent() 返回的是最近一级的父级元素
            console.log( $(".son").parent());
            $(".son").parent();
            // 子
            // (1)亲儿子
            $(".nav").children("p").css("color", "red");
            // (2)所有孩子
            $(".nav").find("p").css("background", "pink");
            // 兄 
            // (1)选择除了自己之外的其他所有兄弟
            $("ol .item").siblings().css("color", "red");
            // (2)nextAll 选择当前元素之后的所有兄弟
            $("ol .item").nextAll().css("background", "pink");
            // (3)prevAll 选择当前元素之前的所有兄弟

            // 第n个元素
            // (1)使用eq选择器
            $("ul li:eq(2)").css("background", "blue");
            // (2)使用eq选择方法
            $("ul li").eq(2).css("color", "white");

            // 判断是否有类名
            console.log($("div").eq(4).hasClass("current"));
            
        })
    </script>

5.jQuery里的排他思想

用到了siblings()方法的本质：改变除了自己之外的其他所有兄弟。

<button>快捷</button>
    <button>快捷</button>
    <button>快捷</button>
    <button>快捷</button>
    <button>快捷</button>
    <button>快捷</button>
    <script>
        $(function(){
            $("button").click(function(){
                $(this).css("background", "blue");
                $(this).siblings().css("background", "");
            })
        })
    </script>