A handy JavaScript frame--jquery (reprint)

Learn more about

jquery is a fast, compact, feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier, and easy-to-use APIs can be used in a variety of browsers.

First, what is jquery?

jquery is a library of JavaScript functions.

jquery is a lightweight "write less, do more" JavaScript library.

Functional generalization of JQuery

1. Element selection of HTML

2. Element manipulation of HTML

3. HTML DOM Traversal and modification

4, JS special effects and animation effects

5. CSS operation

6. HTML Event operation

7. Ajax Asynchronous Request mode

Ii. Foundations of the jquery Foundation

2-1 jquery basic Syntax

The jQuery syntax is done by selecting an HTML element and performing certain actions on the selected element.

First, you should import the jquery file before using jquery.

<script src= "Js/jquery-3.1.1.js" ></script>

Selectors in jquery

$ ("selector"). function ();

Attention:

①$ is the abbreviation for jquery, which means that jquery ("selector") can be used. function ();

The ② selector, which can be any CSS-supported selector;

Small instance:

• $ (this). Hide ()-hides the current element

• $ ("P"). Hide ()-Hides all <p> elements

• $ ("p.test"). Hide ()-hides all <p> elements of class= "test"

• $ ("#test"). Hide ()-hides all elements of the id= "test"

2-2 Document-ready function

The document-ready function means to prevent the jquery code from running until the document is completely loaded;

$ (document). Ready (function() {    // JQuery code ...  });

It's abbreviated form:

$ (function() {    // JQuery code ...  });

The difference between a document-ready function and a window.onload [is still more important!! ]

①window.onload must wait until all content in the Web page is loaded and the code (including images, videos, and other resources) is executed;

Document-ready function, you can execute the code only after the page DOM structure is loaded;

②window.onload can only write one, write multiple will only execute the last one;

Document-ready functions, which can be written in multiple, and will not be overwritten;

Iii. common functions in jquery

jquery in the function is too much, in this does not explain, I listed below some of the commonly used, followed by a small example, very simple, you bo friends a look at ~ ~ ~ Internal Insertion

Append: Inserts the created node into the specified position

$ ("#div1"). Append ("<p> This is the P tag inserted </p>"); At the end of the #div1, insert a node directly.

AppendTo: Appends all matching elements to another specified set of element elements

$ ("<p> This is the inserted P tag </p>"). AppendTo ("#div1"); Inserting the new node into the #div1

Prepend: Inserts each matched element at the beginning of the specified element

$ ("#div1"). Prepend ("<p> This is the P tag inserted </p>"); At the beginning of the #div1, insert a node directly.

External insert

After: Insert content after each matching element

$ ("#div1"). After ("<p> This is the inserted P tag </p>"); Insert a new node behind the DIV1

InsertBefore: Inserts all matching elements in front of another, specified set of element elements

$ ("<p> This is the inserted P tag </p>"). InsertBefore ("#div1"); Insert P tag in front of DIV1

Package

Wrap: Wrap all matching elements in a structured tag of other elements

$ ("P"). Wrap ("<div></div>"); Wrap each P tag outside, wrapping a layer of div

Wrapall: Wraps all matching elements together with a single element

$ ("P"). Wrapall ("<div></div>"); Wrap all the P tags in the same div

Wrapinner: Wraps the child content of each matching element (including the text node) with an HTML structure.

$ ("#div1"). Wrapinner ("<div></div>"); Wrap all the sub-elements in the #div1 with <div>.

Replace

ReplaceWith: Replaces all matching elements with the specified HTML or DOM element

$ ("P"). ReplaceWith ("<span>111</span>"); Swap all the matching p tags for the span label

ReplaceAll: Replace all selector-matched elements with matching elements

$ ("<span>111</span>"). ReplaceAll ("P"); Replace all P tags with the span element

Delete

Empty: Delete all child nodes in the matching element collection

$ ("#div1"). empty (); Deletes all child elements in the #div1. But #div1 still keeps the empty label.

Remove: Removes all matching elements from the DOM

$ ("#div1"). Remove (); Remove #div1 and all child elements directly from the DOM

Detach: Removes all matching elements from the DOM

$ ("#div1"). Detach (); Remove #div1 and all child elements directly from the DOM

the similarities and differences between remove and detach

1, the same point

① will delete all the current tags, as well as all the child nodes of the current tag;

② can return the current node when it is deleted. And you can use variables to accept the returned nodes for later recovery;

2, different points

When restoring the original node using the accepted node

Remove can only restore the contents of the node, but the event bindings can no longer be restored;

Detach not only restores the contents of the nodes, but also restores the bindings of the events;

Copy (clone)

Clone: Clones matching DOM elements and selects copies of these clones

$ ("#div1"). Clone (True). Empty (). InsertBefore ("button:eq (0)");

JS. The difference between. CloneNode () and JQ. Clone ()

Both accept the arguments for the incoming true/false.

. CloneNode () does not pass arguments or pass in parameter false, which means that only the current node is cloned, not child nodes. Passing in true indicates that all child nodes can be long.

. Clone () clones all child nodes regardless of which parameter is passed in. However, you do not pass arguments or pass in false, which means that only the nodes are cloned, not the events that the node binds. Passing in true indicates simultaneous cloning and a single-bound event.

Iv. Events in jquery

4-1 How to bind events 1. Shortcut to Event binding

$ ("button"). EQ (0). Click (function() {alert (1);});  

2. Use on () to bind events

　　① Single Event binding using on

$ ("Button:eq (0)"). On ("click",function() {alert (1);});  

② use on to add multiple events to the same node at once to execute the same function, with spaces separated between multiple events

function() {Console.log ("event triggered");}); 

③ Add multiple events to the same node at once, performing different functions separately

$ ("Button:eq (0)"). On ({"Click":function() {console.log ("click event executed");　　　　}, "mouseover":function() {Console.log ("performed MouseOver event"); }});

④ When a function is called, it also passes the specified argument to the function

$ ("Button:eq (0)"). On ("click", {"name": "Jredu", "Age": +},function(EVN) {console.log (EVN);　　　　Console.log (Evn.data.name); Console.log (evn.data.age);}); 

⑤ uses on for event delegation (very, very, very important!). )

Bind to an ancestor node or even the root node and then delegate to the current node for the event that would otherwise have been bound to this element

$ ("P"). On ("click",function() {}); Delegate the following ↓$ (document). On ("click", "P",function () {});  

The role of using event delegation:

The binding method of not using event delegation can only be bound to the label when the page is initialized, when the page is added with the same type label, these new tags cannot be bound on the event, but if you use event delegation, these new tags will also be able to bind existing events when the same type label is added to the page.

V. Animations in jquery

Jquerey in the animation is also very much, in this gives you a few, if you feel not detailed, you can go to the Novice tutorial or see the Help documentation of jquery!!!

1. Show () Let the hidden elements display

The effect is: colleague modifies the element's width, height, opacity property

①: Direct display, no animation

② the number of milliseconds to pass the parameter, indicating how many millimeters within the completion function

③ Incoming (time, function) indicates that the callback function is executed after the animation is completed

2. Hide () Hides the displayed elements, as opposed to show.

3,. Slidedown () Let the hidden elements appear, the effect is from top to bottom, increase the height

. Slideup () to hide the displayed elements from bottom to top, reducing height

. Slidetoggle () Let the elements of reality hide, let the hidden elements show

4. FadeIn () to fade hidden elements into the display

. FadeOut () Let the displayed elements fade out of the hidden

. Fadetogle () lets the displayed elements be hidden so that hidden elements are displayed

. FadeTo (time, final transparency, function) with Fadetoggle, accept the second parameter, indicating the final transparency achieved

5. Animate ({Final style attribute, key-value pair object}, animation time, animation effect ("linear" or "swing"), callback function after the animation has finished executing)

Give us a little example.

<! DOCTYPE html>$ (document). Ready (function() {$ ("button"). Click (function() {$ ("div"). Animate ({left: ' 250px ', opacity: ' 0.5 ', Height: ' 150px ', Width: ' 150px ' });}); </script> by default, all HTML elements have a static location , and is non-removable. If you need to change to, we need to set the element's position property to relative, fixed, or Absolute!</p><div style= "background: #98bf21; height:100px; Width:100px;position:absolute; " ></div>          

The results of his operation:

Vi. Ajax in jquery

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

Briefly, without overloading the entire Web page, AJAX loads the data in the background and displays it on the Web page.

6-1 JQuery Load () method

The JQuery load () method is a simple but powerful AJAX method.

The load () method loads the data from the server and puts the returned data into the selected element.

Loads the remote HTML file code and inserts it into the specified DOM node. You can pass in only one parameter, representing the loading of a static HTML code fragment.

$ ("#div1"). Load ("load.html");

6-2 $.ajax ()

$.ajax (): is the lowest-level Ajax function in jquery, and the parameter receives a large object. The properties and methods inside the object that represent the relevant settings for the AJAX request:

①url: Requesting the path to the remote file

②type:ajax type of request, optional value get/post

③data: Object format. Sends an object to the background that represents the data being passed.

Common and type is the "post" request mode;

If the type is "get", can you use it directly? Appended at the back of the URL.

④datatype: What type of data is expected to be returned in the background. "Text"-string "JSON"-json object

⑤success: callback function for successful request. The parameter accepts a data that represents the returned information in the background.

⑥error: callback function when the request fails

⑦statuscode: Accepts an object, the object's key-value pair is the status state code and the corresponding callback function, indicating that when the request status code is the corresponding number, the execution of the specific operation function.

200-normal request succeeded 404-page Not found 500-server internal error. See the specific status code

　　　　

$.get (); $.post (); These two functions are encapsulated on the basis of $.ajax (). You can send a GET request or POST request directly by default;

Accepts four parameters:

The URL path of the ① request. Equivalent to the URL inside the $.ajax ();

② the data passed to the background. Equivalent to the data within the $.ajax ();

③ the callback function for which the request succeeded. Equivalent to $.ajax () inside the success;

④ The data type expected to be returned. Equivalent to $.ajax () inside the datatype;

$.post ("http://localhost/json.php", {data: "AAA"},function(data) {Console.log (data);}, "JSON"); 

Give us two chestnuts.

$ (document). Ready ( function() {    $ ("button"). Click (function() {        $.post ("/try/ajax/demo_test_post.php", { Name: "Little chestnut", url: "http://www.baidu.com"function(data,status) {alert ("Data: \ n" + data + "\ n State:" + status ); }); });}); </script>

POST

Operation Result:

<! DOCTYPE html>$ (document ). Ready (function() {    $ ("button"). Click (function() {        $.get ("/try/ajax/demo_test.php",  function(data,status) {alert ("Data:" + + data + "\ n Status:" + status);});}); </script> 

GET

A handy JavaScript frame--jquery (reprint)