This article mainly introduces how Jquery obtains the setting and removal of objects and attributes of a specified tag. For more information about JQuery, see section 1, JQuery was first created by John Resig from America, and many JS experts joined the team. In fact, JQuery is a JavaScript class library. This class library integrates many functional methods. You can use some simple code to implement some complex JS effects.
2. JQuery implements code separation. You do not need to add events such as onclick to the webpage to call functions. You can directly introduce the JQuery class library and self-compiled JQuery code;
For example:
The Code is as follows:
$ (Function (){
$ ("Element"). click {
Function () {alert ("Click me! ");
}
}
});
In the above Code, the click after the Element is defined as an action.
Alert ("Click me !"); This is the code to be executed. Of course you can have a lot of operations in this function;
$ Indicates JQuery, which is used to reference the class library... I understand this;
3. Some core JQuery Methods
Each (callback) 'is like a loop
$ ("Element"). length; 'number of elements, which is an attribute
$ ("Element"). size (); 'is also the number of elements, but parentheses are a method.
$ ("Element"). get (); 'a set of elements on the page, stored in Arrays
$ ("Element"). get (index); 'has the same function as above. index indicates the first Element and the subscript of the array.
$ ("Element"). get (). reverse (); 'indicates the direction of the obtained array.
$ ("Element1"). index ($ ("Element2"); 'the index value of element 2 in element 1 is...
4. Basic Object acquisition
$ ("*") 'Indicates getting all objects
$ ("# Element") 'gets the same ID as the one in CSS.
$ (". Abc") 'all elements using the. abc Style
$ ("P") 'tag selector Selects all p elements
$ ("# A,. B, span") 'indicates the element whose ID is a, the element that uses Class B, and all span elements.
$ ("# A. B p") 'id is a and all p elements in the B style are used.
5. Hierarchical Element Acquisition
$("Element1 Element2 Element3 ....") 'Parent level followed by subset
$ ("P> p") 'gets all p elements under p
$ ("P + p") the first p element after the 'P Element
$ ("P ~ P ") All p elements after 'P
6. Simple Object acquisition
$ ("Element: first") the first Element of a certain Element in the HTML page
$ ("Element: last") the last Element of a certain Element in the HTML page
$ ("Element: not (selector)") 'removes all elements that match the given selector, for example: $ ("input: not (: checked )") indicates Selecting All unselected check boxes.
$ ("Element: even") 'returns an even number of rows.
$ ("Element: odd") 'returns an odd number of rows.
$ ("Element: eq (index)") 'gets a given index value
$ ("Element: gt (index)") All elements after obtaining the Element of the given index value
$ ("Element: lt (index)") All elements before obtaining the Element of the given index value
...
7. Get content objects and object visibility
$ ("Element: contains (text)") 'indicates whether the Element contains text content.
$ ('Element: empty ") 'obtains
$ ("Element: partnt") 'obtains
$ ("Element: has (selector)") 'indicates whether an Element exists. For example, $ ("p: has (span)") indicates all p elements containing the span Element.
$ ("Element: hidden") 'select all visible elements
$ ("Element: visible") 'select all invisible elements
8. Other Object acquisition methods
$ ("Element [id]") 'all elements with the ID attribute
$ ("Element [attribute = youlika]" 'obtains all elements whose attributes are youlika.
$ ("Element [attribute! = Youlika] "'gets all elements whose property is not youlika
$ ("Element [attribute ^ = youlika]" 'obtains all elements whose attributes start with not youlika.
$ ("Element [attribute $ = youlika]" 'obtains all elements whose attributes are not the end of youlika.
$ ("Element [attribute * = youlika]" 'obtains all elements whose attributes start with youlika.
$ ("Element [selector1] [selector2] [...] ") 'matches the attribute selector. For example, $ (" input [id] [name] [value = youlika] ") indicates that the input element with ID, Name, and value is youlika is obtained.
9. Obtain sub-elements
$ ("Element: nth-child (index)") 'selects the nth Element under the parent level.
$ ("Element: nth-child (even)") 'select an even number under the parent level
$ ("Element: nth-child (odd)") 'select the odd number under the parent level
$ ("Element: nth-child (3n + 1)") 'expression
$ ("Element: first-child") 'selects the first child Element under the parent level.
$ ("Element: last-child") 'selects the last child Element under the parent level.
$ ("Element: only-child") 'matches a unique child Element under the parent level. For example, if dt is unique in the dl list, dt is selected.
10. Get the form object
$ (: Input) // query all Input elements, including the drop-down list, text field, single-statement, and check box.
$ (: Text) // match all single-row text boxes
$ (: Password) // match all password boxes
$ (: Radio) // match all radio buttons
$ (: Checkbox) // match all check boxes
$ (: Submit) // match all the submit buttons
$ (: Image) // match all image domains, such
$ (: Reset) // match all reset buttons
$ (: Button) // match all buttons
$ (: File) // match all file upload Domains
$ (: Hidden) // matches all the invisible elements or elements whose type is hidden.
$ (: Enabled) // match all available input elements. For example, radio: enabled indicates matching all available single-choice buttons.
$ (: Disabled) // matches all the unavailable input elements, which act in the opposite way.
$ (: Checked) // match all checked check box Elements
$ (: Selected) // match all the drop-down lists
11. Setting and removing element attributes
$ ("Element"). attr (name) 'gets the first matching property value, for example $ ("img"). attr ("src ")
$ ("Element". attr (key, value) ") 'specifies the attribute of an Element.
$ ("Element". attr ({key: value, key1: value ,....})) 'Set multiple attributes for an element at a time
$ ("Element"). attr (key, function) 'sets a calculated attribute value for all matching elements.
$ ("Element"). removeAttr (name) // remove an attribute
