Chapter One review of the basic methods of jquery

Last Update:2016-11-10 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

jquery is JavaScript, which is a. js file (download from the official website). The declaration of the jquery library must be written in the head tag of the HTML document when used.

1. Select Dom Node (common)

(1) $ (' P ')--access to all the paragraph elements in the HTML page document;

(2) $ (' #A ')--access to id=a elements in the HTML page document; (ID number unique)

(3) $ ('. B ')--access to all the elements of class = B in the HTML page document;

2. Deferred JavaScript execution

The JavaScript file is referenced in the head section of the HTML document. Once the browser discovers that the script line executes the JavaScript file immediately, but the HTML page document is not fully loaded (the body part is not loaded), it is necessary to delay the execution of the JavaScript code until the HTML page has finished loading. (You can also put JavaScript at the end of the body so you don't have to delay execution)

The method used to inform the JavaScript code that the DOM is ready to complete is $ (document). After the DOM is written, this method executes the function call (the function as its argument).

$ (document). Ready (function () {

})

The function body is called after the DOM has been loaded, and the function body is represented as a parameter that does not want the function to be executed a second time, that is, only once. Equivalent to $ (document). Ready () The document is registered with a prepared event. In JavaScript it's just like window.onload=function ().

3. Apply CSS to elements

The AddClass () method is used to apply a CSS class to the selected part of a Web page. It contains the name of the CSS class as a parameter of the method (note that the parameter is quoted as a character nginx, not a variable).

A CSS class:

. highlight{

Font-style:italic;

Background-color: #0f0;

}

Apply the jquery code for the CSS class:

$ (' div '). addclass (' highlight ');

$ (' body '). addclass (' highlight ');

4. Select a series of non-standard HTML elements

(1) $ (' Span:contains (Life) ')--Select the span element that contains the word life;

(2) $ (' div:odd ')--select even div element, counting from 0.

(3) $ (' Div:even ')--select the odd div element, counting from 0.

(4) $ (' P:eq (1) ')--Select the second paragraph element, counting from 0 onwards.

5. Count DOM nodes and display their text

In the DOM, a Web page is represented as a tree structure of a root node (parent) and some branch nodes (children), where each HTML element represents a node.

$ (document). Ready (function () {

var $nodes = $ (' #parent '). Children ();

Alert ("Number of nodes is" + $nodes. Length);

var txt = "";

$ (' #parent '). Children (). each (function () {

TXT + = $ (this). text ();

});

alert (TXT);

});

</script>

<body>

<div id= "Child1" >child1</div>

<div id= "Child2" >child2</div>

<div id= "Child3" >child3</div>

</div>

The above code accesses the HTML page's id = child node of the parent's DIV element and stores its child nodes in the variable $nodes, displaying the child node array length with alert. The each () method is then used to access its child nodes (traversing the array $nodes), using the text () method to return each child node to a string and finally displaying it with alert.

Several ways to explain:

①children () is a way of traversing a tree, which searches the direct child nodes of the pointing element and returns a new jquery object. This method only iterates down one layer in the DOM tree.

The ②each () method is used to iterate through each element in the wrapper collection. It contains an iterative function that writes code in the iteration function and applies to each individual element of the collection.

The ③text () method is a method of the jquery object that accesses the text content of the specified element.

The ④parent () method is a way to traverse a tree to search for a direct pro element (parent element) for each specified element, and to return a new jquery object. This method traverses only one layer up in the DOM tree.

The ⑤html () method gets the HTML content from the first element in the specified element, returns the HTML content as a string, and, unlike the text () method, returns only text. If the HTML page has a paragraph element:<p> I am the paragraph element <span> I am the span element in the paragraph element </span></p>;

At this point the jquery code: $ (' P '). html (); Call HTML method, return "I am paragraph element <span> I am a span element in paragraph element </span>"

⑥text (text), HTML (HTML); the text () method with parameters and the HTML () method can be used to change the contents of a DOM node. where HTML (HTML) parameter HTML can contain HTML tags;

6. Quickly create DOM nodes

Here are three ways to create a DOM node: the prepend (), the Prependto (), and the Clone () methods. (There are other methods, such as: Append (), AppendTo (), before (), insertbefore (), etc.)

HTML page code:

<body>

<p> I am the paragraph element <span> I am the span element in the paragraph element </span></p>

</body>

Page Display effect:

(1) The Predend () method inserts the specified content before the pointing element and returns a jquery object. The content can be text, HMTL elements, or jquery objects. Inserts a H2 element before the paragraph element whose text is "I am inserting an element". Add jquery code:

$ (' P '). prepend ('

Page Display effect:

(2) The Prependto () method inserts the specified element before the specified target (similar to the Prepend method, which is a different notation).

Example of a Prependto method that implements the above features: $ ('

(3) Clone () method: Use the Clone () method to quickly add a DOM node that is a copy of an existing element. Copies a H2 element, inserting the segment element before the paragraph element;

$ (' H2 '). Clone (). Prependto (' P ');

Note: If you insert a DOM element using the Prepend method, the insert and target elements are merged, which means that if you apply a style to a paragraph element, the style is also applied to the previously inserted H2 element. Now take the HTML page element above to verify;

Write a CSS class:

. highlight{

Background-color: #0f0;

Font-style:italic;

}

The HTML page code looks like this:

<! DOCTYPE html>

$ (document). Ready (function () {

$ (' P '). prepend ('

$ (' P '). addclass (' highlight '); Add a style to a paragraph element

});

</script>

<body>

<p> I am the paragraph element <span> I am the span element in the paragraph element </span></p>

</body>

Page Display effect:

Visible, the style is also applied to the inserted H2 element.

Chapter One review of the basic methods of jquery

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More