A common selector in jquery introduces _jquery

Hierarchy selector:

$ (' div p ');//Select all P elements under div

$ (' div>p '). CSS (' border ', ' 1px solid red ');//select only the direct child elements under the div

Adjacent elements

$ (' div ~ p '). CSS (' border ', ' 1px solid red '); equivalent to $ (' div '). Nextall (' P ');

All P-Sibling elements

$ (' div ~ * '). CSS (' border ', ' 1px solid red ');//represents all the sibling elements behind the Div

$ (' div +p '). CSS (' border ', ' 1px solid Red '); and $ (' div '). Next (' P ') equivalent///this notation after Div

Just find the first sibling element next to it, and the element is P.

Ways to get sibling elements:

Next (); The first sibling element immediately after the current element (next)

Nextall ()//all sibling elements after the current element

Prev ()//the next sibling element (previous) before the current element

Prevall ()//all sibling elements before the current element

Siblings ();//All sibling elements of the current element

Basic Filter Selector:

$ (' P:first ') is equivalent to $ (' P '). Gets the first P element in all P elements

$ (' P:last ') with $ (' P '). Last ()

$ (' P:eq (2) ') finds an element with an index of 2 in all P elements

$ (' P:even ') Select all odd-numbered P tags

$ (' p:odd ') Select all even P tags

$ (' P:not (. tst) '). CSS (); Select all not applied. TST The P element of this style is not followed by a selector name

$ (' p:gt (1) ') selects all P elements with index values greater than 1

$ (' P:lt (3) ') selects all P elements with index values less than 3.

$ (': Header ') Select all the H1-H6 elements on the page. (If you write this, there must be no spaces in the middle.) ）

Attribute Filter Selector:

$ ("Div[id]") Select <div> with id attribute

$ ("div[title=test]") The <div>,jquery with the title property "Test" is not selected in the Getelementsbyname

For encapsulation, with $ ("INPUT[NAME=ABC]")

$ ("div[title!=test]") Select <div> with Title property not "test"

You can also select the beginning "name^= value", ending "name$= value", including "name*= value", and so on, conditions

can be compounded. "[Property 1=a][property 2=b] ..." (*)

Form Object Property Selector (filter):

$ ("#form1: Enabled") Select all enabled elements in a form with ID Form1

$ ("#form1:d isabled") Select all the disabled elements in the form with ID Form1

$ ("input:checked") selects all selected elements (Radio, CheckBox), which cannot be separated by spaces.

$ ("select:selected") Select All selected option elements (Drop-down list)

Form Filter Selector:

$ (' #form1: Enabled ')//This represents a label that can be enabled and has an ID of Form1

$ (' #form1: Enabled ');//This represents all enabled elements that can be enabled and with an ID of Form1.

$ (' input:checked ')

$ (' input:disabled ')

$ (' select:selected ')

$ (": Input") Select all <input>, <textarea>, <select>, and <button> elements. and $ ("input") is not the same,

$ ("input") only get <input>

$ (": Text") selects all Single-line text boxes, equivalent to

$ ("Input[type=text]"), $ (' input[type=text] '), $ (': Text ');

$ (":p assword") Select all Password boxes.

Content Filter Selector:

: Contains (text): Filters out elements that contain a given text.

: empty contains elements that have no child elements or that are empty.

: Has (Selecttor)

:p arent to obtain elements that have child elements.

Visibility Filter:

: Hidden

Select all invisible elements including: (if written directly: Hidden will contain head\title\script\style ...)

1. Table cell element type= "hidden"

2. Set the CSS Display:none

3. Elements with a clear height and width set to 0.

4. The parent element is hidden, so the child element is also hidden

Visibility:hidden and opacity for 0 does not count, because also occupy position so do not think is hidden. (With previous version

jquery is not quite the same as before 1.3.2)

: Visible

Select all visible elements

child element Filter Selector:

The difference between the first and the first, First-child, and First-child, which selects each child element.

Last-child:

Only-child: Matches an element with only one child element in the current parent element.

Nth-child: Compare eq () to understand that EQ () value matches one, Nth-child () to match one child element for each parent element.

Nth-child (index), index starting from 1

Nth-child (even)

Nth-child (Odd)

Nth-child (3n), select the element of multiples of 3

Nth-child (3n+1) satisfies elements of 3 multiples of +1

Attention:

1. The object selected through the jquery selector is itself a jquery object, and the selector has an implicit iteration effect, such as:

$ (' P '). Click (function () {

alert (This.innertext);

});

is to annotate the Click event for all P.

2. Whichever element the selector chooses to return is a collection object, if the element is not found, the length value of the collection object is 0, and if the element is selected, the element of this length is the index value of the selected element. Therefore, it is also based on this attribute to determine whether the element exists. For example:

Iif ($ (' #div '). length>0)//Determine if the element exists

3. This is also the object that represents the element of the current triggering event in the event, but here this is a DOM object rather than a jquery object. If you need to execute a method or property in jquery, you should convert this to a jquery object

The mode of conversion is: $ (this);