Home >Web Front-end >JS Tutorial >Introduction to several ways to obtain objects in Jquery_jquery
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