jquery Chapter II

One, jquery selector

jquery's rules of conduct must be acquired to the element before it takes effect. Let's look at a simple example:

<p class = "Demo" >jquery demo</p>

<script type = "Text/javascript" >

$ (". Class"). Click (function () {

Alert ("JQuery demo!");

})

The purpose of this code is to set an onclick event for the <p> element, and a dialog box pops up when this element is clicked.

Ii. jquery Selector

The 1.jQuery selector is divided into basic selectors, hierarchical selectors, filter selectors, and form selectors.

(1) Basic selector:

The basic selector is the most commonly used selector in jquery and the simplest selector, which finds DOM elements by element ID, class, and tag name. In Web pages, each ID name can be used only once, and class allows for reuse. The basic selector is described below:

$ ("#test") select element with ID test

$ (". Test") selects all elements of class test

$ ("P") Select all the <p> elements

$ ("Div,span,p.myclass") selects all <div>,<span>, and a set of elements that have a class of myClass <p> tags

(2) Hierarchy selector:

Hierarchical selectors are a good choice if you want to get specific elements, such as descendant elements, child elements, neighboring elements, and sibling elements, through hierarchical relationships between DOM elements. The hierarchy selector is described below:

$ ("div span") Select all <span> elements in <div>

$ ("div > span") Select a child element under the <div> element name is <span>

$ (". One + div") Select the next <div> sibling element of class one

$ ("#two ~ div") selects all <div> sibling elements behind an element with ID of.

You can use next () instead of the $ ("Prev+next") selector, for example

$ (". One + div"), equivalent to $ (". One "). Next ("Div");

You can use Nextall () instead of the $ ("prev ~ siblings") Selector, for example

$ ("#prev ~ div") is equivalent to $ ("#prev"). Nextall ("div");

Siblings () method vs. $ ("prev ~ siblings") Selector:

The $ ("prev ~ div") selector can only select the siblings <div> elements that follow the "prev" element. and the sibling () method is independent of the position, as long as the peer node can match.

(3) Filter selector:

The filter selector primarily filters out the required DOM elements through a specific filtering rule, which is the same as the pseudo-class selector syntax in CSS, where the selector begins with a colon: Filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering, and Form object attribute filter selectors according to different filtering rules.

① Basic Filter Selector

: First selects element one, for example: $ ("Div:first") selects all <div> elements in 1th <div> element

: Last selected element, for example: $ ("Div:last") Select all <div> elements in the last <div> element

: Not (selector) removes all elements that match a given selector, for example: $ ("Input:not (MyClass)") Pick <input> element with class not MyClass

: Even selects all elements of an even-numbered index, starting at 0, for example: $ ("Input:even") to select an even <input> element of index

: Odd Selection index is an odd number of all elements, index starting from 0, for example: $ ("input:odd") pick index is odd <input> element

: EQ (index) selects an element with index equal to index (index starting from 0), for example: $ ("Input:eq (1)") pick <input> element with index equal to 1

: GT (Index) selects an element with an index greater than index (index starting from 0), for example: $ ("INPUT:GT (1)") to select the <input> element with an index greater than 1 (note, greater than 1, excluding 1)

: LT (index) selects an element with index less than index (index starting from 0), for example: $ ("input:lt (1)") Select the <input> element with index less than 1 (note, less than 1 and not including 1)

: Header selects all the caption elements, such as h1,h2,h3 and so on, for example: $ ("header") to select all the

: Animated selects all elements that are currently performing an animation, for example: $ ("div:animated") Select the <div> element in which the animation is being performed

: Focus selects the element with the current focus (": Focus") to pick the element that currently gets focus

② Content Filter Selector:

: Contains (text) Select the element containing the text content as "text", for example: $ ("Div:contains (' I ')") Select the <div> element that does not contain child elements

: Empty Select a blank element that does not contain child elements or text, for example: $ ("Div:empty") to select a <div> empty element that does not contain child elements

: Has (selector) selects the element containing the element that the selector matches, for example: $ ("Div:has (P)") Select the <div> element that contains the <p> element

: Parent selects elements that contain child elements or text, for example: $ ("div:parent") Select the <div> element that has child elements

③ Visibility Filter Selector

: Hidden selects all elements that are not visible, for example: $ (": Hidden") to select all elements that are not visible. including <input type= "hidden"/>,<div style= "Display:none;" > and <div style= "Visibility:hidden;" > and other elements. If you want to select only the <input> element, you can use $ ("Input:hidden")

: Visible Select all visible elements, for example: $ ("div:visible") Select all visible <div> elements

④ Property Filter Selector

The filter rule for a property filter selector is to get the corresponding element by property.

[attribute] Select the element that owns this property, for example: $ ("Div[id]") Select the element that owns the property ID

[Attribute=value] Select an element with the value of the property, for example: $ ("div[title = Test]") to select an element with the property title ' Test '

[Attribute!=value] The value of the selected attribute is not equal to the element of value, for example: $ ("div[title!=test]") pick attribute title not equal to ' test ' <div> element

[Attribute^=value] Select an element with value starting with value, for example: $ ("div[title^=test]") Select the attribute title begins with "test" <div> element

[Attribute$=value] The value of the selected attribute contains the element ending with value, for example: $ ("div[title$=test]") Select the attribute title <div> element ending with "test"

[Attribute*=value] Select the value of the attribute that contains the element of value, for example: $ ("div[title*=test]") Select the <div> element with the property ending with "test"

[Attribute|=value] Select an element that is equal to the given string or prefixed with the string (followed by a hyphen "-"), for example: $ ("div[title|=" en "]") Select attribute title equals en or an element prefixed with en (the string followed by a hyphen '-')

[Attribute~=value] Select the attribute with a space-delimited value that contains a given value in the element, for example: $ ("div[title~=" UK "]") select attribute title The element that contains the characters in a space-delimited value UK

[Attribute1] [Attribute2] [Attributen] combines a property selector with a property selector to satisfy multiple conditions. Each time you select, zoom out a range, for example: $ ("div[div][title$= ' Test ')" Select the owning attribute ID, and the property title is "<div> element" with "Test ended"

⑤ Sub-element filter Selector

: Nth-child (index/even/odd/equation) selects the index child element or the odd-even element under each parent element (index is counted from 1), for example:: EQ (index) matches only one element, and: Nth-child will match child elements for each parent element, and the index of Nth-child (index) starts at 1, and the: EQ (index) is calculated from 0.

: First-child selects the 1th child element of each parent element: The First-child selector matches the 1th child element for each parent element, for example: $ ("ul li:first-child"); select 1th <li in meige<ul> > Elements

: Last-child selects the last child element of each parent element, and, again, only a single element is returned, whereas: The Last-child selection will match the last child element for each parent element, for example: $ ("ul li:last-child"); Select each <ul The last <li> element in >

: Only-child If an element is the only child element in its parent element, it will be matched. If the parent element contains other elements, it will not be matched, for example: $ ("ul li:only-child") <li> element of the unique child element when selected in <ul>

⑥ Form object property Filter Selector

: Enabled selects all available elements, for example: $ ("#form1: Enabled") to select all available elements in a form with id "Form1"

: Disabled Select all unavailable elements, for example: $ ("#form2: Disabled") Select all the unavailable elements in the form with the id "Form2"

: Checked Select all selected elements (Radio box, check box), for example: $ ("input:checked") Select All selected <input> elements

: Selected selects all selected option elements (drop-down list), for example: $ ("select Option:selected") selects all selected option elements

(4) Form selector

Example of Form object property filtering

: Input selects all <input>, <textarea>, <select>, <button> elements, for example: $ (": Input") to select all <input>, < Textarea>, <select>, <button> elements

: Text selects all single-line text boxes, for example: $ (": Text") to select all single-line text boxes

: Password Select all password boxes, for example: $ (":p assword") Select all Password boxes

: Radio Select all the radio boxes, for example: $ (": Radio") Select all the radio boxes

: checkbox selects all multi-box, for example: $ (": CheckBox") Select all multi-Marquee

: Submit Select all Submit buttons, for example: $ (": Submit") Select all the Submit buttons

: Image selects all the image buttons, for example: $ (": Image") to select all the image buttons

: RESET selects all the reset buttons, for example: $ (": Reset") to select all the reset buttons

: Button selects all buttons, for example: $ (": Button") Select All buttons

: File selects all upload fields, for example: $ (": File") to select all the upload fields

: Hidden selects all invisible elements, for example: $ (": Hidden") Select all invisible elements

jquery Chapter II