jQuery操作 0715~0718

jQuery

1.jQuery和js入口函数

1.1jQuery和js入口函数的区别
  • <script>
        
        window.onload = function (ev) {
            // 1.通过原生的JS入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("images")[0];
            console.log(images);
            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(images).width;
            console.log("onload", width);
        }
        
    
        /*
        * 1.原生JS和jQuery入口函数的加载模式不同
        * 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
        * jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
        * */
        
        $(document).ready(function () {
            // 1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images");
            console.log($images);
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
            var $width = $images.width();
            console.log("ready", $width);
        });
        
    
        /*
        1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
        2.jQuery中编写多个入口函数,后面的不会覆盖前面的
        */
        // window.onload = function (ev) {
        //     alert("hello lnj1");
        // }
        // window.onload = function (ev) {
        //     alert("hello lnj2");
        // }
    
        $(document).ready(function () {
            alert("hello lnj1");
        });
        $(document).ready(function () {
            alert("hello lnj2");
        });
    </script>
    
1.2 jQuery入口函数其他写法
  • // 1.第一种写法
    $(document).ready(function () {
        // alert("hello lnj");
    });
    
    // 2.第二种写法
    jQuery(document).ready(function () {
        // alert("hello lnj");
    });
    
    // 3.第三种写法(推荐)
    $(function () {
        // alert("hello lnj");
    });
    
    // 4.第四种写法
    jQuery(function () {
        alert("hello lnj");
    });
    
1.3 jQuery冲突问题
  • // 1.释放$的使用权,避免与其他框架产生冲突
    // 注意点: 释放操作必须在编写其它jQuery代码之前编写
    //         释放之后就不能再使用$,改为使用jQuery
    // jQuery原理.noConflict();
    // 2.自定义一个访问符号
    var nj = jQuery.noConflict();
    nj(function () {
        alert("hello lnj");
    });
    

2.jQuery核心函数

  • // 1.接收一个函数
    $(function () {
        alert("hello lnj");
        // 2.接收一个字符串
        // 2.1接收一个字符串选择器
        // 返回一个jQuery对象, 对象中保存了找到的DOM元素
        var $box1 = $(".box1");
        var $box2 = $("#box2");
        console.log($box1);
        console.log($box2);
        // 2.2接收一个字符串代码片段
        // 返回一个jQuery对象, 对象中保存了创建的DOM元素
        var $p = $("<p>我是段落</p>");
        console.log($p);
        $box1.append($p);
        // 3.接收一个DOM元素
        // 会被包装成一个jQuery对象返回给我们
        var span = document.getElementsByTagName("span")[0];
        console.log(span);
        var $span = $(span);
        console.log($span);
    });
    

jQuery对象是一个伪数组,有下标 长度等信息

3.静态方法和实例方法

