Summary of jquery methods

Source: Internet
Author: User


1. Using properties and content that access HTML elements

1.1 Using jquery to get the jquery object for an HTML element

var dom object = document.getElementById (object ID)//object ID directly write ' id ', not selector

The var jquery object = jquery selector. Get (Index)//$ (' a '). Get (0) get first a label

You can also use the each () method to traverse all matching elements of the jquery selector and execute the specified callback function on each element.

Each (callback function)

1.2

Use jquery to get and set the contents of an HTML element

You can call the HTML () method, the text () method, and the Val () method to get and set the contents of an HTML element

...

var value = jquery object. val ();//Get

jquery object. val (value);//settings

The Val () method can also specify a function to set the content syntax for an HTML element as follows:

$ (selector). VAR (function (Index,oldvalue))

The parameters are described as follows:

$ (selector): Selector.

Index: Optional parameter. Receives the index position of the selector (when multiple elements are selected to be valid).

OldValue: Optional parameter. Receives the current Value property of the selector.

Example: $ (' input '). VAR (function (Index,oldvalue) {

return Oldvalue.touppercase ();

});

<input type= "text" name= "user" value= "ABCD"/>


1.3 using jquery to get and set attributes for HTML elements

Var a=jquery object. attr (' attribute name ');//Get Property

jquery object. attr (' attribute name ', ' attribute value ');//Set Property

A set of properties that match elements can be set in the form of key/value pairs

Example: $ (' img '). attr ({

SRC: ' .... ',

alt: ' ... '

});

1.4 using jquery to get and set attributes for HTML elements

jquery object. REMOVEATRR (' attribute name ');


1.5 Adding content to a Web page using jquery

1. Call the Append () method to append content to the HTML element:

jquery object. Append (' append content ');//Can be a label, add to the inside of the element;

2. Inserting content in front of HTML elements

jquery object. Before (' Append content ')

3. Inserting content after the HTML element

jquery object. After (' Append content ')


2. Managing HTML Elements with jquery

2.1 Traversing HTML elements with jquery

The jquery selector makes it easy to match and manipulate HTML elements that meet certain criteria. But sometimes you need to personalize it based on the specifics of the HTML element, and you can use the Find () method to traverse the HTML element that satisfies the condition.

Result set = Find (selector)

You can then use the For statement to iterate through the objects in the result set;

2.2 Use jquery to check if an element contains a specified element

jquery object. has (child element name)//can use $ (' Li '). has (' UL ') selects all LI elements containing UL elements

2.3 Using jquery to delete HTML elements

1. Use the empty () method to delete the contents of the HTML element and all child elements

jquery object. Empty ()

2. Remove the HTML element using the Remove () method

jquery object. Remove ([selector])

The selector is an optional parameter that specifies that the matching HTML element be deleted. If you do not specify a parameter, all HTML elements corresponding to the jquery object are deleted.

2.4 Inserting HTML elements with jquery

1.after ()/insertafter () inserts the specified content after the selected element

2.5 Copying HTML elements using jquery

Call the Clone () method to copy HTML elements

Clone ([withdataandevents])

The parameter withdataandevents specifies whether the data and processing functions of the HTML element are also copied, and the default is False.

2.6 Replacing HTML elements with jquery

1. ReplaceWith () method

jquery object. replacewith (replaced content);

jquery objects typically use selectors. The ReplaceWith () method replaces the HTML element corresponding to the jquery object with the contents of the parameter

2. Repaceall ()

jquery object. ReplaceAll (target)

jquery objects typically represent the content of replacements. Target can be a jquery object, the selector post DOM object. Used to specify the HTML element to replace.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.