JQuery: from ignorance to ignorance
Note:
1.1. Overview
JQuery is a JavaScript framework that helps users use a small amount of JavaScript code to create beautiful page effects.
1.2. Functions of jQueryJQuery encapsulates all operations in a jQuery function to form a unique operation entry.
JQuery (expression, context) Example:
JQuery ("div # wrap> p: first"). addClass ("red ").
JQuery (html) Example:
$ ('Ul '). append ($ (' <li> balara </li> ')).
JQuery (elements) Example:
$ (Document). ready (function (){
Watermarks ('ul').css ('color', 'red ');
});
JQuery (fn) Example (used to simplify the previous example ):
$ (Function (){
Watermarks ('ul').css ('color', 'red ');
})
1.4. The chain syntax is elegant and elegantCode example: In the following example, the end () method is used to cancel the current jQuery object and the previous jQuery object is returned.
1.5. Imitate the css () Selector
Imitating the CSS selector makes the selection element more accurate and flexible. (Css () method ).
1.6. More open interfacesMakes jQuery more open and dynamic. For example, the following example uses the jQuery extension interface to define two custom functions for the jQuery framework and then call them:
1.7. Notes
A) The jQuery framework is encapsulated based on the JavaScript language. jQuery is essentially JavaScript code. Therefore, JQuery and JavaScript code can be mixed with each other.
B) A jQuery object is a new object generated after DOM objects are packaged through the jQuery framework. Essentially, it is a common JavaScript Object that contains a collection of DOM objects. Therefore, DOM objects can be viewed as independent entities, while jQuery can make a data set composed of multiple DOM objects.
C) jQuery objects and DOM objects can be converted to each other, because the objects they operate on are all DOM elements, but jQuery objects contain multiple DOM elements, the DOM object itself is a DOM element. For example, you can use the array subscript to read a DOM element object in the jQuery object set. You can also use the jQuery object method (such as get ).
D) use the $ () function to directly convert a DOM object to a jQuery object.
E) The ready and load events defined by jQuery and JavaScript both indicate the page initialization behavior, but they are different:
Different execution time:
Different usage
2. JQuery Basic knowledge sorting
2.1. Basic Selector
The basic selectors include ID selector (# id), tag selector (element), class selector (. class), wildcard selector (*), and group select1, select2.
2.1.1. Id SelectorJavaScript: document. getElementById ("id ");
JQuery: jQuery ("# id ").
2.1.2. Tag SelectorJavaScript: document. getElementsByTagName ("tagName ");
JQuery: jQuery ("element ");
2.1.3. Class Selector(JavaScript does not have a native class selector)
JQuery (". className ");
2.1.4. Wildcard SelectorJavaScript: for example, document. getElementsByTagName ("*");
JQuery, for example, $ ("body *"), matches all the labels under <body>.
2.1.5. Group selector (separated by commas)For example: $ ("h2, # wrap, span. red, [title = 'text']")
2.2. Hierarchical SelectorThe hierarchical selector is used to implement accurate matching through the DOM nested relationship structure, including the following four types:
2.2.1. Inclusion relationship$ ("Form input") matches all input elements in the form.
2.2.2. Parent-child relationship$ ("Form> input") matches all the child input values in the form.
2.2.3. Adjacent Relationship$ ("Label + input"), which matches all input elements following the label.
2.2.4. Sibling relationship$ ("Form ~ All input elements in the same structure as the form.
2.3. Pseudo-class selector(Add the ":" identifier to the selection operator ).
A) $ ("tr: first"), the first row of the table. (Corresponding; last)
B) $ ("input: not (: checked)"), all the unselected input elements.
C) $ ("tr: even"), 1, 3, 5 rows. (Corresponding to: odd)
D) $ ("tr: eq (0)") 1st rows of table rows.
E) $ ("tr: gt (0)") 2nd rows and the following rows. (Corresponding to: lt ).
F) $ ("div: contains ('image')"), all div containing "image.
G) $ ("div: has (p)"): All div elements containing the p element.
H) $ ("p: visible"): all visible p elements. (Hidden ).
I) $ ("p: first-child"), $ ("p: last-child ").
J) pseudo-class selector related to form objects
K) pseudo-class selector related to form attributes
2.4. Attribute Selector1. $ ("div [id]") to find all div elements containing the id attribute.
Ii. $ ("input [name = 'text']")
Iii. $ ("input [name! = 'Text'] ")
4. $ ("input [name ^ = 'text']") (the attribute value starts with text ).
V. $ ("input [name $ = 'text']") (the attribute value ends with text ).
6. $ ("input [name * = 'text']") (the attribute value includes text ).
2.5. FilterA) $ (this). hasClass ("red ")
B) $ ("div"). eq (1)
C) $ ("div"). filter (". red") (filter out the div containing the red class)
2.5.1. JudgmentIf ($ ("div"). has ("p "))
2.5.2. IngFor example, map the value attribute values of all matched input elements to a new set using the map () method, and convert the data in the set to an Array Using get, call the join () method of the array to concatenate the collection elements into strings.
2.5.3. Cleaning
$ ("# Menu li"). not (". home") (clear the home menu item ).
2.5.4. Intercept$ ("# Menu li") (truncates the 3,4 menu items ).
2.5.5. SearchChildren (), parents (), parent (), parentsUntil (), offsetParent (), prev (),
PrevUntil (), next (), nextAll (), nextUntil (), siblings ().
2.6. DOM operation2.6.1. Create element.Javascript:
Var div = document. createElement ("div ");
Document. body. appendChild (div );
Jquery:
Var $ div =$ ("<div> </div> ");
$ ("Body"). append ($ div );
2.6.2. Input textJavascript:
Var div = document. createElement ("div ");
Var txt = document. creatTextNode ("balara ");
Jquery:
Var $ div =$ ("<div> balara </div> ");
$ ("Body"). append ($ div );
2.6.3. Set attributesJavascript: div. setAttribute ("title", "box ");
Jquery: var $ div =$ ("<div title = 'box'> balara </div> ").
2.6.4. Insert contentAppend (), appendTo (), prepend (), prependTo (), after (), before (),
InsertAfter (), insertBefore ();
2.6.5. Delete contentRemove (), empty (), detach ()
2.6.6. Cloned content(Create a copy of the specified node): clone ();
2.6.7. Replacement content:ReplaceWith (), replaceAll ();
2.6.8. Package content:Wrap (), wrapAll (), wrapInner (), unwrap ();
2.6.9. Attribute operation:Attr (), attr (name, value), removeAttr ();
2.6.10. Class operation:AddClass (), removeClass (), toggleClass ();
2.6.11. Read/write text and value;Html (), text (), val ()
2.6.12. Read and Write css styles:Css ();
2.7. Event ProcessingThe jQuery event model has the following features:
1) unifies various methods in event handling;
2) allow each element to create multiple handlers for each event.
3) use the standard event type name in Level 2 event model.
4) unifies the transfer method of the Event object and standardizes the common attributes and methods of the Event object.
5) provides a unified approach for event management and operations.
I. Registration events
Ii. Quick registration, for example, $ (p ). click (function () {alert () ;}); other quick events are as follows (these methods correspond to the event types in the Level 2 event model one by one, with the same name)
3. The one () method is a special case of the bind () method. It will expire after a response is executed. The live () method is a special case of the bind method, and subsequent elements will also take effect.
4. logout event: unbind (); for example: $ ("p"). unbind ("mouseover ");
5. Event trigger: trigger (), for example, $ ("p"). trigger ("click ");
6. Event switching: toggle (); example:
7. Event hover:Hover (); Example:
8. Event assignment:Live (); Delegates a click event to the p element.In this way, the p element dynamically generated later also has a click event.. However, if the bind () method is used to bind a click event to the current p element, the dynamically generated p element will not have this click event. Live () can only bind one event at a time, while div can bind multiple events.
9. Examples of custom events:
2.8. ajax applications
A) ajax isAsynchronous JavaScript and XMLThat is, Asynchronous JavaScript and XML;
B) the core of ajax is JavaScript objects.XMLHttpRequest.
C) XMLHttpRequest can help users send requests to the server using JavaScript and process responses without blocking webpage interaction responses.
D) The following steps are generally required to implement asynchronous communication using the XMLHttpRequest object:
E) ajax example of jQuery:
G) the XMLHttpRequest object defines responseText, responseBody, responseStrean, and
ResponseXML attribute, used to store different response formats on the server:
H) the XMLHttpRequest object allows the server to respond to any form of data. However, in practical applications, most Web developers usually locate the format in XML, HTML, JSON, or other plain text formats.
I) During ajax asynchronous communication, the request string format sent by the client must be multiple name-value pairs connected by the "&" character,Serialize ()The method helps you quickly sort the string format of name-based pairs and return valid request strings:
J) in addition to the serialize () method, jQuery also definesSerializeArray ()Method. This method returns an object (object rather than a string) of the JSON structure of the value of the specified form field ).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