3.1 常用的静态方法
  • each

  • <script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        /*
        第一个参数: 遍历到的元素
        第二个参数: 当前遍历到的索引
        注意点:
        原生的forEach方法只能遍历数组, 不能遍历伪数组
        */
        // arr.forEach(function (value, index) {
        //     console.log(index, value);
        // });
        // obj.forEach(function (value, index) {
        //     console.log(index, value);
        // });
    
        // 1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数: 当前遍历到的索引
        第二个参数: 遍历到的元素
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
        $.each(arr, function (index, value) {
            console.log(index, value);
        });
        $.each(obj, function (index, value) {
            console.log(index, value);
        });
    </script>
    
    
  • map

  • var arr = [1, 3, 5, 7, 9];
     var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
     // 1.利用原生JS的map方法遍历
     /*
     第一个参数: 当前遍历到的元素
     第二个参数: 当前遍历到的索引
     第三个参数: 当前被遍历的数组
     注意点:
     和原生的forEach一样,不能遍历的伪数组
     */
     // arr.map(function (value, index, array) {
     //     console.log(index, value, array);
     // });
     // obj.map(function (value, index, array) {
     //     console.log(index, value, array);
     // });
     /*
    
    /*
     第一个参数: 要遍历的数组
     第二个参数: 每遍历一个元素之后执行的回调函数
     回调函数的参数:
     第一个参数: 遍历到的元素
     第二个参数: 遍历到的索引
     注意点:
     和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
     */
    $.map(arr, function (value, index) {
        console.log(index, value);
    });
     var res = $.map(obj, function (value, index) {
         console.log(index, value);
         return value + index;
     });
    
     var res2 = $.each(obj, function (index, value) {
         console.log(index, value);
         return value + index;
     });
    
     /*
     jQuery中的each静态方法和map静态方法的区别:
     each静态方法默认的返回值就是, 遍历谁就返回谁
     map静态方法默认的返回值是一个空数组
    
     each静态方法不支持在回调函数中对遍历的数组进行处理
     map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
     */
     console.log(res);
     console.log(res2);
    
    
  • tirm

  • /*
    $.trim();
     作用: 去除字符串两端的空格
     参数: 需要去除空格的字符串
     返回值: 去除空格之后的字符串
     */
    
     var str = "    lnj    ";
     var res = $.trim(str);
     console.log("---"+str+"---");
    
    
    
  • // 真数组
    var arr = [1, 3, 5, 7, 9];
    // 伪数组
    var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
    // 对象
    var obj = {"name":"lnj", age:"33"};
    // 函数
    var fn = function(){};
    // window对象
    var w = window;
     
    /*
    $.isWindow();
    作用: 判断传入的对象是否是window对象
    返回值: true/false
    */
    var res = $.isWindow(w);
    console.log(res);
     
    /*
    $.isArray();
    作用: 判断传入的对象是否是真数组
    返回值: true/false
    */
    var res = $.isArray(w);
    console.log(res);
     
    /*
    $.isFunction();
    作用: 判断传入的对象是否是一个函数
    返回值: true/false
    注意点:
    jQuery框架本质上是一个函数
    (function( window, undefined ) {
     })( window );
    */
    var res = $.isFunction(jQuery);
    console.log(res); //true
     
    
  • holdreday

  • <script>
        // $.holdReady(true); 作用: 暂停ready执行  我们需要进等一些其他的操作执行完后在执行,
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });
    </script>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            $.holdReady(false);
        }
    </script>
    
    

4.jQuery属性操作

4.1内容选择器
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>14-jQuery内容选择器</title>
        <style>
            div{
                width: 50px;
                height: 100px;
                background: red;
                margin-top: 5px;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 编写jQuery相关代码
                // :empty 作用:找到既没有文本内容也没有子元素的指定元素
                // var $div = $("div:empty");
                // console.log($div);
    
                // :parent 作用: 找到有文本内容或有子元素的指定元素
                // var $div = $("div:parent");
                // console.log($div);
    
                // :contains(text) 作用: 找到包含指定文本内容的指定元素
                // var $div = $("div:contains('我是div')");
                // console.log($div);
    
                // :has(selector) 作用: 找到包含指定子元素的指定元素
                var $div = $("div:has('span')");
                console.log($div);
            });
        </script>
    </head>
    <body>
    
    <div></div>
    <div>我是div</div>
    <div>他们我是div123</div>
    <div><span></span></div>
    <div><p></p></div>
    
    </body>
    </html>
    
    
