深入理解jQuery：核心、动画与事件处理-CSDN博客

本文链接：https://blog.csdn.net/feilixiaozi1/article/details/104373897

本文详细介绍了jQuery的入口函数、冲突解决、核心功能，包括jQuery对象、数组操作、静态与实例方法。重点讲解了内容选择器、属性和属性节点的管理，以及类、文本和CSS操作。此外，还探讨了jQuery的各种动画效果，如显示隐藏、展开收起、淡入淡出，以及事件绑定、事件冒泡和委托。最后，涉及到了jQuery中的节点操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入口函数

四种写法
推荐第三种写法

        //入口函数四种写法
        //第一种写法
        $(document).ready(function(){
            var $img=$('img')[0];
            console.log($img);
        });
        //第二种写法
        jQuery(document).ready(function(){
            var $img=$('img')[0];
            console.log($img);
        });
        //第三种写法
        $(function(){
            var $img=$('img')[0];
            console.log($img);
        });
        //第四种写法
        jQuery(function(){
            var $img=$('img')[0];
            console.log($img);
        });

冲突问题释放$使用权

//注意点：释放noConflict（）在其他jQuery代码块之前。释放完后就只能用jQuery了
jQery.noConflict();
jQery(function(){
	alert(1234);
});
//自定义使用的符号
var nj=jQuery.noconflict();
nj(function(){
	alert(1234);
});

jQuery核心函数

        //1.接收一个函数
        $(function(){
            //2.接收一个字符串
            //2.1就收一个字符串选择器
            //返回了一个jQuery对象，保留了找到的DOM元素
            var $div1=$('.div1');
            var $div2=$('div2');
            console.log($div1);
            console.log($div2);
            //2.2接受一个字符串代码片段
            //返回了一个jQuery对象，保留了找到的DOM元素
            var $p=$('<p>我是一个段落<p>');
            console.log($p);
            $div1.append($p);
            //3.接收一个DOM元素
            //包装成一个jQuery对象返回
            var oSpan=document.getElementsByTagName('span')[0];
            console.log(oSpan);
            var $span=$(oSpan);
            console.log($span);
        });

什么jQuery对象

1.jQuery对象是一个伪数组
2.什么是伪数组：有0到length-1的属性，并有length属性

jQuery数组操作

/*
eq函数返回的是jQuery对象
参数：索引
*/
var $btn=$("button").eq(0)；
/*
get函数返回的是DOM元素
参数：索引
*/
var oBtn=$("button").get(0);

静态方法和实例方法

    <script>
        //1.定义一个类
        function AClass(){}
        //2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法
        AClass.staticMethod=function(){
            alert('静态方法');
        };
        //静态方法通过类名调用
        AClass.staticMethod();
        //3.给这个类添加一个实例方法
        AClass.prototype.instanceMethod=function(){
            alert('实例方法');
        };
        //实例方法通过类的实例调用
        var a=new AClass();
        a.instanceMethod();
    </script>

jquery中静态方法

1.each方法

    <script>
        var arr=[1,2,3];
        var json={0:3,1:5,2:7,3:9,length:4};//伪数组，有0到length-1属性，还有length属性，但不能用forEach遍历，用for（in）

        //原生forEach
        /*
        第一个参数：当前遍历到的元素
        第二个参数：当前遍历到的索引
        注意点：原生的forEach只能遍历数组，不能遍历伪数组。
        */
        arr.forEach(function(value,index){console.log(index,value)});

        //1.jQuery静态方法each遍历数组
        /*
        第一个参数：当前遍历到的索引
        第二个参数：当前遍历到的元素
        */
        $.each(arr,function(index,value){
            console.log(index,value);
        });
        //2.jQuery静态方法each遍历伪数组
        $.each(json,function(index,value){
            console.log(index,value);
        });
    </script>

2.map方法

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

each和map的区别

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        var arr=[0,1,3,5,7];
        var json={0:3,1:5,2:7,3:9,length:4};
        /*
        jQuery中each静态方法与map静态方法返回值qubie
        each静态方法的返回值是，遍历谁就返回谁
        map静态方法的返回值是，默认为空数组

        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历数组进行处理，然后生成一个新的数组并返回
        */
        var res1=$.each(arr,function(index,value){});
        var res2=$.map(arr,function(index,value){});
        var res3=$.map(arr,function(index,value){
            return value+index
        });
        console.log(res1);
        console.log(res2);
        console.log(res3);
    </script>

