Introduction to JQuery selector and application of example

Last Update:2017-01-13 Source: Internet

Author: User

Tags prev

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

A. Basic selector:

#id: Select the element for the given ID name, such as: $ ("#id1") to select an element with an ID of ID1
. class: Select the element for the given class name
Element: Selects all primary colors for a given element name
*: Match all elements
Selector1,selector2,......: Select the elements of these names, separated by commas, can be class or ID names
Two. Hierarchy selector:

$ ("ancestor descendant"): Selects all descendant (descendant) elements under the ancestor element
$ ("Parent>child"): Select All Child (sub) elements under parent
$ (' Prev+next '): Select the first next element immediately following Prev
$ (' prev~siblings '): Select all siblings elements after Prev
$ (' Prev+next ') and $ (. prev). Next ("Next") function as

$ (' prev~siblings ') and $ (. prev). Nextall ("siblings") function as

Three. Filter selection:

: First select the element such as: $ ("Div:first") to select the first DIV element
: Last Select Final element
: Not (selector) Select elements that are not selector
: Even select an even index element
: Odd Select all odd-indexed elements
: EQ (Index) to select an element that is equal to index
: GT (Index) Select an element that is greater than index
: LT (index) Select element with index less than index
: Header Select all : animanted Select all animation elements
Four. Content Filter:

: Contains (text) Select elements containing text text such as: $ ("div:contains (' Hello ')") to select a DIV element containing the Hello character
: Empty selects all elements that do not contain characters
: Has (selector) Select elements that contain selector elements
: Parent selects elements that contain child elements
Five. Visibility filtering:

: Hidden Select all visible elements
: Visible Select all invisible elements
Six. Attribute filter:

[attribute] Select the element that owns this property, such as $ ("div[id]") to select the div element that contains the id attribute
[Attribute=value] Select an element with attribute property equal to value
[Attribute!=value] Select elements that attribute attributes are not equal to value values
[Attribute^=value] Select an element with attribute property equal to value
[Attribute$=value] Select an element with an attribute property value starting at value
[Attribute*=value] Select an element with an attribute property value containing the value
[Selector1] [Selector2] .... Elements (combinations) that meet these conditions
Seven. child element Filter Selector

: Nth-child (index/even/odd/eqation) Select the index/even/odd child element under the parent element
: First-child Select the first child element of the parent element
: Last-child Select the last child element of the parent element
: Only-child Select a unique child element under the parent element
Eight. Form Property Filtering

: Enabled Select all visible elements such as: $ ("#form1: Enabled") is all available elements that select the form ID as Form1
: Disable Select all invisible elements
: Checked Select all selected elements
: Selected Select All selected option elements
Nine. Form Object filter

: Input Select all <input><textarea><select><button> elements
: Text Select all Single-line text sections, and the following are all in this format
: Password
: Radio
: checkbox
: Submit
: Image
: RESET
: button
: File
: Hidden

Instance

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title>1-4</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

<script src= ". /scripts/jquery-1.3.1.js "type=" text/Web Effects "></script>
<script type= "Text/javascript" >
Wait for the DOM element to finish loading.
$ (document). Ready (function () {
var domobj = document.getElementsByTagName ("h3") [0]; Dom Object
var $jqueryobj = $ (domobj); jquery objects
Alert ("Dom object:" +domobj.innerhtml);
Alert ("jquery object:" + $jqueryobj. html ());
});
</script>
<body>
<p title= "Choose your favorite fruit." > Your favorite fruit is?</p>
<ul>
<li> Apple </li>
<li> Orange </li>
<li> Pineapple </li>
</ul>
</body>

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