4.2.属性和属性节点
  • <script>
        $(function () {
            /*
            1.什么是属性?
            对象身上保存的变量就是属性
            2.如何操作属性?
            对象.属性名称 = 值;
            对象.属性名称;
            对象["属性名称"] = 值;
            对象["属性名称"];*/
          function Person() {
    
            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "zs";
            // console.log(p.name);
            console.log(p["name"]);
          
          /*
            3.什么是属性节点?
            <span name = "it666"></span>
            在编写HTML代码时,在HTML标签中添加的属性就是属性节点
            在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
            在attributes属性中保存的所有内容都是属性节点
    
            4.如何操作属性节点?
            DOM元素.setAttribute("属性名称", "值");
            DOM元素.getAttribute("属性名称");
    
            5.属性和属性节点有什么区别?
            任何对象都有属性, 但是只有DOM对象才有属性节点
    
            */
    
            
    
    
            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "lnj");
            console.log(span.getAttribute("name"));
        });
    </script>
    
    
    
  • jQuery中对属性和属性节点的操作

  • attr方法

  • <script>
       $(function () {
          /*
           1.attr(name|pro|key,val|fn)
           作用: 获取或者设置属性节点的值
           可以传递一个参数, 也可以传递两个参数
           如果传递一个参数, 代表获取属性节点的值
           如果传递两个参数, 代表设置属性节点的值
     
           注意点:
           如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
           如果是设置:找到多少个元素就会设置多少个元素
           如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
     
           2.removeAttr(name)
           删除属性节点
     
           注意点:
           会删除所有找到元素指定的属性节点
     
          */
           // console.log($("span").attr("class"));
           $("span").attr("class", "box");
           // $("span").attr("abc", "123");
     
           // $("span").removeAttr("class name");删除span里面的class属性和name属性
       });
    </script>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
    
    
    
  • prop方法

  • <script>
            $(function () {
                /*
                1.prop方法
                特点和attr方法一致
                2.removeProp方法
                特点和removeAttr方法一致
                */
                /*
                $("span").eq(0).prop("demo", "it666");
                $("span").eq(1).prop("demo", "lnj");
                console.log($("span").prop("demo"));
    
                $("span").removeProp("demo");
                */
    
                /*
                注意点:
                prop方法不仅能够操作属性, 他还能操作属性节点
    
               官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked,     selected 或者 disabled 使用prop(),其他的使用 attr()     */
                // console.log($("span").prop("class"));
                // $("span").prop("class", "box");
    
                console.log($("input").prop("checked")); // true / false
                console.log($("input").attr("checked")); // checked / undefined
    
            });
        </script>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
    
    <input type="checkbox">
    
    
4.3. jQuery类操作方法
  • addClass removeClass toggleClass

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>19-jQuery操作类相关的方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .class1{
                width: 100px;
                height: 100px;
                background: red;
            }
            .class2{
                border: 10px solid #000;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                1.addClass(class|fn)
                作用: 添加一个类
                如果要添加多个, 多个类名之间用空格隔开即可
    
                2.removeClass([class|fn])
                作用: 删除一个类
                如果想删除多个, 多个类名之间用空格隔开即可
    
                3.toggleClass(class|fn[,sw])
                作用: 切换类
                有就删除, 没有就添加
                */
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function () {
                    // $("div").addClass("class1");
                    $("div").addClass("class1 class2");
                }
                btns[1].onclick = function () {
                    // $("div").removeClass("class2");
                    $("div").removeClass("class2 class1");
                }
                btns[2].onclick = function () {
                    $("div").toggleClass("class2 class1");//有这两个类就删除它们
                }
            });
        </script>
    </head>
    <body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
    </body>
    </html>
    
    
4.4.文本值操作
  • /*1.html([val|fn])
    和原生JS中的innerHTML一模一样
    2.text([val|fn])
    和原生JS中的innerText一模一样
    3.val([val|fn|arr])
    多用于给input设置
    */
    
    
4.5.样式操作
  • <script>
       $(function () {
           // 编写jQuery相关代码
           // 1.逐个设置
           $("div").css("width", "100px");
           $("div").css("height", "100px");
           $("div").css("background", "red");
     
           // 2.链式设置
           // 注意点: 链式操作如果大于3步, 建议分开
           $("div").css("width", "100px").css("height", "100px").css("background",            "blue");
     
           // 3.批量设置
           $("div").css({
               width: "100px",
               height: "100px",
               background: "red"
           });
     
           // 4.获取CSS样式值
           console.log($("div").css("background"));;
       });
    </script>
    
    