3.jQuery其他静态函数

    <script>
        var str='    yyy    ';
        var arr=[1,2,3];
        var json={0:3,1:5,2:7,3:9,length:4};
        console.log(str);
        /*
        $.trim(str);
        作用：去除字符串两端的空格，不修改原字符串
        参数：需要去除空格的字符串
        返回值：去除空格之后的字符串
        */
        var res=$.trim(str);
        console.log(res);
        console.log(str);

        /*
        $.isWindow(obj)
        作用：判断传入的参数是不是window对象
        返回值：true/false
        */
        var w=window;
        var res1=$.isWindow(w);
        console.log(res1);//true

        /*
        $.isArray(obj)
        作用：判断传入的参数是不是数组
        返回值：真数组是true，伪数组是false
        */
        var res2=$.isArray(arr);//true
        var res3=$.isArray(json);//false

        /*
        $.isFunction(func)
        作用：判断传入的参数是不是函数
        返回值：true/false
        注意点：jquery框架本质上是一个函数
        */
        var fn=function(){};
        var res4=$.isFunction(fn);//true
        var res5=$.isFunction(jQuery);
        console.log(res4);
        console.log(res5);
    </script>

4.holdReady静态函数

    <script>
        //作用：暂停ready执行
        $.holdReady(true);
        $.ready(function(){
            alert(123);
        });
    </script>

jQuery内容选择器

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        //:contains(text)
        //:empty
        //:has(selector)
        //:parent
        $(function(){
            //:empty找到既没有文本内容也没用子元素的指定元素
            var $div=$('div:empty');
            console.log($div);
            //:parent找到有文本内容或者有子元素的指定元素
            var $div1=$('div:parent');
            console.log($div1);
            //:contains(txt)找到包含指定文本内容的指定元素
            var $div2=$("div:contains('n')");
            console.log($div2);
            //:has(selector)找到包含指定子元素的指定元素
            var $div3=$("div:has(span)");
            console.log($div3);
        });
    </script>

属性和属性节点

1.什么是属性？
对象身上保存的变量就是属性

2.如何操作属性？
对象.属性名称=值;
对象.属性名称;
对象[“属性名称”]=值;
对象[“属性名称”];

操作属性的方法

/*
1.prop方法
注意点：prop方法不仅能操作属性，也能操作属性节点
*/
//在操作属性节点有true和false时用prop其他都用attr
/*
2.removeProp方法
*/
$("span").eq(0).prop("demo","yqh");//eq(0)得到第一个span
$("span").removeProp("demo");

3.什么是属性节点？

在编写HTML代码时，在HTML标签中添加的属性就是属性节点。
在浏览器中找到span这个DOM元素之后，展开看到的都是属性。
在attributes属性中保持的所有内容都是属性节点。

4.怎么操作属性节点？
DOM元素.setAttribute(“属性名称”,“值”);
DOM元素.getAttribute(“属性名称”);

    <script>
        $(function(){
            var ospan=document.getElementsByTagName('span')[0];
            ospan.setAttribute("name","yqh");
            console.log(ospan.getAttribute("name"));
        });
    </script>

操作属性节点的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            1.attr(name|pro|key,val|fn);
            作用：获取或者设置属性节点的值
            可以传递一个参数，也可以传递两个参数
            如果传递一个参数，代表获取属性节点的值
            如果传递两个参数，代表设置属性节点的值
            
            注意点：
            如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点
            如果是设置，有多少设置多少
            如果设置的属性节点不存在，系统会自动为你创建
            2.removeAttr(name)
            作用删除属性节点

            注意点：
            会删除所有找到元素指定的属性节点
            如果要一次删除多个属性节点，就在""class name"中间加空格
            */
            $("span").attr("class","box");

        });
    </script>
</head>
<body>
    <span class="span1" name="123"></span>
    <span class="span2"></span>
</body>
</html>

5.属性和属性节点的区别？
任何对象都有属性，但只有DOM元素有属性节点

