On jQuery, jQuery old driver to take you entry to the master

1. What is jQuery?

1.1, jQuery Introduction

　　Following Prototype jQuery is another excellent JavaScript library is founded in January 2006, open-source project by the John Resig. The team now includes jQuery core library, UI plug-ins, and developers as well as marketing and web design maintenance personnel.

　　With the introduction of jQuery syntax compatibility and cross-browser, greatly simplifies HTML document traversing JavaScript developers, operating DOM, handle events, perform animations operation and development of AJAX. Its unique and elegant code to change the style of the design ideas and programming the way JavaScript programmers. In short, whether it is a web designer, developer background, or project managers, and whether beginner or JavaScript JavaScript expert, there are more than enough reason to learn jQuery.

　　But, in fact, jQuery is a JavaScript package, based on the original, and convenient to us.

1.2, jQuery Features

jQuery is free, open source, using the MIT license. JQuery syntax design can make development easier, such as operating the document object, select DOM elements, animate, event handling, Ajax and other features. In addition, jQuery provides API allows developers to write plug-ins. Its modular use enable developers can easily develop powerful static or dynamic pages. jQuery features:

• Powerful, emphasizing the idea is to write less, do more (write less, do more)
• A number of common packaging operation of DOM
• Flexible event handling mechanism
• AJAX functionality has improved
• Scalability, rich plug-ins
• Easy to use
• Multi-browser support (support Internet Explorer6.0 +, Opera9.0 +, Firefox2 +, Safari2.0 +, Chrome1.0 +, dropped for the Internet Explorer6,7,8 in 2.0.0), good compatibility

1.3, jQuery version

About jQuery version

　　v1.xx.xx perfect (novice) is recommended to download

https://lib.baomitu.com/jquery/1.12.4/jquery.js

　　v2.xx.xx remove Compatibility

https://lib.baomitu.com/jquery/2.2.4/jquery.js

　　v3.xx.xx reconstruction, a little bug

https://lib.baomitu.com/jquery/3.4.1/jquery.js

　Baidu own or static repository

For example: https://cdn.baomitu.com/

2. jQuery use

　2.1.1 get JQuery objects:

　　How to get jQuery object? Roughly speaking, the core by $()a method, the element (or not present in the fragment html page) on the page jQuery object into the packaging.
　　$()方法Which also includes support for syntax:

1. Are expression (including class expressions., Id # expression, the expression elements and the like)
2. Symbols (including the progeny symbol space, next symbol +, etc.)
3. Filter (comprising: a filter and a [] Filter)
4. Now there is clearly more

By the above combination, via the selector  $() may be "Query" obtained jQuery object (or collection of objects jQuery)

　2.1.2 Common API

     $(…)：

  All of the core, with four kinds of parameters can be. 
$ (); 


 Return jQuery object or jQuery collection of objects 
 , such as $ ( "# ID"), $ ( "class.") 
$ (Expression The); 


 return jQuery object, or jQuery collection of objects 
 , such as $ ( "<span> hello World </ span> ") 
$ (HTML) 


  returns jQuery object or collection of objects jQuery 
  such as $ (the document.body) 
$ (element) 
 all elements 
$ (*)

　Native jQuery 2.1.3 and conversion

　　The method of DOM element DOM elements jq native, non-interworking, the native code can jq codes exist only between each object is not a property or method interworking

jq DOM object and converting native DOM object:
　　jq primary transfer:
　　　　parsing array
　　　　by the get method
　　native transfer jq:
　　　　using the function package jq native DOM object

1.
　　 obox.style.background = "red";　　　　//原生方法
    $(obox).css("background","yellow")　　//jQuery方法

2.
    var obox = $("#box2");

　　　   ob ox[0].style.background = "blue";
　　　　obox.get(0).style.background = "blue";
　　　　obox.css("background","blue");

      2.2.1 Selector

jQuery selectors with the selector in the native or less

    $("#cont").css("background","red");　　　　　　　　//选中id

    $(".box").css("background","red");　　　　　　　　//选中class

    $("span").css("background","red");　　　　　　　　//选中标签

    $(".msg h2").css("background","red")　　　　　　　//选中后代

　　 $ ( ". msg"). find ( "h2"). css ( "background", "red") // Select the descendants of 

    $ ( ". msg> h2" ). css ( "background", "red") / / son selected level h2 
    $ (. "msg"). Children ( "h2"). CSS ( "background", "Red") // select the level h2 son

    $ ( ". msg + span" ). css ( "background", "red") // Select the adjacent next sibling span tag 
    $ ( ". msg"). next ( "span"). css ( "background "," red ") // select the adjacent next sibling

　　 $ ( ". msg ~ span" ). css ( "background", "red") // select all in all a span 
　　 $ ( ". msg"). nextAll ( "span"). css ( "background", "red") // select all span tags 
 　　$ ( "input [type = text ] [name]"). css ( "background", "red") // attribute selectors select input type = text tag where label

　　Through a small example above, we should also find a native of ordinary selectors like in jQuery selectors, but jQuery has a good package more combinations selector, you can go to discover.

     2.2.2 jQuery built-in animation

 method:

    .hide () // hide 
    .show () // display 
    .toggle () // Hide / Show 
    .slideUp () // pull 
    .slideDown () // pull down 
    .slideToggle () // pull-up / pull-down 
    .fadeOut () // fade 
    .fadeIn () // fade 
    .fadeToggle () // On out / fade 
    .fadeTo (1000,0.5) // translucent, previous argument of time, one of the transparency           

     2.2.3 jQuery non-built animation

        $ ( "box.") Animate ({. 
            width: 0, 
            height: 0, 
            left: 100, 
            Top: 0 
        }) // box in advance to a high width prior to testing

     2.2.4 jQuery animation settings

    Selector: $ fn. 
    Animation:. $ Fx 

    milliseconds, the frequency 
    $ .fx.interval = 100; 
    $ = .fx.off to true; 

    $ ( "BTN #") [0] .onclick = function () { 
        $ ( . ".box") Animate ({ 
            left: 600 
        }, 2000) .animate ({ 
            Top: 500 
        }) 

    }

     2.3.1 jQuery Events

1. The name of the event binding 
    elements. Event name (function) 
    $ ( "# btn"). MouseDown (function () { 
        console.log (1) 
    }) 

    2.on Binding 
    $ ( "# btn"). On ( "click.a", function () { 
        console.log (1) 
    }) 
    $ ( "# btn"). ON ( "click.b", function () { 
        console.log (2) 
    }) 
    // delete OFF on binding methods 
    $ ( "# btn"). OFF ( "click.a") 
    // event delegate 
    $ ( "ul"). on ( "the Click", "li", function () { 
        console.log ( the this) 
    }) 


    3.bind binding 
    $ ( "BTN #"). the bind ( "click.a", function () { 
        the console.log (. 1) 
    }) 
    $ ( "BTN #").bind("click.b",function(){
        console.log(2)
    })
    // unbind delete method bind bound 
    $ ( "# btn"). Unbind ( "click.a") 

    4.One Binding 
    $ ( "# btn"). One ( "the Click", function () { 
        Console. log (1) 
    }) 
    
    5.hover binding: no event bubbling 
    mouseOver 
    mouseout 
    no event bubbling 
    mouseenter 
    MouseLeave 
    (. "# btn") hover (function () {$ 
        console.log ( "enter") 
    }, function ( ) { 
        the console.log ( "away") 
    }) 

    6. simulated event execution 
    the setInterval (() => { 
        // event has bubble 
        $ ( "BTN #"). Trigger ( "the Click") 
        // there is no event bubbling 
        $ ( "# btn"). triggerHandler ( "click")
    }, 1000);

　　The DOM attribute operations 2.3.2jQuery

    $ ( "span"). parent () // immediate parent 
    $ ( "span"). parents () // all of its parent 
    $ ( "span"). parentsUntil ( ". box") // specified range of the parent 

 native content operation: 
    // the innerHTML 
    // innerText 
    // value 

 JQ content operations: 
    $ ( "Box.") HTML (). 
    $ ( "Box.") text (). 
    $ ( "Box.") HTML (. " <Mark> World </ Mark> ") 
    $ (." Box "). text (" <Mark> World </ Mark> ") 
    $ (" INPUT "). Val () 
    $ (" INPUT "). Val ( "hello") 

 attribute operation 
    . addClass 
    removeClass 
    
    . $ (. "Box") CSS ([ "width", "height", "border"]);

     var obj = $(".box").css(["width","height","border"])
     $.each(obj,function(key,val){
        console.log(key,val)
    })


attr () 
    $ (. "Box") attr ( "ABC"). 
    $ ( "Box.") attr ( "ABC", "QWE"). 
    $ ( "Box.") attr ({. 
        A: 10, 
        B: 20 is, 
        C: 30 
     }) 

     $ (. "Box") removeAttr ( "B"). 

 creation and insertion 
    $ ( "div") 

    var = $ D ( "<div>"); 
    // div is inserted into the body the 
    $ ( "body") the append (d);. 
    // div inserted into the body 
    d.appendTo ($ ( "body")); 


     . $ ( "body") the before (d) // put before the body tag the d 
     . $ ( "body") the after (d) // after the body tag into the d 

  delete 
     $ ( "box.") remove ();. // delete the class as a box of labels, including all its contents (including labeling) 
    $ (. ". Box ") empty (); // The class for the box label (label) removed, leaving a div for the box that label
. box ") empty (); // The class for the box label (label) removed, leaving div for the box that a label 
change
    $(".box").replaceWith("<p class='"+ $(".box").attr("class") +"'>"+ $(".box").html() +"</p>");             //字符串的拼接

　　

　　By the above explanation of jQuery, we should also find, based on the native jQuery, jQuery of everything, native can achieve, jquery fact, others packaged function, there are a lot of features, it can be used directly, without regard to principles.