jQuery简单的快速使用

$('div')  直接可以用$来获取元素，更加的方便了，js获取的对象是元素对象，跟用jquery获取的对象是jQuery对象两个不是一样的，里面的方法也不能混为一起用。

jQuery有隐式迭代把匹配的元素内部进行了一次循环遍历，        $("ul li").css("color", "red");

这个就是典型的，直接吧ul里面的li所有设置了一个红色

            $("ul li:first").css("color", "red"); 第一个数红色

            $("ul li:eq(2)").css("color", "blue");第三个数显示蓝色

            $("ol li:odd").css("color", "skyblue"); odd双数显示天蓝色

            $("ol li:even").css("color", "pink"); even 单数显示粉红色

parent()可以返回他的爸爸。children（）可以返回亲儿子，子代选择器，  find（）后代选择器，可以返回所有的后代

siblings（） 这个可以完成排他思想的设置，选中自身之外的所有因素。而且支持链式编程 $(this).css("color", "red").siblings().css("color", "");这个就是链式编程

 // 1. 添加类 addClass()

            // $("div").click(function() {

            //     // $(this).addClass("current");

            // });

            // 2. 删除类 removeClass()

            // $("div").click(function() {

            //     $(this).removeClass("current");

            // });

            // 3. 切换类 toggleClass()

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

                $(this).toggleClass("current");

            });

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

                // 淡入 fadeIn()

                $("div").fadeIn(1000);

            })

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

                // 淡出 fadeOut()

                $("div").fadeOut(1000);

            })

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

                // 淡入淡出切换 fadeToggle()

                $("div").fadeToggle(1000);

            });

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

                //  修改透明度 fadeTo() 这个速度和透明度要必须写

                $("div").fadeTo(1000, 0.5);

            });

        // 1. 获取设置元素内容 html()

        console.log($("div").html());

        // $("div").html("123");

        // 2. 获取设置元素文本内容 text()

        console.log($("div").text());

        $("div").text("123");

        // 3. 获取设置表单值 val()

        console.log($("input").val());

        $("input").val("123");

 1. each() 方法遍历元素

 $("div").each(function(i, domEle) {

                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称

                // console.log(index);

                // console.log(i);

                // 回调函数第二个参数一定是 dom元素对象 也是自己命名

                // console.log(domEle);

                // domEle.css("color"); dom对象没有css方法

                $(domEle).css("color", arr[i]);

                sum += parseInt($(domEle).text());

            })

        // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据

            // $.each($("div"), function(i, ele) {

            //     console.log(i);

            //     console.log(ele);

            // });

            // $.each(arr, function(i, ele) {

            //     console.log(i);

            //     console.log(ele);

    // (2) on可以实现事件委托（委派）

            // $("ul li").click();

            $("ul").on("click", "li", function() {

                alert(11);

            });

            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

            // (3) on可以给未来动态创建的元素绑定事件

            // $("ol li").click(function() {

            //     alert(11);

            // })

            $("ol").on("click", "li", function() {

                alert(11);

            })

            var li = $("<li>我是后来创建的</li>");

            $("ol").append(li);

      // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象

            // targetObj.msg.age = 20;

            // console.log(targetObj);

            // console.log(obj);

            // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起

            $.extend(true, targetObj, obj);

            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据

            targetObj.msg.age = 20;

            console.log(targetObj); // msg :{sex: "男", age: 20}

            console.log(obj);