2023.12.19笔记

//jquery

        //入口函数:等待页面加载完毕后进行执行(两种)

        //方法1.

        $(document).ready(function(){

            $("button").click(function(){

                alert("666")

            })

        })

        //方法2.

        $(function(){

            $("button").click(function(){

                alert("666")

            })

        })

        // $:顶级对象，是jquery的别称,相当于原生js中的window，对元素进行包装，使其成为jquery对象，从而可以调用jquery提供的方法

        //jquery只能使用jquery方法，不能使用原生js方法(否则会报错)

        //把jquery对象转化为dom对象

        //  方法1.$("button")[0].style,backgroundColor = "pink"

        //  方法2.$("button").get(0)

        //把dom对象转化为jquery对象

        //$(dom对象)

        //选择器

        //$("选择器")

        //$("选择器").css("属性名","属性值")

        //隐式迭代：遍历内部dom元素的过程

        // console.log($("div"))

        $("div").css("color", "pink")

       

        //筛选选择器

        $("ul li:first")

        $("ul li:last")

        $("ul li:eq(2)") //获取到的li元素中，索引下标为2的li

        $("ul li:odd").css("background","pink")

        $("ul li:even").css("background","red")

        //筛选的方法

        $(".子代类名").parent //由子代找父代

        $(".父代类名").children("需要的东西(如.div,.li等)") //由父代找子代

        $(".父代类名").find(".div").css("color","red") //后代选择器

        $("li").siblings("div").css("color","red") //查找兄弟节点,不包含自己本身

       

        //更改样式  

        // $("div").css("backgroundColor", "red")

        // $("div").css({ "color": "pink", "backgroundColor": "green" })

        // 对类名进行添加

        $("div").addClass("pink")

        // 移除

        // $("div").removeClass("pink")

        // 切换

        $("div").toggleClass("pink")

        //显示和隐藏

        $("div").show() //显示

        $("div").hide() //隐藏

        $("div").toggle() //切换

        //滑动

        $("div").slideUp() //滑入

        $("div").slideDown() //滑出

        $("div").slideToggle() //切换

        //淡入淡出

        $("div").fadeIn() //淡入

        $("div").fadeOut() //淡出

        $("div").fadeToggle() //切换

        //自定义动画

        //animate(想要更改的样式属性,[speed],[easing],[fn])