4.6.位置和尺寸操作
  • //设置两个盒子一个父盒子一个子盒子,子绝父相,进行如下操作
    $(function () {
        // 编写jQuery相关代码
        var btns = document.getElementsByTagName("button");
        // 监听获取
        btns[0].onclick = function () {
            // 获取元素的宽度
            console.log($(".father").width());
            // offset([coordinates])
            // 作用: 获取元素距离窗口的偏移位
            console.log($(".son").offset().left);
            // position()
            作用: 获取元素距离定位元素的偏移位
            console.log($(".son").position().left);
        }
        // 监听设置
        btns[1].onclick = function () {
            // 设置元素的宽度
            $(".father").width("500px")
          //设置距离左边的距离
            $(".son").offset({
                left: 10
            });
    
            // 注意点: position方法只能获取不能设置,以下是不行的,得通过css设置
            // $(".son").position({
            //     left: 10
            // });
    
            $(".son").css({
                left: "10px"
            });
        }
    });
    
    
    
  • scollTop

  • //获取和设置的是一个元素内部的,比如$("html,body").scrollTop(300);就是设置距离整个网页头部的高度
    $(function () {
        // 编写jQuery相关代码
        var btns = document.getElementsByTagName("button");
        // 监听获取
        btns[0].onclick = function () {
            // 获取滚动的偏移位
            // console.log($(".scroll").scrollTop());
            // 获取网页滚动的偏移位
            // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
            console.log($("body").scrollTop()+$("html").scrollTop());
        }
        btns[1].onclick = function () {
            // 设置滚动的偏移位
            $(".scroll").scrollTop(300);
            // 设置网页滚动偏移位
            // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
            $("html,body").scrollTop(300);
        }
    });
    
    

5.jQuery事件相关

5.1事件绑定与解绑
  • $(function () {
           // 编写jQuery相关代码
           /*
           jQuery中有两种绑定事件方式
           1.eventName(fn);
           编码效率略高/ 部分事件jQuery没有实现,所以不能添加
           2.on(eventName, fn);
           编码效率略低/ 所有js事件都可以添加
     
           注意点:
           可以添加多个相同或者不同类型的事件,不会覆盖
           */
           $("button").click(function () {
               alert("hello lnj");
           });
           $("button").click(function () {
               alert("hello 123");
           });
           $("button").mouseleave(function () {
               alert("hello mouseleave");
           });
           $("button").mouseenter(function () {
               alert("hello mouseenter");
           });
     
       });
    </script>
    <script>
        $(function () {
            function test1() {
                alert("hello lnj");
            }
            function test2() {
                alert("hello 123");
            }
            // 编写jQuery相关代码
            $("button").click(test1);
            $("button").click(test2);
            $("button").mouseleave(function () {
                alert("hello mouseleave");
            });
            $("button").mouseenter(function () {
                alert("hello mouseenter");
            });
            // off方法如果不传递参数, 会移除所有的事件
            $("button").off();
            // off方法如果传递一个参数, 会移除所有指定类型的事件
            $("button").off("click");
            // off方法如果传递两个参数, 会移除所有指定类型的指定事件
            $("button").off("click", test1);
        });
    </script>
    
    
5.2 事件冒泡与默认行为
  • <script>
        $(function () {
            // 编写jQuery相关代码
            /*
            1.什么是事件冒泡?
            如下有两个div,father和son,当给他俩添加了点击事件,点击son也会触发father
            2.如何阻止事件冒泡
            两种方法
            3.什么是默认行为?
            4.如何阻止默认行为
            两种方法
            */
            
            $(".son").click(function (event) {
                alert("son");
                return false;
                event.stopPropagation();
            });
            $(".father").click(function () {
                alert("father");
            });
            
            $("a").click(function (event) {
                alert("弹出注册框");
                // return false;
                event.preventDefault();
            });
        });
    </script>
    
    
