Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the selector of jquery". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the selector of jquery.

Jquery selectors are: 1, basic selector (ID, element, class selector, etc.); 2, basic filter selector (: first,: last,: even, etc.); 3, content filter selector (: empty,: has (),: parent, etc.); 4, visibility filter selector; 5, attribute filter selector, etc.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Brief introduction of jQuery Selector

The jQuery selector allows you to manipulate groups of HTML elements or individual elements.

The jQuery selector "finds" (or selects) HTML elements based on the element's id, class, type, attribute, attribute value, and so on. It is based on the existing CSS selector, in addition to it, it has some custom selectors.

All selectors in jQuery begin with the dollar sign: $().

1. Basic selector

$("# test") Select the element whose id value is test. The id value is unique, so a single element is returned. $("div") selects all div tag elements, returns an array of div elements $(".myclass") selects all elements of css using the myclass class $("*") selects all elements. $("# test,div,.myclass") selects multiple elements.

two。 Hierarchical selector

All elements in the $("div span") selection $("div > span") the child element $("# one + div") under the element name is selected. The next sibling element of the element whose id is one is equivalent to $("# one"). Next ("div") $("# One~div ") all siblings following elements whose id is one are equivalent to $(" # one "). NextAll (" div ") $(" # one "). Siblings (" div ") gets all siblings of an element whose id is one (whether before or after) $(" # one ") .prev (" div ") gets id as one Siblings ("div") > $("# one~div") > $("# one + div") or $("# one"). Siblings ("div") > $("# one"). NextAll ("div") > $("# one"). Next ("div")

3. Basic filter selector

$("div:first") select the first element of all elements $("div:last") select the last element of all elements $("input:not (.myClass)") select elements whose class is not myClass $("input:even") select elements whose index is even (index starts at 0 ) $("input:odd") selects elements whose index is cardinality (index starts at 0) $("input:eq (2)") selects elements whose index is equal to 2 ("input:gt (4)") selects elements whose index is greater than 4 ("input:lt (4)") selects elements whose index is less than 4 Element $(": header") filters out all title elements For example, $("div:animated"), such as H2, h3, h4, etc., select the element $(": focus") that is animating and select the element that is currently in focus.

4. Content filter selector

("div:contains ('Name')") Select all elements that contain' Name' text'$("div:empty") Select empty elements that do not contain child elements (including text elements) $("div:has (p)") Select all elements that contain

Element $("div:parent") selects elements that have children (including text elements)

5. Visibility filter selector

$("div:hidden") selects all invisible elements $("div:visible") selects all visible elements

6. Attribute filter selector

$("div [id]") Select all elements that have attribute id $("input [name = 'test']") select all elements whose name attribute is equal to' test' $("input [name equal to input]]) select all elements whose name attribute is not equal to 'test' $(" input [name ^ =' news'] ") Select all name attributes start with 'news' element $("input [name $=' news']") select all name attributes ending with 'news' element $("input [name * =' news']") select all name attributes containing 'news' element $("div [title | =' en']") select attribute title equals' en' or prefixed with 'en'] (the string is followed by a hyphen') element $("div [title~='en']") Select the attribute title the element $("div [id] [title$='test']") that contains the character en in the value separated by spaces, select the owning attribute id An element whose attribute title ends with 'test'

7. Child element filter selector

("div. One:nth-child (2)") Select class as the second child element under the parent element of one' $("div span:first-child") select the first element in each ("div span:last-child"), select the last element in each $("div button:only-child"), select the element that is the only child element in

8. Form object property filter selector

$("# form1: enabled") Select all available elements in the form with id as' form1' $("# form2: disabled") Select all unavailable elements in the form with id as' form2' $("input: checked") Select all selected elements $("select option:selected") Select all selected elements among the child elements of all select

9. Form selector

$(": input") selects all And element $(": text") select all single-line text boxes $(": password") select all password boxes $(": radio") select all single checkboxes $(": checkbox") select all multiple checkboxes $(": submit") Select all submit buttons $(": image") select all image buttons $(": reset") select all reset buttons $(": button") select all buttons $(": file") select all The upload field $(": hidden") selects all invisible elements. Thank you for reading. The above is the content of "how to use the selector of jquery". After the study of this article, I believe you have a deeper understanding of how to use the selector of jquery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.