jQuery类操作相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        .class1{
            width: 150px;
            height: 150px;
            background: red;
        }
        .class2{
            border: 5px dashed;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        /*
        addClass(class|fn)
        作用：添加一个类
        如果想要同时添加多个类，就用空格隔开

        removeClass([class|fn])
        作用：删除一个类
        如果想要同时删除多个类，就用空格隔开

        toggleClass(class|fn[,sw])
        作用：切换类
        如果没有就添加类，如果有就删除
        */
        $(function(){
            var aBtn=document.getElementsByTagName('button');
            aBtn[0].onclick=function(){
                $("div").addClass("class1");
            };
            aBtn[1].onclick=function(){
                $("div").addClass("class2");
            };
            aBtn[2].onclick=function(){
                $("div").removeClass("class2");
            };
            aBtn[3].onclick=function(){
                $("div").addClass("class1 class2");
            };
            aBtn[4].onclick=function(){
                $("div").removeClass("class1 class2");
            };
            aBtn[5].onclick=function(){
                $("div").toggleClass("class1 class2");
            };
        });
    </script>
</head>
<body>
    <button>类一</button>
    <button>类二</button>
    <button>删除</button>
    <button>同时添加</button>
    <button>同时删除</button>
    <button>切换类</button>
    <div></div>
</body>
</html>

jQuery文本值相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;height: 200px;border: 3px solid;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        /*
        1.html([val|fn])
        和原生JS中的innerHTML一模一样
        2.text([val|fn])
        和原生JS中的innerTEXT一模一样
        val([val|fn|arr])
        */
        $(function(){
            var aBtn=document.getElementsByTagName("button");
            aBtn[0].onclick=function(){
                $("div").html("<p>我是段落<span>我是span</span></p>");
            };
            aBtn[1].onclick=function(){
                console.log($("div").html());
            };
            aBtn[2].onclick=function(){
                $("div").text("<p>我是段落<span>我是span</span></p>");
            };
            aBtn[3].onclick=function(){
                console.log($("div").text());
            };
            aBtn[4].onclick=function(){
                $("input").val("请输入内容");
            };
            aBtn[5].onclick=function(){
                console.log($("input").val());
            };
        });
    </script>
</head>
<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div id="div1"></div>
    <input type="text">
</body>
</html>

jQuery操作css样式的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;height: 200px;border: 2px solid black;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //通过css函数设置的是内联样式即行间样式
            //1.逐个设置
            $("div").css("background","red");
            $("div").css("height","100px");
            $("div").css("width","100px");

            //2.链式设置,建议大于三个就分开
            $("div").css("background","black").css("width","200px").css("height","200px");

            //3.批量设置
            $("div").css({
                width:"100px",
                height:"100px",
                background:"red"
            });
        });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery位置和尺寸的操作方法

1.尺寸和一部分位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid black;
            position: relative;
            margin: 50px auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        //width()获取的只是div的width的宽度,没有border之类的。
        $(function(){
            /*
            尺寸
            height([val|fn])
            width([val|fn])
            innerHeight()
            innerWidth()
            outerHeight([soptions])
            outerWidth([options])
            */
            var aBtn=document.getElementsByTagName("button");
            aBtn[0].onclick=function(){
                //获取元素宽度
                console.log($(".father").width());
            };
            aBtn[1].onclick=function(){
                //设置元素宽度
                console.log($(".father").width("200px"));
            };

            /*
            位置
            1.offset([coordinates])
            作用：获取元素距窗口的偏移位
            2.position()
            作用：获取元素距离定位点的偏移位
            scrollTop([val])
            scrollLeft([val])
            */
            var aBtn=document.getElementsByTagName("button");
            aBtn[0].onclick=function(){
                //获取元素宽度
                console.log($(".son").offset().left);
            };
            aBtn[1].onclick=function(){
                //设置元素宽度
                $(".son").offset({
                    left:10
                });
            };
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置/button>
</body>
</html>

2.另一部分位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .scroll{
            width: 90px;
            height: 90px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var aBtn=document.getElementsByTagName("button");
            aBtn[1].onclick=function(){
                //获取滚动的偏移位
                console.log($(".scroll").scrollTop());

                //获取网页的滚动偏移位
                //注意：在IE下用html得到的偏移量是0，chrome下用body得到的是0
                //为了兼容所以用一下相加方式
                console.log($("body").scrollTop()+$("html").scrollTop());
            };
            aBtn[0].onclick=function(){
                //设置滚动的偏移位
                $(".scroll").scrollTop(40);
                //设置网页的偏移量
                //注意点：为了兼容必须按照一下写法
                $("html,body").scrollTop(300);
            };
        });
    </script>
</head>
<body style="height:2000px">
<div class="scroll">
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div    我是div    我是div    我是div
    我是div    我是div    我是div    我是div    我是div
</div>
<button>设置</button>
<button>获取</button>
</body>
</html>

事件

1.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            1.eventName(fn)
            编码效率略高，有联想 / 部分事件jQuery没有实现，不能添加
            2.on(eventName,fn)
            编码效率低，用字符串写无联想 / 所有js事件都可以添加

            注意点：可以添加多个类型相同事件，不会覆盖
                    也可以添加多个不同事件
            */
            $("button").click(function(){
                alert(123);
            });
            $("button").on("click",function(){
                alert(1);
            });
        });
    </script>
</head>
<body>
    <button>你好</button>
</body>
</html>

2.事件解绑

            //off（）不传参数代表移除所有事件
            $("buttom").off();
            //一个参数代表移除指定类型的事件
            $("button").off("click");
            //两个参数代表移除指定类型的指定事件
            $("button").off("click",text1);

3.jQuery事件冒泡和默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        /*
        1.什么是事件冒泡？
        2.如何阻止事件冒泡
        3.什么是默认行为？
        例如点击a标签会自动跳转
        4.如何阻止默认行为？
        */
        $(function(){
            $(".son").click(function(event){
            alert("son");
            //两种阻止事件冒泡
            /*
            1.event.stopPropagation();
            2.return false;
            */
        });
        $(".father").click(function(){alert("father");});

        //阻止默认事件
        $("a").click(function(event){
            alert("阻止默认事件");
            return false;
            //event.stopPropagation();
        });
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="https://www.baidu.com">我是百度</a>
    //阻止默认行为
    <a href="https://www.baidu.com">注册</a>
    <form action="https://www.taobao.com">
        <input type="text"><br>
        <input type="text"><button>提交</button>
    </form>
</body>
</html>

4.事件自动触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".father").click(function(){
                alert("father");
            })
            $(".son").click(function(){
                alert("son");
            });
            //$(".father").trigger("click");
            //$(".father").triggerHandler("click");
            /*
            trigger：如果用trigger自动触发事件，会触发事件冒泡   
            triggerHandler:如果用triggerHandler自动触发事件，不会触发事件冒泡
            */
            //$(".son").trigger("click");
            //$(".son").triggerHandler("click");
            $("input[type='submit']").click(function(){
                alert("submit");
            });
            /*
            trigger：如果利用trigger自动触发事件，会触发默认行为。
            triggerHandler：如果用triggerHandler自动触发事件，不会触发默认行为。
            */
            //$("input[type='submit']").trigger("click");
            $("input[type='submit']").triggerHandler("click");
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="https://www.baidu.com">我是百度</a>
    //阻止默认行为
    <a href="https://www.baidu.com">注册</a>
    <form action="https://www.taobao.com">
        <input type="text"><br>
        <input type="submit"><button>提交</button>
    </form>
</body>
</html>

5.自定义事件

        <script src="jquery/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                /*
                想要自定义事件，必须满足两个条件
                1.事件必须通过on绑定的
                2.事件必须通过trigger或者triggerHandler来触发
                */
                $(".son").on("myClick",function(){
                    alert("myClick");
                });
                $(".son").trigger("myClick");
                $(".son").triggerHandler ("myClick");
            });
        </script>

6.事件命名空间
1.利用trigger除法子元素戴命名空间的事件，那么父元素带相同命名空间的事件也会被触发。而父元素没有命名空间的事件不会触发。
2.利用trigger触发子元素不戴命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发。

        <script src="jquery/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                /*
                想定义事件命名空间有效，必须满足两个条件
                1.事件通过on来绑定
                2.通过trigger或者triggerHandler触发事件
                */
                $(".son").on("click.zs",function(){
                    alert("click.zs");
                });
                $(".son").on("click.ls",function(){
                    alert("click.ls");
                });

            });
        </script>

7.事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            1.什么是事件委托？
            请别人帮忙做事情，然后把做完的结果反馈给我们
            */
            $("button").click(function(){
                $("ul").append("<li>我是新增的li</li>");
            });
            /*
            jquery中，如果通过核心函数找到的元素不止一个，那么在添加事件得时候，
            jquery会遍历所有找到的元素，给所有找到的元素添加事件。
            */
            $("ul>li").click(function(){
                console.log($(this).html());
            });

            /*
            事件委托就是可以找一个在入口函数执行之前就有的一个元素，
            来监听你动态添加的元素事件。

            把li元素的click事件委托给ul监听
            这里的li元素本身并没有click事件，但当点击li元素时，
            由于事件冒泡传递给ul。ul有事件，触发委托。
            this是指被点击的li元素。
            */
            $("ul").delegate("li","click",function(){
                console.log($(this).html());
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>
    <button>新增一个li</button>
</body>
</html>

8.事件的移入移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .father{
            width: 200px;height: 200px;background: red;
        }
        .son{
            width: 100px;height: 100px;background: blue;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            mouseover和mouseout事件，子元素移入移出都会触发父元素
            移入移出事件。
            */
            $(".father").mouseover(function(){
                console.log("移入");
            });
            $(".father").mouseout(function(){
                console.log("移出");
            });

            /*
            mouseenter和mouseleave事件，子元素被移入移出不会触发父元素
            移入移出事件。
            推荐使用这种方法。

            hover可以看源码也是用上述方法实现的。
            */
            $(".father").mouseenter(function(){
                console.log("移入");
            });
            $(".father").mouseleave(function(){
                console.log("移出");
            });

            $(".father").hover(function(){console.log("移入");},function(){console.log("移出");});
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

电影排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 300px;height: 450px;
            margin: 50px auto;
            border: 1px solid black;
        }
        .box>h1{
            color: deeppink;
            line-height: 35px;
            padding-left: 10px;
            font-size: 20px;
            border: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed #ccc;
        }
        ul>li:nth-child(-n+3) span{
            background:deeppink;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;height: 20px;background: #ccc;
            text-align: center;line-height: 20px;
            margin-right: 10px;
        }
        .content{
            overflow: hidden;
            display: none;
        }
        .content>img{
            width: 80px;height: 130px;
            float: left;
        }
        .content>p{
            width: 180px;height: 120px;float: right;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //1.监听li移入事件
            $("li").mouseenter(function(){
                $(this).addClass("current");
            });
            //2.监听li移出事件
            $("li").mouseleave(function(){
                $(this).removeClass("current");
            });

            $("li").hover(function(){
                $(this).addClass("current");}
            ,function(){
                $(this).removeClass("current");
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>电影名称
            <div class="content">
                <img src="pic/11.jpg" alt="">
                <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
            </div></li>
            <li><span>2</span>电影名称
                <div class="content">
                    <img src="pic/11.jpg" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
                </div></li>
            <li><span>3</span>电影名称
                <div class="content">
                    <img src="pic/11.jpg" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
                </div></li>
            <li><span>4</span>电影名称
                <div class="content">
                    <img src="pic/11.jpg" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
                </div></li>
            <li><span>5</span>电影名称
                <div class="content">
                    <img src="pic/11.jpg" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
                </div></li>
            <li><span>6</span>电影名称
                <div class="content">
                    <img src="pic/11.jpg" alt="">
                    <p>《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造，《战狼》真实呈现了一场中外边境战争，也让堪称“东方之狼”的特种兵战队及高能战士首次登陆大银幕。讲述的是小人物成长为拯救国家和民族命运的孤胆英雄的传奇故事 </p>
                </div></li>
        </ul>
    </div>
</body>
</html>

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 400px;height: 430px;margin: 50px auto;
            border: 1px solid black;
        }
        .nav>li{
            width: 100px;height: 30px;
            list-style: none;float: left;
            text-align: center;background: orange;
            line-height: 30px;
        }
        .nav>.current{
            background: #ccc;
        }
        .content>li{
            list-style: none;
            display: none;
        }
        .content>.show{
            display: block;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".nav>li").mouseenter(function(){
                $(this).addClass("current");
                //siblings()选中非当前元素的其他兄弟元素
                $(this).siblings().removeClass("current");
                var index=$(this).index();
                var $li=$(".content>li").eq(index);
                $li.siblings().removeClass("show");
                $li.addClass("show");
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li class="current">111</li>
            <li>211</li>
            <li>311</li>
            <li>411</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="pic/A.jpg" alt=""></li>
            <li><img src="pic/B.jpg" alt=""></li>
            <li><img src="pic/C.jpg" alt=""></li>
            <li><img src="pic/D.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

jQuery显示动画和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;height: 200px;background: red;
            display: none;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
            //第一个参数：动画播放时间ms
                $("div").show(1000,function(){
                //第二个参数：动画播放完成后响应函数
                    alert(123);
                });
            });

            $("button").eq(1).click(function(){
            //第一个参数：动画隐藏时间ms
                $("div").hide(1000,function(){
                //第二个参数：动画隐藏完成后响应函数
                    alert(123);
                });
            });

            $("button").eq(2).click(function(){
            //动画切换函数，隐藏就播放，播放就隐藏
                $("div").toggle(1000,function(){
                    alert(123);
                });
            });
        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

对联广告（动画隐藏和显示实例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            float: left;display: none;
            position: fixed;left: 0;top: 330px;
        }
        .right{
            float:right;display: none;
            position: fixed;right: 0;top: 330px;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //监听网页滚动
            $(window).scroll(function(){
                //获取网页滚动的偏移量
                var offset=$("html,body").scrollTop();
                //判断网页是否滚动到指定位置
                if(offset>=500){
                    $("img").show(800);
                }else{
                    $("img").hide(800);
                }
            });
        });
    </script>
</head>
<body style="height: 4000px;">
    <img src="pic/11.jpg" alt="" class="left">
    <img src="pic/12.jpg" alt="" class="right">
</body>
</html>

jQuery展开和收起动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;height: 250px;background: red;
            display: none;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
            /*
            	slideDown和slideUp和slideToggle函数
				两个参数：
				第一个参数：动画播放时间ms
				第二个参数：动画播放完毕响应的函数
			*/
                $("div").slideDown(1000);
            });
            $("button").eq(1).click(function(){
                $("div").slideUp(1000);
            });
            $("button").eq(2).click(function(){
                $("div").slideToggle(1000);
            });
        });
    </script>
</head>
<body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>
</html>

折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .nav{
            width: 300px;margin: 60px auto;
        }
        .nav>li{
            width: 300px;
            line-height: 50px;
            list-style: none;
            border: 1px solid black;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }
        .nav>li:first-child{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .nav>li:last-child{
            border-bottom: 1px solid black;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .nav>li>span{
            background: url("pic/小右箭头30.jpg") no-repeat center center;
            width: 30px;height: 30px;
            display: inline-block;
            position: absolute;
            right: 15px;top: 10px;
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }
        .sub{
            display: none;
        }
        .sub>li{
            list-style: none;
            background: purple;
            border: 1px solid white;
        }
        .sub>li:hover{
            background: red;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //1.1监听一级菜单的点击事件
            $(".nav>li").click(function(){
                //1.2拿到二级菜单
                var $sub=$(this).children(".sub");
                //1.3让二级菜单展开
                $sub.slideDown(1000);
                //1.4拿到所有非当前一级菜单的二级菜单
                var $other=$(this).siblings().children(".sub");
                //1.5让非当前的二级菜单收回
                $other.slideUp(1000);
                //1.6让被点击的一级菜单箭头旋转
                $(this).addClass("current");
                //1.7让所有非被点击的一级菜单恢复
                $(this).siblings().removeClass("current");
            });
        });
    </script>
</head>
<body>
    <ul class="nav">
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>            
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
        <li>第一级菜单<span></span>
            <ul class="sub">
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
                <li>第二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .nav{
            width: 400px;height: 50px;
            margin: 50px auto;
            background:red;
        }
        .nav>li{
            list-style: none;float: left;
            width: 100px;height: 50px;
            text-align: center;line-height: 50px;
        }
        .sub{
            width: 100px;height: 300px;background: mediumpurple;
            display: none;
        }
        .sub>li{
            list-style: none;width: 100px;height: 50px;
            line-height: 50px;text-align: center;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            在jQuery中执行动画，建议在执行动画之前先调用stop方法，
            再执行动画。
            */
            $(".nav>li").mouseenter(function(){
                //停止当前正在运行的动画
                /*
				stop方法有两个参数,
				第一个参数：是否完成后续动画，默认是false，false是完成后续动画
				第二个参数：是否立即完成当前动画
				*/
                $(".sub").stop();
                $(".sub").slideDown(1000);
            });
            $(".nav>li").mouseleave(function(){
                $(".sub").stop();
                $(".sub").slideUp(1000);
            });
        });
    </script>
</head>
<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单</li>
        <li>一级菜单</li>
        <li>一级菜单</li>
    </ul>
</body>
</html>

jQuery淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;height: 200px;background: red;display: none;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn(1000);
            });
            $("button").eq(1).click(function(){
                $("div").fadeOut(1000);
            });
            $("button").eq(2).click(function(){
                $("div").fadeToggle();
            });
            $("button").eq(3).click(function(){
                /*
                fadeTo方法三个参数
                1.动画执行时间ms
                2.透明度0-1
                3.方法
                */
                $("div").fadeTo(1000,0.5,function(){
                    alert("淡入到");
                });
            });
        });
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>
</html>

jQuery自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;height: 100px;background: red;
        }
        #div2{
            width: 150px;height: 100px;background: blue;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                /*
                animate方法四个参数
                1：接收一个对象，要修改的属性
                2：动画执行时间ms
                3：指定动画节奏，默认是swing
                4：回调函数
                */
                $("#div1").animate({width:400,height:150},1000,function(){
                    alert(123);
                });
            });

            $("button").eq(1).click(function(){
                $("#div1").animate({
                    //累加属性，永远在原来的基础上加
                    width:"+=100"
                    },1000,function(){
                }); 
            });

            $("button").eq(2).click(function(){
                $("#div1").animate({
                    //关键字
                    //width:"hide"
                    width:"toggle"
                    },1000,function(){
                });
            });
        });
    </script>
</head>
<body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

无限循环滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{
            width: 260px;height: 130px;margin: 200px auto;overflow: hidden;
        }
        ul{
            width: 780px;height: 130px;
        }
        li{
            width: 130px;height: 130px;list-style: none;float: left;
        }
    </style>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var timer=null;
            var offset=0;
            function move(){
                timer=setInterval(function(){
                offset-=4;
                if(offset<=-520){
                    offset=0;
                }
                $("ul").css("marginLeft",offset);
            },30);
            }
            move();
            //监听所有li元素的移入移出事件
            $("li").hover(function(){
                clearInterval(timer);
                //给非当前滚动添加蒙版
                $(this).siblings().fadeTo(0,0.5);
                //为了防止闪白光，将fadeTo的时间参数设为0即可
                $(this).fadeTo(0,1);
            },function(){
                move();
                $("li").fadeTo(0,1);
            });
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li><img src="pic/11.jpg" alt=""></li>
            <li><img src="pic/12.jpg" alt=""></li>
            <li><img src="pic/13.jpg" alt=""></li>
            <li><img src="pic/14.jpg" alt=""></li>
            <li><img src="pic/11.jpg" alt=""></li>
            <li><img src="pic/12.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

jQuery中节点操作方法

1.添加节点的方法

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        /*
        内部插入
        append(content|fn)和 appendTo(content)
        会将元素插入到指定元素内部的最后

        prepend(content|fn)和prependTo(content)
        会将元素插入到指定元素内部的最前面

        外部插入
        after(content|fn)和insertAfter(content)
        会将元素插入到指定元素外部的后面

        before(content|fn)和insertBefore(content)
        会将元素插入到指定元素外部的前面
        */
        $(function(){
            $("button").click(function(){
                var $li=$("<li>新增的节点</li>");
                //$("ul").append($li);
                //$("ul").prepend($li);
                //$li.appendTo("ul");
                //$("ul").after($li);
                $li.insertAfter("ul");
        }); 
        });
    </script>

2.删除节点的方法

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                /*
                remove([expr])和detach([expr])
                删除指定元素
                empty()
                删除指定元素的内容和子元素,但不删除本身
                */
                //$("ul").remove();
                //$("li").remove(".item");
                //$("ul").empty();
                var $li=$("li");
                $li.detach(".item");
            });
        });
    </script>

3.替换元素的方法

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            替换
            replaceWith(content|fn)
            替换所有匹配元素为指定元素

            replaceAll(selector)
            和上面的一样，只是调用方式不一样
            */
            $("button").click(function(){
                //创建一个新元素
                var $h4=$("<h4>我是h4</h4>");
                //$("h1").replaceWith($h4);
                $h4.replaceAll("h1");
            });
        });
    </script>

4.复制元素的方法

    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            复制
            clone([Even[,deepEven]])
            如果传入的是false就是浅复制，true是深复制
            浅复制只会复制元素不会复制元素事件
            深复制既复制元素也复制元素事件
            */
            $("button").eq(0).click(function(){
                //浅复制
                var $li=$("li:first").clone(false);
                $("ul").append($li);
            });
            $("button").eq(1).click(function(){
                 //深复制
                var $li1=$("li:first").clone(true);
                $("ul").append($li1);
            });

            $("li").click(function(){
                alert(123);
            });
        });
    </script>