5.3 事件自动触发
  • $(".son").click(function (event) {
        alert("son");
    });
    
    $(".father").click(function () {
        alert("father");
    });
    
    /*
    自动触发就是不用我们点击就能触发事件
    trigger: 如果利用trigger自动触发事件,会触发事件冒泡
    triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
    */
    $(".son").trigger("click");//father也会被触发
    $(".son").triggerHandler("click");
    /*
    trigger: 如果利用trigger自动触发事件,会触发默认行为
    triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
    */
    
    
5.4 自定义事件
  • $(function () {
        // 编写jQuery相关代码
        // $(".son").myClick(function (event) {
        //     alert("son");
        // });
        /*
        想要自定义事件, 必须满足两个条件
        1.事件必须是通过on绑定的
        2.事件必须通过trigger来触发
        */
        $(".son").on("myClick", function () {
            alert("son");
        });
        $(".son").triggerHandler("myClick");
    });
    
    
5.5 事件命名空间
  • $(function () {
     
        /*
        什么是命名空间,在开发时,如果不同的人对一个元素添加了相同的事件,事件就会被多次触发,命名空间就能解      决触发谁的
        想要事件的命名空间有效,必须满足两个条件
        1.事件是通过on来绑定的
        2.通过trigger触发事件
        */
        $(".son").on("click.zs", function () {
            alert("click1");
        });
        $(".son").on("click.ls", function () {
            alert("click2");
        });
        // $(".son").trigger("click.zs");
        $(".son").trigger("click.ls");
    });
     
    /*注意点
    $(".father").on("click.ls", function () {
         alert("father click1");
     });
     $(".father").on("click", function () {
         alert("father click2");
     });
     $(".son").on("click.ls", function () {
         alert("son click1");
     });
     /*
     利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元               素没有命名空间的事件不会被触发
     利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类             型的事件都会被触发
     */
     // $(".son").trigger("click.ls");
     $(".son").trigger("click");
    
    
    
    
5.6 事件委托
  • $(function () {
         /*
         1.什么是事件委托?
         请别人帮忙做事情, 然后将做完的结果反馈给我们
         */
         $("button").click(function () {
             $("ul").append("<li>我是新增的li</li>");
         })
    
         /*
         在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找              到的元素,给所有找到的元素添加事件
         */
          $("ul>li").click(function () {
              console.log($(this).html());
          });
        //当我点击新增的li时不会打印内容,因为jQuery在遍历完所有元素后才会执行jQuery代码,想要让动态添加       的元素相应,这时候就需要通过事件委托
         /*
         以下代码的含义, 让ul帮li监听click事件
         之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
         之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响               应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
         */
         $("ul").delegate("li", "click", function () {
             console.log($(this).html());
         });
     });
    
    
5.7 移入移出事件
  • /*mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
    mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件 推荐大家使用
    */    
    /*
    hover方法既可以接收两个参数,也可以接受一个参数,两个一个移入一个移出,一个既移入又移出
     $(".father").hover(function () {
         console.log("father被移入了");
     },function () {
         console.log("father被移出了");
     });
     */
    
     $(".father").hover(function () {
         console.log("father被移入移出了");
     });
    
    
    

做几个实例 电影排行榜 tab选项卡

  • 掌握的几个方法

  • var index = $(this).index();  //eq获取在兄弟元素中的位置,
    var $li = $(".content>li").eq(index);  //选择序号为index的元素,返回一个对象
    $li.siblings().removeClass("show");   //siblings用来排他
    
    

6.jQuery动画

