JQuery practice: Create an element packaging set and select the elements to be operated,

JQuery practice: Create an element packaging set and select the elements to be operated,

What can you learn?

1. Use the basic CSS Selector
2. Use sub-selector, container selector, and feature Selector
3. Select by location
4. Use the custom jQuery Selector

The first thing we have to do when using almost any jQuery method is to select the page element to be operated. Sometimes, the set of elements to be selected is easy to describe, for example, "All link elements on the page ". Sometimes complicated descriptions are required, such as "even sections with CSS leftchild classes ".

Fortunately, jQuery provides a robust selector syntax that allows us to easily, elegantly, and concisely specify almost human and element sets. Now let's take a look at jQuery's powerful selector functions.

Use the basic CSS Selector

Use sub-selector, container selector, and feature Selector

Child Selector:

P> a: select a link that matches only the direct subnode of the <p> element.
Ul> li> a: select the link of the direct subnode of ul's direct subnode li

Container Selector:

Li: has (a): This selector matches all <li> elements containing <a> elements.

Feature Selector:

A [href ^ = http: //]: This selector matches all links starting with http: //.
Input [type = text]: matches all <input> elements whose type property value is text.

Add: the basic CSS selector supported by jQuery

Selector	Description
*	Match All elements
E	Match All elements whose label name is E
E F	Matches all elements of the child node whose label name is F.
E> F	Matches all elements of the direct subnode with the tag name F.
E + F	Match all the elements F (E and F are next to each other) of the neighboring brother node E)
E ~ F	Match all the elements F (E and F can be left alone) in front of the human and brother node E)
E: has (F)	All elements of the child node whose Tag Name Is E and at least one tag name is F
E. C	Matches all Element E with class name C.
E # F	Matching Element E whose id property value is I
E [A]	Matches all Element E with feature A, regardless of the value of feature)

Select by location
Here I will list a few items. If you need them, you can view the jQueryAPI documentation.
A: firstThe selector in this format matches the first <a> element on the page.
P: oddMatch all the section elements whose ordinal numbers are odd.
P: evenMatch all the section elements whose ordinal numbers are even.
Li: last-childSelect the last child node of the parent Element
: Eq (n)The Nth Matching Element (n starts from 0)
: Gt (n)Element after the nth Matching Element (not included) (n starts from 0)
: Lt (n)Elements before the nth Matching Element (not included) (n starts from 0)

Use a custom jQuery Selector(A few items are listed here)

Selector	Description
: Button	Select any button
: Checkbox	Select only check box Elements
: Contain (foo)	Select only elements containing text foo
: Hidden	Only hide Elements
: Text	Select only text field elements (input [type = text])
: Not (filter)	Returns the result based on the specified filter.

Summary:

JQuery has a variety of selectors. You can choose based on your own habits. Basically, you can specify a set of any elements.

Author: By: Luo Jian yuan http://blog.csdn.net/sunyuan_software