JQuery application (1) Use the jQuery selector (recommended) and jquery Selector

JQuery application (1) Use the jQuery selector (recommended) and jquery Selector

For example, the previous javascript programming in jQuery provides standard selectors for all css3 projects. developers can use these selectors to easily select various elements for javascript.

The important thing is that jQuery has very good compatibility with these selectors, and mainstream browsers have passed the test, which makes the theoretical css3 selector program the facts. Developers can define various css classes according to the previous method, and then add them to the specified element set through the addClass () method or the className attribute.

1. Attribute Selector

(Properties can be found in jQuery documentation or http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp)

The syntax of the property selector is to add relevant properties with brackets "[" and "]" after the tag, and then assign different logical relationships.

The following is HTML

<Li> first </li> <a href = "1-1.html"> second </a> </li> <a href = "1-2.html" title = "third"> third </a> </li> <a href = "1-3.html"> fourth </a> </li> <li> <a href = "1-4.html" title = ""> fifth </a> </li>

If you want to set the tag of the title attribute, use the following syntax:

$("a[title]")

Add css styles to two hyperlinks with the title Attribute Set

<Style>. altcss {/* set a CSS category */background-color: #005890; color: #4eff00 ;} </style> <script type = "text/javascript"> $ (function () {$ ("a [title]"). addClass ("altcss")}); </script>

Display style:

There are many other attribute selectors. You can refer to the jQuery manual of each version for flexible use. The following are commonly used.

[Attribute] [attribute = value] // matches a given attribute as an element of a specific value [attribute! = Value] // match all elements that do not contain the specified attribute or that do not match the specified value. [Attribute ^ = value] // matches a given attribute with the element [attribute $ = value] starting with some values // matches the given attribute with the element [attribute * = value] // match a given attribute to an element that contains certain values

For example, you can use

    $(function() {        $("li a[href$='pdf']")    });

2. Include Selector

JQuery also provides the include selector to select elements that contain certain special tags, such as the following code:

$("li:has(a)")

Indicates the li element containing the hyperlink.

For example

$("div:has(p)").addClass("test");

Adds a test class to all div elements containing p elements.

FinallyCss3 attribute selector supported by jQuery, Contribution query.

Selector	Description
*	All tags
E	All tags named E
EF	All the tags named F and are the child tags marked by E (including the sun and Sun mark)
E> F	All the tags named F and are the sub-tags marked by E (excluding the sun mark)
E + F	All tags named F and followed by the preceding E tag
E ~ F	All the tags named F, and there is an E mark before this mark
E: has (F)	All tags named E, and the tag contains the F tag
E. C	All tags with names E are classified as C. If E is removed, the attribute selector. C is used.
E # I	All the tags named E, whose id is I. If E is removed, the ID selector I
E [A]	All tags with the name E and attributes
E [A = V]	All tags named E, and the value of attribute A is equal to V
E [A ^ = V]	All tags whose names are E and whose values start with V
E [A $ = V]	All tags whose names are E and whose values end with V
E [A * = V]	All tags named E, and the value of attribute A contains V
	It is purely manual. please correct me if there is any error

3. Position Selector

Css3 can also be selected by marking the location, for example, selecting the first li Element

$("li:first-child")

Select the li element of an odd number of rows.

$("li:nth-child(odd)")

Note that the nth-child (odd) selector has the same result as li: odd because: the css selector of nth-child starts counting from 1, while the other selector starts counting from 0.

For example:

$("p:eq(4)").addClass()

There are five elements that match the className.

The following describes the css3 position selector supported by jQuery.

Selector	Description
: First	First element
: Last	Last Element
: First-child	First child element
: Last-child	Last child element
: Only-child	For example, p: only-child Selects all p elements. If the p element is the unique child element of the parent element
: Nth-child (n)	Nth child element (counted from 1)
: Nth-child (odd/even)	All child elements with odd or even numbers (counted from 1)
: Nth-child (nX + Y)	The formula is used to calculate the position of an element. For example, li: nth-child (5n + 1) indicates that all li elements are selected, and these li elements are the 5n + 1 elements of the parent element (, 11, 16 ...)
: Odd or: even	Element with an odd or even number
: Eq (n)	Nth element (counted from 0)
: Gt (n)	All elements after n (n starts counting from 0, and the calculation does not contain the n itself)
: Lt (n)	All elements before Nth (n starts counting from 0, and the calculation does not contain nth itself)
	It is purely manual. please correct me if there is any error

4. Filter Selector

In addition to some selectors in css3, jQuery also provides many custom filter selectors to process more complex choices. For example, you often want to know the check box selected by the user. If you use the attribute value to determine the check box, you can only obtain the selected status in the initial status, rather than the actual selection status. Using the jQuery: checked selector, you can easily get your choice.

The instance code is as follows:

<Script src =" http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js "> </Script> <script type =" text/javascript "> function showChecked (oCheckBox) {// use checked to filter out the selected altcss $ ("input [name =" + oCheckBox + "]: checked "). addClass ("altcss") ;}</script> <style>. altcss {/* set a CSS category */} </style> <form name = "myform"> <p> <label for = "football"> football <input type =" checkbox "name =" like "id =" football "/> </label> </p> <label for =" basketball "> basketball <input type =" checkbox ""name =" like "id =" basketball "/> </label> </p> <label for =" volleyball "> volleyball <input type =" checkbox" name = "like" id = "volleyball"/> </label> </p> <input type = "button" value = "show select" onclick = "showChecked ('like ') "> </p> </form>

In addition, filters can be used iteratively.

:checkbox:checked:enabled

Indicates that all user-selected and not disabled in input type = "checkbox.

The following describes the commonly used selection filters in jQuery.

Selector	Description
: Animated	All elements in the animation
: Button	All buttons, including input [type = button], [type = submit], [type = reset], and <button>
: Checkbox	All check boxes, equivalent to the input [type = checkbox] Mark
: Contains (foo)	Select an element containing the text "foo"
: Disabled	Disabled elements in the page
: Enabled	No disabled elements in the page
: File	Upload File Elements
: Header	Select All title elements, such as
: Hidden	Hidden elements in the page
: Image	The image submission button is equivalent to input [type = image]
: Input	Form elements, including <input>, <select>, <textarea>, <button>
: Not (filter)	Reverse Selection
: Parent	Select all child elements (including text). Empty elements are excluded.
: Password	Password text box, equivalent to input [type = password]
: Radio	Single button, equivalent to input [type = radio]
: Reset	Reset button, equivalent to input [type = reset]
: Selected	Items selected from the drop-down menu
: Submit	Submit button, including input [type = submit] And button [type = submit]
: Text	Text input box, equivalent to input [type = text]
: Visble	All visible elements on the page
	It is purely manual. please correct me if there is any error

5. implement reverse Filtering

In the above filter, the not (filter) filter can be used for reverse selection. The filter parameter can be any other filter selector. For example, the following code indicates all non-radio elements in the <input> flag.

input:not(:radio)

In addition, the filter selector can be used iteratively.

The following example uses jQuery's reverse filtering function.

<Script src =" http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js "> </Script> <script type =" text/javascript "> $ (function () {// iterator using selector $ (": input: not (: checkbox ): not (: radio )"). addClass ("altcss") ;}); </script> <style>. altcss {background-color: # ffbff4; text-decoration: underline; border: 1px solid # 0000FF; font-family: Arial, Helvetica, sans-serif; font-size: 12px ;}</style> <form method = "post" name = "myForm1" action = "addInfo. aspx "> <p> <label for =" name "> name: </label> <input type = "text" name = "name" id = "name"> </p> <label for = "passwd"> password: </label> <input type = "password" name = "passwd" id = "passwd"> </p> <label for = "color"> favorite color: </label> <select name = "color" id = "color"> <option value = "red"> red </option> <option value = "green"> green </option> <option value = "blue"> blue </option> <option value = "yellow"> yellow </option> <option value = "cyan"> green </ option> <option value = "purple"> purple </option> </select> </p> <p> gender: <input type = "radio" name = "sex" id = "male" value = "male"> <label for = "male"> male </label> <input type = "radio" name = "sex" id = "female" value = "female"> <label for = "female"> female </label> </p> <p> you like what to do: <br> <input type = "checkbox" name = "holobby" id = "book" value = "book"> <label for = "book"> reading </label> <input type = "checkbox" name = "holobby" id = "net" value = "net"> <label for = "net"> surfing the Internet </label> <input type =" checkbox "name =" holobby "id =" sleep "value =" sleep "> <label for =" sleep "> sleeping </label> </p> <label for = "comments"> I want to leave a message: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p> <p> <input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit"> <input type = "reset" name = "btnReset" id = "btnReset "value =" Reset "> </p> </form>

The selector in the above Code is as follows:

 $(":input:not(:checkbox):not(:radio)").addClass("altcss");

All <input> <select> <textarea> or <button> non-checkbox and non-radio elements (note the differences between input and: input), except for single-choice buttons and check boxes, the altcss style is added to other elements of the form.

Note: In not (filter), the filter parameter must be a filter selector rather than another selector. The following code is a typical syntax error.

div:not(p:hidden)

Which of the following statements is true?

div p:not(:hidden)