jQuery multi-library coexistence, plug-in, chain programming, implicit iteration

1. Multi-database coexistence

jQuery uses $ as the identifier of the top-level object. With the popularity of JQuery, other js libraries may also use $ as the identifier, which will cause conflicts when used together. In order to use these js libraries at the same time, so that their identifiers do not conflict, and realize the coexistence of multiple libraries. jQuery provides two solutions.

Solution 1: Replace the $ symbol with jQuery. Such as jQuery("div").
Solution 2: Give the developer the naming right of the top-level object in jQuery, and the developer can name it himself.
Scheme two syntax:jQuery.noConflict(); // 例如：var xx = jQuery.noConflict();

Second, the plug-in

jQuery has limited functions. If you want more complex special effects and rapid development, you can use the jQuery plug-in. Note: These plug-ins also rely on jQuery to complete (implemented using jQuery code syntax internally), so jQuery files must be introduced first . Therefore it is also called a jQuery plug-in.

jQuery plug-in download commonly used websites
1. jQuery plug-in library: http://www.jq22.com/
2. jQuery House: http://www.htmleaf.com/
Steps to use jQuery plug-in (skip)
Several jQuery plugins learned
1. Waterfall flow webpage effect production plug-in.
2. Image lazy loading plugin (EasyLazyload.js). Note that the js import file and js call must be written to the end of the DOM element (picture) at this time.
3. Full screen scrolling plugin (fullpage.js). Download link http://www.dowebok.com/demo/2014/77/

The bootstrap framework also relies on jQuery development, so when using the js plug-ins or components inside, you must also first import jQuery files .

Three, chain programming

Principle of chain programming: In addition to implementing specific functions, many methods in jQuery also return the current jQuery object or other jQuery objects, so we can call other methods after using these methods . As long as the chain is not broken (the returned jQuery object is not the current jQuery object or the jQuery object we want to operate next), we can continue to call the corresponding method as needed.

// 1、返回当前 jQuery 对象的方法。
$("li").addClass("current").css("color","red").removeAttr("index").setAttr("data-index");
// 2、返回其他jQuery 对象的方法。next()、parent()、children()、siblings()等
$("ul").addClass("nav").children()[0].addClass("current").siblings().removeClass("current");
// 3、没有返回 jQuery 对象则会导致链子断掉，返回某个值的方法，比如：
// val()、html()、text()、arrt()、css("属性")等。

Four, implicit iteration

When jQuery gets the element object, it puts all the jQuery element objects it gets into an array and returns it. When some methods are called or some operations are performed after the object is obtained, jQuery will loop through all the matched elements and perform the same method or operation without us having to loop again. This process of traversing the pseudo-array composed of the obtained jQuery objects is called implicit iteration .

<body>
    <ul class="nav">
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
    </ul>
</body>
<script>
	// 获取所有的 li 元素，返回一个伪数组 lis
    var lis = $("ul").children("li");
    console.dir(lis);
    var text = lis.text(); 
    console.log(text); // -> 这是第1个li这是第2个li这是第3个li这是第4个li
    // 给所有的 li 元素绑定点击事件。绑定时不用我们自己使用 for 循环去遍历
    // jQuery 会自行帮我们遍历所有元素并绑定事件，此时所有 li 都会注册有点击事件。
    lis.click(function() {
     
     
        console.log("第" + ($(this).index() + 1) + "被点击了。")
    })
</script>