Home >Web Front-end >JS Tutorial >Introduction to several ways to obtain objects in Jquery_jquery

Introduction to several ways to obtain objects in Jquery_jquery

WBOY
WBOYOriginal
2016-05-16 17:03:211154browse

1. Some of the core methods of JQuery
each(callback) 'Like a loop
$("Element").length; 'The number of elements is an attribute
$("Element").size (); 'It is also the number of elements, but with brackets it is a method
$("Element").get(); 'A collection of elements on the page, stored in the form of an array
$(" Element").get(index); 'The function is the same as above, index represents the element, the subscript of the array
$("Element").get().reverse(); 'Put the obtained array Direction
$("Element1").index($("Element2")); 'The index value of element 2 in element 1 is.

2. Basic object acquisition (note that the Jquery objects obtained here are not Dom objects, but they can be converted)
$("*") 'means to obtain all objects but I I have never used it like this before
$("#XXX") 'Get the element object with id=XXX (the id can be the tag's id or CSS style id). Commonly used

$("input[name=' username']") To obtain the element object with name='userName' in the input tag, it is commonly used

$(".abc") ' To obtain the element object whose name is .abc in the style class, it is commonly used
$(" div") ' Tag selector selects all div elements commonly used
$("#a,.b,span") 'Indicates getting the element with ID a, the element using class style b and all span elements
$("#a .b p") 'All p elements whose ID number is a and use b style

3. Obtain hierarchical elements
$("Element1 Element2 Element3 ... .") 'The previous parent is followed by the subset
$("div > p") 'Get all p elements below the div
$("div p") 'The first p after the div element Element
$("div ~ p") 'All p elements after div

4. Simple object acquisition
$("Element:first") 'A certain type of element in the HTML page The first element
$("Element:last") 'The last element of a certain type of element in the HTML page
$("Element:not(selector)") 'Remove all elements that match the given selector Elements, such as: $("input:not(:checked)") means selecting all unchecked check boxes
$("Element:even") 'Get even rows
$("Element:odd" ) 'Get odd rows
$("Element:eq(index)") 'Get a given index value
$("Element:gt(index)") 'After getting the element with a given index value All elements
$("Element:lt(index)") 'Get all elements before the element with a given index value

5. Acquisition of content objects and object visibility
$( "Element:contains(text)") 'Whether the element contains text text content
$('Element:empty") 'Get the element that does not contain sub-elements or text
$("Element:partnt") ' Get the element that contains sub-elements or text
$("Element:has(selector)") 'whether it contains a certain element, such as: $("p:has(span)") means all p elements that contain span elements
$("Element:hidden") 'Select all visible elements
$("Element:visible") 'Select all invisible elements

6. Other object acquisition methods
$( "Element[id]") 'All elements with ID attributes
$("Element[attribute = youlika ]" 'Get all elements with an attribute of youlika
$("Element[attribute != youlika ]" 'Get all the elements whose attribute is not youlika
$("Element[attribute ^= youlika ]" 'Get all the elements whose attribute is not youlika
$("Element[attribute $ = youlika ]" 'Get all elements whose attribute does not end with youlika
$("Element[attribute *= youlika ]" 'Get all elements whose attribute starts with youlika
$("Element [selector1][selector2][....]") 'Conforms to the attribute selector, such as $("input[id][name][value=youlika]") means to get the ID, Name and value of youlika input element.

7. Obtaining child elements
$("Element:nth-child(index)") 'Select the nth element below the parent
$("Element:nth-child( even)") 'Select the even number below the parent
$("Element:nth-child(odd)") 'Select the odd number below the parent
$("Element:nth-child(3n 1)" ) 'Expression
$("Element:first-child") 'Select the first child element below the parent
$("Element:last-child") 'Select the last child below the parent Element
$("Element:only-child") 'matches the only child element under the parent. For example, if dt is the only one in the dl list, then dt

will be selected. 8. Get the form object
$(:input)//Find all Input elements, including drop-down lists, text fields, radio buttons, check boxes, etc.
$(:text)//Match all single-line text boxes
$(:password)//Match all password boxes
$(:radio)//Match all radio buttons
$(:checkbox)//Match all check boxes
$(:submit)//Match all submit buttons
$(:image)//Match all image fields, such as
$( :reset)//Match all reset buttons
$(:button)//Match all buttons
$(:file)//Match all file upload domains
$(:hidden)/ /Match all invisible elements or elements with type hidden
$(:enabled)//Match all available input elements, for example radio:enabled means match all available radio buttons
$(:disabled) // Match all unavailable input elements, the effect is opposite to the above
$(:checked) // Match all selected check box elements
$(:selected) // Match all drop-down lists

9. Setting and removing element attributes
$("Element").attr(name) 'Get the first matching attribute value, such as $("img").attr("src")
$("Element".attr(key,value)") 'Set attributes for a certain element
$("Element".attr({key:value,key1:value,....})) 'Set multiple attributes for an element at once
$("Element").attr(key,function) 'Set a calculated attribute value for all matching elements
$("Element"). removeAttr(name)//Remove an attribute

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn