JQuery

JavaScript library

Warehouse: You can put many things in this warehouse. To find something, you only need to search it in the warehouse.

JavaScript library: library, which is a specific encapsulated collection (methods and functions). Understanding the library from the perspective of encapsulating a lot of functions is that in this library, many predefined functions are encapsulated in it, such as animation, hide, show, and getting elements, etc.

Simple understanding: It is a JS file, which encapsulates our native js code and stores it inside. In this way, we can use these encapsulated functions quickly and efficiently.

For example, jQuery is designed to operate the DOM quickly and conveniently, and it is basically filled with functions (methods).

Basic usage of jQuery

The basic steps

Introducing jQuery

<script src="../js文件/jquery.min.js"></script>

Just use it

jQuery entry function

	// 1.等着页面DOM加载完毕再去执行js代码
    $(document).ready(function() {
    
    
        ...   //此处是页面DOM加载完成的入口
    })
    // 2.等着页面DOM加载完毕再去执行js代码
    $(function() {
    
    
         ...   //此处是页面DOM加载完成的入口
    })

The internal code can be executed after the DOM structure is rendered. There is no need to wait for all external resources to be loaded. jQuery helps us complete the encapsulation.
Equivalent to DOMContentLoaded in native js.
Different from the load event in native js, it waits for the page document, external js file, css file, and image to be loaded before executing the internal code.

jQuery top-level object$

$It is another name for jQ uery . You can use jQ uery instead in the code$ , but generally for convenience, $ is usually used $directly$ $.$
$It is the top - level object of jQuery, which is equivalent to the window in native JavaScript ._By wrapping the element$ into a Query object, you can call jQuery methods.

jQuery objects and DOM objects

The object obtained using native JS is the DOM object
The elements obtained by the jQuery method are jQuery objects.
The essence of a jQuery object is: an object generated by packaging a DOM object using $ (stored in the form of a pseudo-array).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        var mydiv = document.querySelector('div')
        console.dir(mydiv)

        $('div')
        console.dir($('div'))
        // jQuery 对象只能使用jQuery方法，DOM对象则使用原生的 JavaScirpt属性和方法
        // mydiv.style.display = 'none'
        // mydiv.hide()这个无法实现
        // $('div').style.display = 'none'这个无法实现

    </script>
</body>
</html>

DOM objects and jQuery objects can be converted to each other.

Because native js is larger than jQuery, some native properties and methods are not encapsulated by jQuery for us. To use these properties and methods, we need to convert the jQuery object into a DOM object before we can use it.

Convert DOM object to jQuery object: $(DOM object)

$('div')

Convert jQuery object to DOM object (two ways)

$('div')[index]      index是索引号

$('div').get(index)    index是索引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <video src="mov.mp4" muted></video>
    <script>
        // DOM对象转换为jQuery对象
        //(1）我们直接获取视频，得到就是jQuery对象I
        $('video')
        // (2）我们已经使用原生js获取过来DOM对象
        var myvideo = document.querySelector('video')
        $(myvideo)
        // jQuery对象转换为DOM对象
        // myvideo.play()
        $(myvideo)[0].play()
        $(myvideo).get(0).play()
    </script>
</body>
</html>

Commonly used APIs

jQuery selector

There are many ways to obtain elements in native S, which are very complicated and have inconsistent compatibility. Therefore, jQuery has encapsulated them for us to make the acquisition of elements unified and standard.

$(“选择器”)//里面选择器直接写CSS选择器即可，但是要加引号

Basic selector

name	usage	describe
ID selector	$(‘#id’)	Get the element with the specified ID
Select all selector	$(‘*’)	match all elements
class selector	$(‘.class’)	Get elements of the same class
tag selector	$(‘div’)	Get all elements of the same type of tag
Union selector	$(‘div,p,li’)	Select multiple elements
Intersection selector	$(‘li.current’)	intersection element

level selector

name	usage	describe
descendant selector	$(“ul>li”);	Use the > sign to obtain elements at the parent-child level; note that elements at the grandchild level will not be obtained.
descendant selector	$(“ul li”);	Use spaces to represent descendant selectors to get all li elements under ul, including grandchildren, etc.

jQuery implicit iteration

The process of traversing internal DOM elements (stored in pseudo-array form) is called implicit iteration.

Simple understanding: loop through all the matched elements and execute the corresponding method without us having to loop again, simplifying our operations and making it easier for us to call.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>
    <script>
        //1.获取四个div
        $('div')
        //2.设置颜色  jquery不能使用style
        $('div').css('background','pink')
        $('ul li').css('color','red')
    </script>
</body>
</html>

jQuery filter selector

grammar	usage	describe
:first	$(‘li:first’)	Get the first li element
:last	$(‘li:last’)	Get the last li element
:eq(index)	$('li:eq(2)')	Among the obtained li elements, select the element with index number 2, and the index number index starts from 0.
:odd	$(‘li:odd’)	Among the obtained li elements, select the element with an odd index number
:even	$(‘li:even’)	Among the obtained li elements, select the element with an even index number.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>
    <script>
        //1.获取四个div
        $('div')
        //2.设置颜色  jquery不能使用style
        $('div').css('background','pink')
        $('ul li').css('color','red')
        $(function() {
      
      
            $('div:first').css('color','red')
            $('ul li:eq(2)').css('color','blue')
        })
    </script>
</body>
</html>

jQuery filtering method (key points)

grammar	usage	describe
parent()	$(“li”).parent();	Find parent
children(selector)	$(“ul”).children(“li”);	Equivalent to $("u1>li"), the closest level (biological son)
find(selector)	$(“ul”).find(“li”);	Equivalent to $(""ul li"), descendant selector
siblings(selector)	$(“.first”).siblings(“li”);	Find sibling nodes, excluding itself
nextAll([expr])	$(“.first”).nextAll();	Find all sibling elements after the current element
prevtAll([expr])	$(“.last”).prevtAll();	Find all sibling elements before the current element
hasClass(class)	$(“div”).hasClass(‘protected’);	Checks whether the current element contains a specific class, if so, returns true
eq(index)	$(“li”).eq(2);	Equivalent to $("li:eq(2)"), index starts from 0

Key points to remember: parent() children() find() siblings() eq()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="gf">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>wsp</p>
        <div>
            <p>wspp</p>
        </div>
    </div>
    <ol>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <script>
        // 注意一下都是方法带括号
        $(function() {
      
      
            //父   parent()
            console.log($('.son').parent());
            //子
            // (1)亲儿子 children(selector)
            $(".nav").children('p').css('color','red');
            //兄
            $(function() {
      
      
                //1．兄弟元素siblings除了自身元素之外的所有亲兄弟
                $('ol .item').siblings('li').css('color','red')
                // 2．第n个元素
                // (1)我们可以利用选择器的方式选择
                $("ul li:eq(2)").css('color','red')
                // (2）我们可以利用选择方法的方式选择（推荐）
                $("ul li").eq(2).css('color','red')
                // 3．判断是否有某个类名
                $("div:first").hasClass('current')
            })
        })
    </script>
</body>
</html>

Sina drop down menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        a {
      
      
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
      
      
            margin: 100px;
        }
        
        .nav>li {
      
      
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
      
      
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
      
      
            background-color: #eee;
        }
        
        .nav ul {
      
      
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
      
      
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
      
      
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
      
      
            // 鼠标经过
            $('.nav>li').mouseover(function() {
      
      
                // $(this) jQuery    当前元素  this不要加引号
                // show()  显示元素
                $(this).children("ul").show()

            })
            // 鼠标离开
            $(".nav>li").mouseout(function() {
      
      
                $(this).children("ul").hide();
            })
        })
    </script>
</body>
</html>

Exclusionary thinking

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <script>
        $(function() {
      
      
            // 1．隐式迭代给所有的按钮都绑定了点击事件
            $("button").click(function() {
      
      
                //2．当前的元素变化背景颜色
                $(this).css("background","pink")
                // 3．其余的兄弟去掉背景颜色
                $(this).siblings("button").css("background",'')
                // 链式编程
                $(this).css('color','red').siblings().css('color','')
            })
        })
    </script>
</body>
</html>

jQuery style manipulation

jQuery can use css methods to modify simple element styles; it can also operate classes to modify multiple styles.

If only the attribute name is written as a parameter, the attribute value will be returned.
```
$(this).css('color');
```
The parameters are the attribute name and attribute value, separated by commas. They are to set a set of styles. The attributes must be enclosed in quotation marks. If the value is a number, it does not need to be followed by units or quotation marks.
```
$(this).css('color',"red");
```
Parameters can be in the form of objects to facilitate setting multiple sets of styles. The attribute name and attribute value are separated by a colon, and the attribute does not need a plus sign.
```
$(this).css('color':"red","font-size":"20px");
```

Set class style method

The function is the same as the previous classList, which can operate class styles. Be careful not to add dots to the parameters in the operation class.

Add class
```
$("div").addClass("current");
```
Remove class
```
$("div").removeClass("current")
```
switch class
```
$("div").toggleClass("current")
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .current {
      
      
            background-color: pink;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="current"></div>
    <script>
        $(function() {
      
      
            // //1．添加类addc1ass()
            // $("div").addClass("current")
            // // 2．删除类 removeClass()
            // $("div").removeClass("current")
            // // 1．切换类 toggleClass()
            // $("div").toggleClass("current")
            $("div").click(function() {
      
      
                $(this).toggleClass("current")
            })
        })
    </script>
</body>
</html>

tab bar switching

Click the upper li to add the current class to the current li and remove the classes from the other brothers.

While clicking, get the index number of the current li

Let the item with the corresponding index number in the lower part be displayed and the remaining items hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        .tab {
      
      
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
      
      
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
      
      
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
      
      
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
      
      
            padding: 20px 0 0 20px;
        }
        
        .item {
      
      
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        // 1.点击上部的li，当前li添加current类，其余兄弟移除类。
        $(function() {
      
      
            $(".tab_list li").click(function() {
      
      
                $(this).addClass('current').siblings().removeClass("current")
                // 2.点击的同时，得到当前li的索引号
                var index = $(this).index()
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide()
            })
        })
        
        

    </script>
</body>
</html>

The difference between class operations and className

The className in native JS will overwrite the original class name in the element.

Class operations in jQuery only operate on the specified class and do not affect the original class name.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform: rotate(360deg);
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div class="one"></div>
    <script>
        // var one = document.querySelector(".one")
        // one.className = "two"
        // $(".one").addClass("two")   这个addclass相当于追加类名不影响以前的类名
        // $(".one").removeClass("two")
    </script>
</body>
</html>

jQuery effect

jQuery encapsulates many animation effects for us, the most common ones are as follows:

showhide	slide	fade in and fade out	Custom animation
show()	slideDown()	fadeln()	animate()
hide()	slideUp()	fadeOut()
toggle()	slideToggle()	fadeToggle()
		fadeTo()

Show syntax specifications

show([speed,[easing],[fn]])

Display parameters

(1) Parameters can be omitted and displayed directly without animation.

(2) speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (eg: 1000).

(3) easing: (Optional) is used to specify the switching effect. The default is "swing" and the available parameter is "linear".

(4) fn: callback function, a function executed when the animation is completed, executed once for each element.
Hidden syntax specifications

hide([speed,[easing],[fn]])

Display parameters

(1) Parameters can be omitted and displayed directly without animation.

(2) speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (eg: 1000).

(3) easing: (Optional) is used to specify the switching effect. The default is "swing" and the available parameter is "linear".

(4) fn: callback function, a function executed when the animation is completed, executed once for each element.
Switch syntax specifications

toggle ([speed,[easing],[fn]])

Display parameters

(1) Parameters can be omitted and displayed directly without animation.

(2) speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (eg: 1000).

(3) easing: (Optional) is used to specify the switching effect. The default is "swing" and the available parameter is "linear".

(4) fn: callback function, a function executed when the animation is completed, executed once for each element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>

</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

    <script>
        $(function() {
      
      
            $("button").eq(1).click(function() {
      
      
                $("div").hide(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })

            $("button").eq(0).click(function() {
      
      
                $("div").show(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })
            $("button").eq(2).click(function() {
      
      
                //一般情况下，我们都不加参数直接显示隐藏就可以了
                $("div").toggle(1000)
            })
        })
    </script>
</body>
</html>

sliding effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>

    <script>
        $(function() {
      
      
            $("button").eq(1).click(function() {
      
      
                // 上拉滑动
                $("div").slideUp(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })

            $("button").eq(0).click(function() {
      
      
                // 下拉滑动
                $("div").slideDown(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })
            $("button").eq(2).click(function() {
      
      
                //一般情况下，我们都不加参数直接显示隐藏就可以了
                $("div").slideToggle(1000)
            })
        })
    </script>
</body>
</html>

event switching

hover([over,]out)

(1) over: The function to be triggered when the mouse moves over the element (equivalent to mouseenter)

(2) out: The function to be triggered when the mouse moves out of the element (equivalent to mouseleave)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        a {
      
      
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
      
      
            margin: 100px;
        }
        
        .nav>li {
      
      
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
      
      
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
      
      
            background-color: #eee;
        }
        
        .nav ul {
      
      
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
      
      
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
      
      
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
      
      
            // // 鼠标经过
            // $('.nav>li').mouseover(function() {
      
      
            //     // $(this) jQuery    当前元素  this不要加引号
            //     // show()  显示元素
            //     // $(this).children("ul").show()
            //     $(this).children("ul").slideDown(500)

            // })
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
      
      
            //     $(this).children("ul").slideUp(200)
            // })

            // 1.事件切换   hover就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
      
      
            //     $(this).children("ul").slideDown(500)
            // },function() {
      
      
            //     $(this).children("ul").slideUp(200)
            // })
            // 2.事件切换 hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
      
      
                // stop  方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle(300)
            })
        })
    </script>
</body>
</html>

Animation queue and its stop queuing method

1. Animation or effects queue

An animation or effect will be executed once triggered. If triggered multiple times, multiple animations or effects will be queued for execution.

2. Stop queuing

stop()

(1) The stop(method is used to stop animation or effects.

(2) Note: stop(written before the animation or effect is equivalent to stopping and ending the last animation.

Fade effect

1. Grammatical specifications for fade-in effects

fadeIn([speed,[easing],[fn]])

2. Grammar specifications for fade-out effects

fadeOut([speed,[easing],[fn]])

3. Switching effect syntax specifications

fadeToggle([speed,[easing],[fn]])

4. Gradually adjust to the specified opacity

fadeTo([speed,opacity,[easing],[fn]])

Effect parameters

(1) Opacity transparency must be high, with a value between 0 and 1.

(2) speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value indicating the animation duration (such as: 1000). Must write

(3) easing: (Optional) is used to specify the switching effect. The default is "swing" and the available parameter is "linear".

Highlight effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        ul {
      
      
            list-style: none;
        }
        
        body {
      
      
            background: #000;
        }
        
        .wrap {
      
      
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
      
      
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
      
      
            display: block;
            border: 0;
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
    <script>
        $(function() {
      
      
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".warp li").hover(function() {
      
      
                $(this).siblings().stop().fadeTo(400,0.5)
            },function() {
      
      
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400,1)
            })
        })
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="../素材/images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>

    
</body>
</html>

Custom animationanimate

grammar

animate(params,[speed],[easing],[fn])

parameter

(1) params: The style attributes you want to change, passed in object form, must be written. The attribute name does not need quotes. If it is a compound attribute, it needs to use the camel case borderLeft naming method. All other parameters can be omitted.

(2) speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (eg: 1000).

(3) easing: (Optional) is used to specify the switching effect. The default is "swing" and the available parameter is "linear".

(4) fn: callback function, a function executed when the animation is completed, executed once for each element.

Honor of Kings accordion effect

There are two steps when the mouse passes over a small li:
the width of the current small li changes to 224px, and at the same time, the small picture inside fades out, and the large picture fades in. The width of the other small li changes to 69px, the small picture fades in, and the large picture fades out.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        img {
      
      
            display: block;
        }
        
        ul {
      
      
            list-style: none;
        }
        
        .king {
      
      
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
      
      
            overflow: hidden;
        }
        
        .king li {
      
      
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
      
      
            width: 224px;
        }
        
        .king li.current .big {
      
      
            display: block;
        }
        
        .king li.current .small {
      
      
            display: none;
        }
        
        .big {
      
      
            width: 224px;
            display: none;
        }
        
        .small {
      
      
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="../js文件/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
      
      
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
      
      
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
      
      
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
      
      
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="../素材/images/m1.jpg" alt="" class="small">
                    <img src="../素材/images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/l1.jpg" alt="" class="small">
                    <img src="../素材/images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/c1.jpg" alt="" class="small">
                    <img src="../素材/images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/w1.jpg" alt="" class="small">
                    <img src="../素材/images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/z1.jpg" alt="" class="small">
                    <img src="../素材/images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/h1.jpg" alt="" class="small">
                    <img src="../素材/images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/t1.jpg" alt="" class="small">
                    <img src="../素材/images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

jQuery attribute manipulation

The so-called intrinsic attributes of an element are the attributes that come with the element itself, such as the href in the element, such as the type in the element.

1. Get attribute syntax

prop("属性")

2. Set attribute syntax

prop("属性","属性值")

Set or get element custom attribute value attr()

Attributes added by users themselves to elements are called custom attributes. For example, add index = "1" to the div.

1. Get attribute syntax

attr(''属性'')      // 类似原生 getAttribute()

2. Set attribute syntax

attr(''属性'', ''属性值'')   // 类似原生 setAttribute()

You can also get H5 custom attributes by changing the method.

Data cache data()

The data() method can access data on the specified element and does not modify the DOM element structure. Once the page is refreshed, all previously stored data will be removed.

1. Additional data syntax

data(''name'',''value'')   // 向被选元素附加数据

2. Get data syntax

date(''name'')             //   向被选元素获取数据

At the same time, you can also read the HTML5 custom attribute data-index, and get a numeric value.

jQuery content text value

Mainly for element content and form value operations.

1. Ordinary element content html() (equivalent to native inner HTML)

html()           // 获取元素的内容


html(''内容'')   // 设置元素的内容

2. Ordinary element text content text() (equivalent to native innerText)

text()                     // 获取元素的文本内容

text(''文本内容'')         // 设置元素的文本内容

3. Ordinary element text content val() (equivalent to native innervalue)

val()                     // 获取元素的文本内容

val(''文本内容'')         // 设置元素的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是内容</div>
    <input type="text" value="请输入内容">

    <script>
        // 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("113131")
    </script>
</body>
</html>

jQuery element manipulation

Mainly the operations of traversing, creating, adding, and deleting elements.

Traverse elements

jQuery implicit iteration performs the same operation on elements of the same type. If you want to perform different operations on the same type of elements, you need to use traversal.

Grammar 1

$("div").each(function(index,domEle) {
    
    xxx;  })

1.each0 method traverses each matched element. Mainly processed with DOM. each each

The callback function in 2 has 2 parameters: index is the index number of each element; demEle is each DOM element object, not a jquery object

3. So if you want to use the jquery method, you need to convert this dom element into a jquery object $(domEle)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        $(function() {
      
      
            // $("div").css("color",'red')
            //如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
            var arr = ["red",'green',"blue"]
            var sum = 0
            $("div").each(function(i,domEle) {
      
      
                //回调函数第一个参数一定是索引号
                // console.log(index)
                // 可以自己指定索引号号名称
                console.log(i);
                // 回调函数第二个参数一定是dom元素对象
                console.log(domELe);
                $(domEle).css("color",arr[i])
                sum += parseInt($(domEle).text())
            })
            // 1.each()方法遍历元素

        })
    </script>
</body>
</html>

Grammar 2

$.each(object，function (index, element) {
    
     xxx; }）

The $.each() method can be used to iterate over any object. Mainly used for data processing, such as arrays and objects
The function inside has 2 parameters: index is the index number of each element; element traverses the content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        $(function() {
      
      
            // $("div").css("color",'red')
            //如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
            var arr = ["red",'green',"blue"]
            // var sum = 0
            // $("div").each(function(i,domEle) {
      
      
            //     //回调函数第一个参数一定是索引号
            //     // console.log(index)
            //     // 可以自己指定索引号号名称
            //     console.log(i);
            //     // 回调函数第二个参数一定是dom元素对象
            //     console.log(domELe);
            //     $(domEle).css("color",arr[i])
            //     sum += parseInt($(domEle).text())
            // })
            // $.each()   方法遍历元素主要用于遍历数据，处理数据
            // $.each($("div"),function(i,ele) {
      
      
            //     console.log(i)
            //     console.log(ele)
            // })
            $.each(arr,function(i,ele) {
      
      
                console.log(i)
                console.log(ele)
            })
        $.each({
      
      name : "andy",
                age: 18},
                function(i,ele) {
      
      
                console.log(i)   //输出是name  age 属性名
                console.log(ele)   //属性值
            })
        })
    </script>
</body>
</html>

Create, add, delete elements

Create elements

grammar

$("<li></li>")

Add element

1.Internal addition

element.append("内容")

Put the content at the end of the matching element, similar to native appendChild.

2.External addition

element.after("内容")  //把内容放入目标元素后面

element.before("内容")  //把内容放入目标元素前面

Elements are added internally, and after generation, they have a parent-child relationship.

After external elements are added, they are brothers.

Delete element

element.remove()   //删除匹配的元素(本身)

element.empty()   //删除匹配的元素集合中所有的子节点

element.html("")  //清空匹配的元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>

    <script>
        $(function() {
      
      
            // 1. 创建元素
            var li = $("<li>后来的li</li>")  
            $("ul").prepend(li)    //内容放入匹配元素内部最前面
            // 2 添加元素
            $("ul").append(li);   //内容放入匹配元素内部最后面

            // (2)外部添加
            var div = $("<div>后来的</div>")
            $(".test").after(div)
            $(".test").before(div)

            //3.删除
            // $("ul").remove()
            $("ul").empty()
            $("ul").html("")
        })
    </script>
</body>
</html>

jQuery size and position operations

jQuery size

grammar	usage
width()/height()	Obtaining the width and height values of the matching element only counts width / height
innerWidth()/innerHeight()	Get the width and height values of the matching element including padding
outerWidth()/outerHeight()	Get the width and height values of the matching element including padding.border
outerWidth(true)/outerHeight(true)	Get the width and height values of the matching element including padding, borde and margin

If the above parameters are empty, the corresponding value is obtained, and the returned value is numeric.
If the parameter is a number, the corresponding value is modified.
Parameters do not need to be written in units.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            background-color:pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function() {
      
      
            console.log($("div").width())
            // console.log($("div").width(300))
            console.log($("div").height())
            console.log($("div").innerWidth())
            console.log($("div").innerHeight()) 
            console.log($("div").outerWidth())
            console.log($("div").outerHeight())
            console.log($("div").outerWidth(true))
            console.log($("div").outerHeight(true))
        })
    </script>
</body>
</html>

jQuery position

There are three main positions: offset() . position() .scrollTop()/scrollLeft()

1.offset (set or get element offset

The offset() method sets or returns the offset coordinate of the selected element relative to the document, and has nothing to do with the parent.
This method has two attributes left and top. offset().top is used to get the distance from the top of the document, and offset().left is used to get the distance from the left side of the document.
You can set the offset of the element: offset([ top: 10, left: 30 );

2.position() gets the element offset

The position() method is used to return the offset coordinates of the selected element relative to the parent with positioning. If the parent is not positioned, the document shall prevail.
This method can only obtain but not set offsets

3.scrollTop()/scrollLeft() sets or gets the scrolled head and left side of the element

The scrollTop() method sets or returns the scrolled head of the selected element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        body {
      
      
            height: 2000px;
        }
        
        .back {
      
      
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
      
      
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="container"> 
    </div>
    <script>
        $(function() {
      
      
            $(document).scrollTop(100)
            var box = $(".container").offset().top
            // scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧**
            $(window).scroll(function () {
      
      
                console.log($(document).scrollTop())
                if($(document).scrollTop() >= box){
      
      
                    $(".back").fadeIn()
                }else{
      
      
                    $(".back").fadeOut()
                }
            })
            $(".back").click(function() {
      
      
                // $(document).scrollTop(0)
                // 带动画效果
                // 核心原理:使用animate动画返回顶部。
                // animate动画函数里面有个scrollTop属性，可以设置位置
                // 但是是元素做动画，因此$(“body,html" ).animate({scrollTop: O)
                    $("body,html").stop().animate({
      
      
                        scrollTop:0
                    // $("document").stop().animate({
      
      
                    //     scrollTop:0     不能是文档而是 html和body元素做动画
                    })

            })
        })
    </script>
</body>
</html>

jQuery events

Target:

Be able to name 4 common registration events
Be able to tell the advantages of on binding events
Be able to explain the advantages and methods of jQuery event delegation
Be able to tell binding events and unbinding events

jQuery event registration

Single event registration

grammar

Element.事件(function() {
    
    })

$("div").click(function(){
    
    事件处理程序})

Other events are basically the same as native ones.
Such as mouseover, mouseout, blur, focus, change, keydown, keyup, resize, scroll, etc.

jQuery event handling

on() binding event

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown”。
selector:元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。

on() 方法优势1:

可以绑定多个事件,多个处理事件处理程序。

 $(“div”).on({
    
    
  mouseover: function(){
    
    }, 
  mouseout: function(){
    
    },
  click: function(){
    
    }	
});

如果事件处理程序相同

 $(“div”).on(“mouseover mouseout”, function() {
    
    
   $(this).toggleClass(“current”);
  });

实现事件委托

on0方法优势2∶

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

 $("ul").on("click",'li',function() {
    
    
                // click是绑定在ul身上的，但是触发的对象是ul里面的小li
                alert("111")
            })

在此之前有bind(), live() delegate(等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on()方法优势3∶

动态创建的元素，click()没有办法绑定事件，on)可以给动态生成的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .current {
    
    
            background-color: purple;
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <ol></ol>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <script>
        $(function() {
    
    
            // 1.单个事件注册
            // $("div").click(function() {
    
    
            //     $(this).css("background",'red')
            // })
            // $("div").mouseout(function() {
    
    
            //     $(this).css("background",'pink')
            // })
            // 2.事件处理on
            // $("div").on({
    
    
            //     mouseenter:function() {
    
    
            //         $(this).css("background",'red')
            //     },
            //     click: function() {
    
    
            //         $(this).css("background",'skyblue')
            //     },
            //     mouseleave:function() {
    
    
            //         $(this).css("background",'pink')
            //     }
            // })

            $("div").on("mouseover mouseout",function() {
    
    
                $(this).toggleClass("current")
            })

            // (2)on可以实现事件委托
            // $("ul li").click()
            $("ul").on("click",'li',function() {
    
    
                // click是绑定在ul身上的，但是触发的对象是ul里面的小li
                alert("111")
            })

            // on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
    
    
            //     alert('11')
            // })
            $("ol").on("click","li", function() {
    
    
                alert("111")
            })
            var li = $("<li>后来创建的li</li>")
            $("ol").append(li)
        })
    </script>
</body>
</html>

jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {
    
    })

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        $(function() {
    
    
            $(document).on("click",function() {
    
    
                console.log("点击了document")
            })

            $("div").on("click",function(event) {
    
    
                // console.log(event)
                console.log("点击了div")
                event.stopPropagation()
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery 拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.extend([deep], target, object1, [objectN])

deep: 如果设为true 为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
objectN:待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <script>
        $(function() {
      
      
            // var targetObj = {}
            // var obj = {
      
      
            //     id : 1,
            //     name : "andy"
            // }
            // $.extend(targetObj,obj)
            // console.log(targetObj)

            // var targetObj = {
      
      
            //     id : 0
            // }
            // var obj = {
      
      
            //     id : 1,
            //     name : "andy"
            // }
            // // 会覆盖targetObj里面原来的数据
            // $.extend(targetObj,obj)
            // console.log(targetObj)


            var targetObj = {
      
      
                id : 0,
                msg : {
      
      
                    sex : "男"
                }
            }
            var obj = {
      
      
                id : 1,
                name : "andy",
                msg : {
      
      
                    age : 18
                }
            }
            // 会覆盖targetObj里面原来的数据
            // $.extend(targetObj,obj)
            // console.log(targetObj)
            // // 1.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象
            // targetObj.msg.age = 20
            // console.log(targetObj)

            // 2.完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
            $.extend(true,targetObj,obj)
            console.log(targetObj)
            targetObj.msg.age = 20
            console.log(targetObj)  //msg: {sex: '男', age: 20}
            console.log(obj)
        })
    </script>
</head>
<body>
    
</body>
</html>

jQuery 多库共存

问题概述：

jQuery使用 $作为标示符，随着 j Q u ery 的流行, 其他 j s 库也会用这$ 作为标识符，这样一起使用会引起冲突。

客观需求：

需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存

jQuery 解决方案：

把里面的 $ 符号统一改为 jQuery。比如 jQuery(‘‘div’’)
jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/ (推荐，免费开源)

jQuery 插件使用步骤：

引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

jQuery 插件演示：

瀑布流
图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）

当我们页面滑动到可视区域，再显示图片。

我们使用jquery 插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
全屏滚动（fullpage.js）

gitHub： https://github.com/alvarotrigo/fullPage.js

中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件：

bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用，也必须引入jQuery 文件。

Simple learning of JQuery

JQuery

Basic usage of jQuery

The basic steps

jQuery entry function

jQuery top-level object$

jQuery objects and DOM objects

Commonly used APIs

jQuery selector

Basic selector

level selector

jQuery implicit iteration

jQuery filter selector

jQuery filtering method (key points)

Sina drop down menu

Exclusionary thinking

jQuery style manipulation

Set class style method

tab bar switching

The difference between class operations and className

jQuery effect

sliding effect

event switching

Animation queue and its stop queuing method

Fade effect

Custom animationanimate

Honor of Kings accordion effect

jQuery attribute manipulation

Set or get element custom attribute value attr()

Data cache data()

jQuery content text value

jQuery element manipulation

Traverse elements

Create, add, delete elements

jQuery size and position operations

jQuery size

jQuery position

jQuery events

jQuery event registration

jQuery event handling

jQuery事件对象

jQuery 拷贝对象

jQuery 多库共存

jQuery 插件

Guess you like