Jquery gets the setting and removal of objects and properties of a specified tag

  • 2020-03-30 03:09:16
  • OfStack

1. Let's talk about the concept of JQuery. JQuery was first created by a man named John Resig of America, and later many JS masters joined the team. In fact, JQuery is a JavaScript class library, the class library collection of many functional methods, using the library you can use simple code to achieve some complex JS effects.

2. JQuery realizes the separation of codes. Instead of adding events such as onclick to call functions in web pages, JQuery class library and its own JQuery code can be directly introduced.
Such as:
function(){ alert(" Click on me! "); 

In the above code, as long as you define Element, the click after the Element is an action
Alert (" click me! ") ); This is the code to execute, and of course you can have a lot of operations in this function;

The $sign here stands for JQuery, which refers to the class library... That's how I understand it;

3. Some of the core methods of JQuery

Each (callback) 'is like a loop

$(" Element "). The length; 'the number of elements is an attribute

$(" Element "). The size (); 'is also the number of elements, but having parentheses is a method

$(" Element "). The get (); 'a collection of elements on a page, stored as an array

$(" Element "). The get (index); The 'function is the same as above, index is the index of the array

$(" Element "). The get (). The reverse (); 'take the direction of the resulting array

$(" Element1 "). The index ($(" Element2 ")); The index value of 'element 2 in element 1 is...

4. Basic object acquisition

$(" * ") "gets all the objects

$(" #element ") 'gets the same ID number as in CSS

$(".abc ") 'all elements using the.abc style

The $(" div ") 'tag selector selects all div elements

$(" #a,.b,span ") 'gets the element whose ID is a and the element that USES the class style b and all the span elements

$(" # a.b p ") the 'ID number is a and all p elements of the b style are used

5. Acquisition of hierarchical elements

$(" Element1 Element2 Element3... The preceding parent is followed by a subset

$(" div > P ") 'gets all the p elements under div

$(" div + p ") 'the first p element after the div element

$(" div ~ p ") 'all p elements after div

6. Simple object acquisition

$(" Element:first ") 'the first Element of a type of Element in an HTML page

$(" Element:last ") the last Element of a class of elements in an HTML page

$(" Element:not(selector) ") "removes all elements that match the given selector, such as $(" input:not(:checked)") to select all unchecked check boxes

$(" Element:even ") 'gets an even number of rows

$(" Element:odd ") 'gets the odd number of lines

$(" Element:eq(index) ") 'gets a given index value

$(" Element:gt(index)"

$(" Element:lt(index) ") 'gets all elements before the Element with the given index value


7. Acquisition of content objects and object visibility

$(" Element:contains(text)"

$(' Element:empty ') 'gets an Element that contains no child elements or text

$(" Element:partnt ") 'gets an Element that contains child elements or text

$(" Element:has(selector) ") "whether to contain an Element, such as: $(" p:has(span)") indicates all p elements that contain span elements

$(" Element:hidden ") 'selects all visible elements

$(" Element:visible ") 'select all invisible elements

8. Other object acquisition methods

$(" Element[id] ") 'all elements with an id attribute

$(" Element[attribute = youlika] "' gets all the elements with an attribute of youlika

$(" Element[attribute!= youlika] "" gets all elements with an attribute that is not a youlika

$(" Element[attribute ^= youlika] "" gets all elements whose attribute is not the beginning of youlika

$(" Element[attribute $= youlika] "" gets all elements whose attribute is not the end of youlika

$(" Element[attribute *= youlika] "' gets all the elements with the beginning of youlika in a certain attribute

$(" Element [selector1] [selector2] [...]. ") 'matches the attribute selector, such as $(" input[id][name][value=youlika] ") to get the input element with the id, name, and value being youlika.

9. Acquisition of child elements

$(" Element:nth-child(index) ") 'select the NTH Element below the parent level

$(" Element:nth-child(even) ") 'select the even number below the parent level

$(" Element:nth-child(odd) ") 'select the odd number below the parent level

$(" Element:nth-child(3n+1) ") 'expression

$(" Element:first-child ") 'selects the first child under the parent

$(" Element:last-child ") 'selects the last child under the parent

$(" Element: sole-child ") 'matches a unique child Element under the parent level, for example, dt is unique in the dl list, then dt is selected

10. Form object acquisition

$(:input)// finds all input elements, as well as drop-down lists, text fields, checkboxes, and so on.

$(:text)// matches all single-line text boxes

$(:password)// matches all password fields

$(:radio)// matches all radio buttons

$(:checkbox)// matches all check boxes

$(:submit)// matches all submit buttons

$(:image)// matches all image fields, e.g. < Input type = "image" / >

$(:reset)// matches all reset buttons

$(:button)// matches all the buttons

$(:file)// matches all file upload fields

$(:hidden)// matches all invisible elements or elements of type hidden

$(:enabled)// matches all available input elements, such as radio:enabled, which matches all available radio buttons

$(:disabled)// matches all the unavailable input elements

$(:checked)// matches all checked box elements

$(:selected)// matches all drop-down lists

11. Setting and removing element attributes

$(" Element "). Attr (name) 'in the first match of attribute values, such as $(" img "). Attr (" SRC ")

$(" Element ".attr(key,value)

$(" Element ". Attr ({key: value, key1: value,... .})) 'set multiple attributes for an element at once

$(" Element ").attr(key,function) 'sets a computed attribute value for all matched elements.

$(" Element "). RemoveAttr (name)// removes an attribute

Related articles: