jQuery第二天

.css()操作

.eq(index):获取第n个元素，index从0开始，-index从元素末尾数，从一开始

.first():第一个元素

.last():最后一个元素

.childrent():获取元素中所有子元素，不包括后代元素

.next():当前元素的下一个元素

.parent():取得父级元素的集合

三种作用：

设置单个样式:css(name,value) name:样式名 value样式值

设置多个样式：css（{

name:value,

name:value

}）

在执行时会采用隐式迭代的方式

隐式迭代

     //设置操作时会给jQuery设置相同的值
    //获取操作时会返回第一个元素的值

 

获取样式:css(name)name 想要获取的值

 

<script>
    $(function () {
        //css(name,value)
        //修改单个样式
    //name样式名 value 样式值
    //     $("li").css("backgroundColor","red")
    //             .css("color","blue")
    //         .css("fontSize","20px")
    // });
        //ENd
        //修改多个样式，把参数做成对象
        //css(obj)
        $("li").css({
        backgroundColor:"blue",
            color:"red",
            fontSize:"18px",
            border:"15px solid yellow"
        });
        $("li").eq(-2).css("color","yellow")
        // $("li").eq(3).css("color","black")
        console.log($("li").eq(3).css("color"))
    });
        //获取样式
        //css(name)
        //name:想要获取的样式


    //隐式迭代
        //设置操作的时候：会给jQuery的内部对象设置同样的值
        //获取的时候：只会返回第一个元素对应的值
</script>

 

class操作：针对于html页面class类的操作

addclass（）添加一个类

removeclass（）移除一个类

hasclass（）判断类是否存在

toggleclass（）切换类

<script>
    $(function () {
        //添加一个类addclass
        $("input").eq(0).click(function () {
            $("li").addClass("basic")
        });
        $("input").eq(1).click(function () {
            $("li").addClass("bigger")
        });

        //移除一个类removeclass
        $("input").eq(2).click(function () {
            $("li").removeClass("bigger")
        });
        //判断类是否存在
        $("input").eq(3).click(function () {
        console.log($("li").hasClass("bigger"))
        });
        //切换类
        // $("input").eq(4).click(function () {
        //     if ($("li").hasClass("bigger")) {
        //         $("li").removeClass("bigger")
        //
        //     }else{
        //         $("li").addClass("bigger")
        //     }
        // })
        $("input").eq(4).click(function () {
            $("li").toggleClass("basic")
        })

    });
</script>

mousedown：当鼠标移到元素上方并按下按钮是触发

mouseenter：当鼠标指针当鼠标穿过该元素时触发

mouseleave：当鼠标离开此元素时触发

mousemove：当鼠标在指定元素上移动是触发

mouseover：当鼠标移动到该元素或其子元素时触发

mouseout：无论鼠标实处此元素还是子元素都会触发