6.1 显示和隐藏动画
  • <script>
        $(function () {
            // 编写jQuery相关代码
            $("button").eq(0).click(function () {
                // $("div").css("display", "block"); 没有动画效果
                // 注意: 这里的时间是毫秒
                $("div").show(1000, function () {
                    // 作用: 动画执行完毕之后调用
                    alert("显示动画执行完毕");
                });
            });
            $("button").eq(1).click(function () {
                // $("div").css("display", "none");
                $("div").hide(1000, function () {
                    alert("隐藏动画执行完毕");
                });
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000, function () {
                    alert("切换动画执行完毕");
                });
            });
        });
    </script>
    
    
    
  • 实例:对联广告

  • 掌握的方法

    • // 1.监听网页的滚动
      $(window).scroll(function (){
      }
      
      
6.2 展开和收起动画
  • $(function () {
           // 编写jQuery相关代码
       $("button").eq(0).click(function () {
           $("div").slideDown(1000, function () {
               alert("展开完毕");
           });
       });
       $("button").eq(1).click(function () {
           $("div").slideUp(1000, function () {
               alert("收起完毕");
           });
       });
       $("button").eq(2).click(function () {
           $("div").slideToggle(1000, function () {
               alert("收起完毕");
           });
       });
    });
    
    
    
  • 实例:折叠菜单 下拉菜单

6.3.淡入淡出动画
  • $("button").eq(0).click(function () {
        $("div").fadeIn(1000, function () {
            alert("淡入完毕");
        });
    });
    $("button").eq(1).click(function () {
        $("div").fadeOut(1000, function () {
            alert("淡出完毕");
        });
    });
    $("button").eq(2).click(function () {
        $("div").fadeToggle(1000, function () {
            alert("切换完毕");
        });
    });
    $("button").eq(3).click(function () {
        $("div").fadeTo(1000, 0.2, function () {
            alert("淡入完毕");
        })
    });
     
    
    

收获 :想要一个动画执行完毕后再执行下一个,可以这样写

  • $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
    
    
6.4 自定义动画
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>47-jQuery自定义动画</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background: red;
            }
            .two{
                background: blue;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 编写jQuery相关代码
                $("button").eq(0).click(function () {
                    /*  以下为三种参数
                    $(".one").animate({
                        width: 500
                    }, 1000, function () {
                        alert("自定义动画执行完毕");
                    });
                    */
                    $(".one").animate({
                        marginLeft: 500
                    }, 5000, function () {
                        // alert("自定义动画执行完毕");
                    });
                    /*
                    第一个参数: 接收一个对象, 可以在对象中修改属性
                    第二个参数: 指定动画时长
                    第三个参数: 指定动画节奏, 默认就是swing
                    第四个参数: 动画执行完毕之后的回调函数
                    */
                    $(".two").animate({
                        marginLeft: 500
                    }, 5000, "linear", function () {
                        // alert("自定义动画执行完毕");
                    });
                })
                $("button").eq(1).click(function () {
                    $(".one").animate({
                        width: "+=100"
                    }, 1000, function () {
                        alert("自定义动画执行完毕");
                    });
                });
                $("button").eq(2).click(function () {
                    $(".one").animate({
                        // width: "hide"
                        width: "toggle"
                    }, 1000, function () {
                        alert("自定义动画执行完毕");
                    });
                })
            });
        </script>
    </head>
    <body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
    </body>
    </html>
    
    

stop和delay属性

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>48-jQuery的stop和delay方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .one{
                width: 100px;
                height: 100px;
                background: red;
            }
            .two{
                width: 500px;
                height: 10px;
                background: blue;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 编写jQuery相关代码
                $("button").eq(0).click(function () {
                    /*
                    在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行
                    */
                    /*
                    $(".one").animate({
                        width: 500
                        // height: 500
                    }, 1000);
    
                    $(".one").animate({
                        height: 500
                    }, 1000);
                    */
                    /*
                    delay方法的作用就是用于告诉系统延迟时长
                    */
                    /*
                    $(".one").animate({
                        width: 500
                        // height: 500
                    }, 1000).delay(2000).animate({  等两秒在执行
                        height: 500
                    }, 1000);
                    */
                    $(".one").animate({
                        width: 500
                    }, 1000);
                    $(".one").animate({
                        height: 500
                    }, 1000);
    
                    $(".one").animate({
                        width: 100
                    }, 1000);
                    $(".one").animate({
                        height: 100
                    }, 1000);
                });
                $("button").eq(1).click(function () {
                    // 立即停止当前动画, 继续执行后续的动画
                    // $("div").stop();
                    // $("div").stop(false);
                    // $("div").stop(false, false);
    
                    // 立即停止当前和后续所有的动画
                    // $("div").stop(true);
                    // $("div").stop(true, false);
    
                    // 立即完成当前的, 继续执行后续动画
                    // $("div").stop(false, true);
    
                    // 立即完成当前的, 并且停止后续所有的
                    $("div").stop(true, true);
                });
            });
        </script>
    </head>
    <body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one" ></div>
    <div class="two"></div>
    </body>
    </html>
    
    
  • 图标特效 无限滚动轮播

7.节点操作

7.1 添加节点相关方法
  • $(function () {
       /*
       内部插入
       append(content|fn)
       appendTo(content)
       会将元素添加到指定元素内部的最后
      
       prepend(content|fn)
       prependTo(content)
       会将元素添加到指定元素内部的最前面
    
    
  外部插入
  after(content|fn)
  会将元素添加到指定元素外部的后面
  
  before(content|fn)
  会将元素添加到指定元素外部的前面
  
  insertAfter(content)
  insertBefore(content)
  与上面的功能一样就是看把谁写在前面
  */
  $("button").click(function () {
      // 1.创建一个节点
      var $li = $("<li>新增的li</li>");
      // 2.添加节点
      $("ul").append($li);
      $("ul").prepend($li);
  
      // $li.appendTo("ul");
      // $li.prependTo("ul");

      // $("ul").after($li);
      // $("ul").before($li);
      // $li.insertAfter("ul");
  });

});
//html

<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<div>我是div</div>

###### 7.2 删除节点

* ```JavaScript
  $(function () {
      /*
      删除
      remove([expr])
      删除指定元素
      empty()
      删除指定元素的内容和子元素, 指定元素自身不会被删除
      detach([expr])
      */
      $("button").click(function () {
          // $("div").remove();
          // $("div").empty();
          // $("li").remove(".item");
  
          // 利用remove删除之后再重新添加,原有的事件无法响应
          // var $div = $("div").remove();
          // 利用detach删除之后再重新添加,原有事件可以响应,这样我在下面弄得点击事件还能响应
          var $div = $("div").detach();
          // console.log($div);
          $("body").append($div);
      });
      $("div").click(function () {
          alert("div被点击了");
      });
  });

7.3 替换节点
  • $(function () {
        /*
        替换
        replaceWith(content|fn)
        replaceAll(selector)
        替换所有匹配的元素为指定的元素
        */
        $("button").click(function () {
            // 1.新建一个元素
            var $h6 = $("<h6>我是标题6</h6>");
            // 2.替换元素
            // $("h1").replaceWith($h6);
            $h6.replaceAll("h1");
        });
    });
    
    
7.4 复制节点(分为浅复制和深复制)
  • $(function () {
       // clone([Even[,deepEven]])
       /*
       如果传入false就是浅复制, 如果传入true就是深复制
       浅复制只会复制元素, 不会复制元素的事件
       深复制会复制元素, 而且还会复制元素的事件
       */
       $("button").eq(0).click(function () {
           // 1.浅复制一个元素
           var $li = $("li:first").clone(false);
           // 2.将复制的元素添加到ul中
           $("ul").append($li);
       });
       $("button").eq(1).click(function () {
           // 1.深复制一个元素
           var $li = $("li:first").clone(true);
           // 2.将复制的元素添加到ul中
           $("ul").append($li);
       });
      
       $("li").click(function () {
           alert($(this).html());
       });
    });
    
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342