[JS] JavaScript from simple to deep (2) jQuery, from simple to deep jquery

[JS] JavaScript from simple to deep (2) jQuery, from simple to deep jquery

JQuery allows you to easily process HTML (an application in a standard General Markup Language), events, and animation effects, and provides AJAX interaction for websites. Another major advantage of jQuery is its comprehensive documentation and detailed description of various applications. There are also many mature plug-ins to choose from.

 

Official Website API:

Http://api.jquery.com

 

Download:

NuGet: Install-Package jQuery

 

1. Main Functions

Html selection, operations, css operations, events, special effects, traversal, ajax

 

2. Version

1. x: IE6 + (in my test, some methods still do not support IE8 or below)

2. X: IE9 +

 

3. Basic syntax

$ (Selector). action ()

For example:

Function func () {$ (this ). hide (); // hide all div} $ ('div '). click (func); $ ('div '). bind ('click', func); // unbind $ ('div '). on ('click', func); // off bind essentially uses on

 

4. Events

The event objects of jquery and js are different. (The js object is encapsulated. The originalEvent attribute is the js event object)

Event object:

Type: event name, for example, click

Target: indicates the trigger source. The actual target is clicked.

CurrentTarget: trigger source, triggering event target.

    <div>        <p>Text</p>    </div>    <script>        $('div').first().click(function (e) {            console.log(e);        })    </script>

 

Prevent bubbles:

<Div> text </div> <script> function func (e) {console. log (e); // print event e. stopImmediatePropagation (); // block all bubbling e. stopPropagation (); // prevents parent-level bubbling // todo} $ ('div ') [1]. onclick = func; // js event $ ('div '). first (). click (func); // jquery event </script>

　　

5. Operation Elements

Query, modify: text, html, val, attr, css

<P> <a> p1 </a> </p> <a> p2 </a> </p> <input type = "text" value =" v1 "/> <input type =" text "value =" v2 "/> <script> var ps = $ ('P '); // All p elements jquery object ps. eq (0 ). text (); // innerText ps.eq(1).html (); // innerHTML $ ('input '). val (); // value </script>

Add:

<P> text </p> <script> $ ('P '). prepend ('prepend'); // insert forward $ ('P '). append ('append'); // insert it back $ ('P '). before ('before'); // insert it forward and wrap it $ ('P '). after ('after'); // insert it backward and wrap it </script>

Delete:

<Div> <p> text </p> </div> <span> difference between positions and styles </span> <script> limit ('div'}.css ({height: '200px ', background: '# 0094ff'}); // sets the div style $ ('div '). remove (); // Delete elements and child elements $ ('div '). empty (); // Delete sub-elements </script>

　　

6. Special Effects

Syntax: effect (time, func)

<Button> display </button> <button> hide </button> <button> switch </button> <div> </div> <script> hide ('div'faces .css ({height: '100px ', background: 'red'}); $ ('click '). eq (0 ). click (function () {$ ('div '). show (1000); // display $ ('div '). fadeIn (1000); // fade in $ ('div '). slideUp (1000); // slide into}) $ ('click '). eq (1 ). click (function () {$ ('div '). hide (1000); $ ('div '). fadeOut (1000); $ ('div '). slideDown (1000);}) $ ('click '). eq (2 ). click (function () {$ ('div '). toggle (1000); $ ('div '). fadeToggle (1000); $ ('div '). slideToggle (1000) ;}) </script>

　　

7. AJAX

Syntax: $. method (url, data, func)

<Script> $. get ('handle. ashx', {time: new Date (). toLocaleString ()}, function (data) {alert (data );}). error (function (e) {// abnormal execution in todo}) </script>

 

Syntax: $ (selector). load (url, func) // load the file

Syntax: $. getScript (url, func) // load the script. The essence is $. get (url, undefined, func, "script ");

 

8. Extend jQuery

Using $. fn as an extension, you can implement chained programming.

<Div> text </div> <script> $. fn. func = function () {alert (this); // this Is A jQuery object} $ ('div '). func (); </script>

　

9. noConflict

This method releases the control of $ identifier

<Div> text </div> <script> var my $ = $. noConflict (); // release $ my $ ('div '). hide (1000); // $ ('div '). hide (1000); // invalid </script>

　　

10. css

Syntax: Optional (selector).css (name, value) Optional (selector).css (obj)

Common operations: $ (selector). addClass (className) $ (selector). removeClass (className) $ (selector). toggleClass (className)

        $('div').css('width', '200px').css('background', 'blue');        $('div').css({width:'200px',background:'blue'});

 

11. Traverse

Child element: chilrden () find ()

Parent element: parent () parents () parentUntil (selector)

Same level element:

<Script> var d = $ ('div '); d. siblings (); // all other elements of the same level d. next (); // The next element at the same level d. nextAll (); // all elements under the same level d. nextUntil (selector); // all the elements d between the same level and selector. prev (); // Element d at the same level. prevAll (); // all elements above the same level d. prevUntil (selector); // all the elements above the same level to the selector </script>

Filter: first () last () eq (index) filter (selector) not (selector)

Eq (index): Obtain the nth object in the jQuery object array, starting from 0.

Filter (selector): Take the objects that match the selector in the jQuery object array. The opposite is not (selector.

 

12. Conversion of DOM object jQuery objects:

DOM object => jQuery object: $ (DOM object)

For example, var ele = document. getElementById ('id'); $ (ele );

Common operations: $ ('<a href = "#"> a tag <a>'); // convert an html tag to a DOM object.

 

JQuery object => DOM object: jQuery object [0]

For example, $ (ele) [0];