JQuery basics _ jquery-js tutorial

This article mainly summarizes jQuery basics, selects elements to be operated, and processes DOM elements. It is very detailed and recommended to those who need it. 1. Basics

Jquery object set:
$ (): Jquery object set

Obtain the elements in the jquery object set:

Use the index to obtain the javascript element in the wrapper: var temp = $ ('img [alt] ') [0]

Use the get method of jquery to obtain the javascript element in the jquery object set: var temp = $ ('img [alt] '). get (0)

Use the jquery eq method to obtain jquery object elements in the jquery object set:
$ ('Img [alt] '). eq (0)
$ ('Img [alt] '). first ()
$ ('Img [alt] '). last ()

Convert a jquery object set to a javascript array:
Var arr = $ ('label + click'). toArray () label is followed by all button elements of the same level and converted to a javascript array.

Index of the jquery object set:
Var n = $ ('img '). index ($ ('img # id') [0]) Note: The index () parameter is a javascript element.
Var n = $ ('img '). index ('img # id') is equivalent to returning-1 if the previous row cannot be found.
Var n = $ ('img '). index () img index in the same level element

Add more jquery object sets to the jquery object set:
Use commas: $ ('img [alt], img [title] ')
Use the add method: $ ('img [alt] '). add ('img [title]')

Different methods are used for different jquery objects:
$ ('Img [alt] '). addClass ('thickborder'). add ('img [title]'). addClass ('');

Add new elements to the jquery object set:
$ ('P'). add ('

');

Delete the elements in the jquery object set:
$ ('Img [title] '). not (' [title * = pu] ')
$ ('Img '). not (function () {return! $ (This). hasClass ('someclassname ')})
Filter jquery object sets:
$ ('Td '). filter (function () {return this. innerHTML. match (^ \ d + $)}) filter td containing numbers

Get a subset of jquery object sets
$ ('*'). Slice () contains the first four elements of the new jquery object set
$ ('*'). Slice (4) New jquery object set containing the first four elements
$ ('P'). has ('img [alt] ')

Convert elements in a jquery object set
Var allIds = $ ('P'). map (function (){
Return (this. id = undefined )? Null: this. id;
}). Get (); convert to a javascript Array Using the get Method

Traverse elements in a jquery object set
$ ('Img '). each (function (n ){
This. alt = 'this is the ['+ n +'] image. The image id is '+ this. id;
})
$ ([1, 2, 3]). each (function () {alert (this );})

Get the jquery object set using the relationship between elements
$ (This). closest ('P'), for example, in which p is the trigger button
$ (This). siblings ('button [title = "Close"] ') All same-level elements, excluding
$ (This). children ('. someclassname') All child node elements, excluding repeated child nodes
$ (This). closest ('') near the ancestor Element
$ (This). contents () is a jquery object set composed of element content. For example, you can obtainElement content <br/> $ (this ). next ('. someclassname') next sibling element <br/> $ (this ). all peer elements after nextAll () <br/> $ (this ). nextUntil ('. all peer elements after someclassname') until the target element is met <br/> $ (this ). offsetParent () parent element closest to the jquery object set <br/> $ (this ). parent () direct parent element <br/> $ (this ). all parent elements of parents () <br/> $ (this ). parrentsUntil () All parent elements until the target parent element <br/> $ (this ). element of the same level on prev () <br/> $ (this ). all sibling elements before prevAll () <br/> $ (this ). all sibling elements before prevTntl () until the target element <br/> </p> <p> Other methods for getting jquery object sets <br/> $ (this ). find (p span) <br/> </p> <p> determine whether it is a jquery object set <br/> var hasImg = $ ('*'). is ('img '); <br/> </p> <p> jquery method: <br/> $ (). hide () <br/> $ (). addClass ('') <br/> values ().html ('') <br/> $ ('A '). size () element quantity <br/> </p> <p> jquery selector: <br/> $ ('P: even') <br/> $ ('tr: nth-child (1) ') <br/> $ ('body> p ') direct sub-element <br/> $ ('a [href = $ = 'pdf ']') Select Based on attributes <br/> $ (p: has ()) filter <br/> </p> <p> jquery function: <br/> $. tri M () <br/> </p> <p> jquery execution time: <br/> $ (document ). ready (function () {}); <br/>$ (function () {}); <br/> </p> <p> Create a DOM element: <br/> $ ('<p> </p> '). insertAfter (); <br/> $ ('', {<br/> src:'', <br/> alt: '', <br/> title: '', <br/> click: function () {}< br/> character bar .css ({<br/> cursor: 'pointer ', <br/> border :'', <br/> padding: '', <br/> backgroundColor: 'white' <br/> }). append (''); <br/> jquery Extension: <br/> $. fn. disable = funct Ion () {<br/> return this. each (function () {<br/> if (this. disabled! = Null) this. disabled = true; <br/>}) <br/>}; <br/>$ (''). disable (); <br/> </p> <p> jquery test element: <br/> if (item )() {} else {} loose test <br/> if (item! = Null) Recommended test, distinguish null from undefined <br/> </p> <strong> 2. Select the element to be operated </strong> </p> <p> Based on the tag name: $ ('A') <br/> by id: $ ('# id') <br/> by Class Name: $ ('. someclassname') <br/> multiple conditions are met: $ ('a # id. someclassname ') or $ ('P, span') <br/> All subnodes of an element: $ (p. someclassname) <br/> direct subnode of an element: $ (ul. myList> li) <br/> </p> <p> Based on the attribute name: <br/> $ (a [href ^ = 'HTTP: // ']) to... <br/> begin (href00000000''')... end <br/> $ (form [method]) form containing the method attribute <br/> $ (int Put [type = 'text']) <br/> $ (intput [name! = '']) <Br/> $ (href * = 'some') contains <br/> </p> <p> the first element after an element: $ (E + F) matches F, and F is the first element after E <br/> </p> <p> An element after an element: $ (E ~ F) matches F, and F is an element after E. <br/> </p> <p> position: <br/> $ (li: first) the first li <br/> $ (li: last) The last li <br/> $ (li: even) an even number of rows li <br/> $ (li: odd) odd line li <br/> $ (li: eq (n) nth element, index starting from 0 <br/> $ (li: gt (n )) element after the nth element, the index starts from 0 <br/> $ (li: lt (n) element before the nth element, index starts from 0 <br/> $ (ul: first-child) The first li in the list <br/> $ (ul: last-child) the last li in the list <br/> $ (ul: nth-child (n) the nth li in the list <br/> $ (ul: only-child) the even number of lines in the ul <br/> $ (ul: nth-child (even) list without brother li: Counting row li <br/> $ (ul: nth-child (5n + 1 )) li in the list divided by more than 5 <br/> </p> <p> filter: <br/> $ (input: not (: checkbox )) <br/> $ (': not (img [src * = "dog"])') <br/> $ ('img: not ([src * = "dog"]) ') <br/> $ (p: has (span) <br/> $ ('tr: has (img [src $ = "pu.png"]) ') <br/> $ (tr: animated) tr in animation state <br/> $ (input: button) the Input values of the type buttons, reset, and submit <br/> $ (input: checkbox) are equivalent to $ (input [type = checkbox]) <br/> $ (span: contains (food) span containing text food <B R/> $ (input: disabled) disabled <br/> $ (input: enabled) enabled <br/> $ (input: file) equivalent to $ (input [type = file]) <br/> $ (: header) h1 to h6 <br/> $ (input: hidden) <br/> $ (input: image) is equivalent to $ (input [type = image]) <br/> $ (: input) includes input, select, textarea, button element <br/> $ (tr: parent) <br/> $ (input: password) equivalent to $ (input [type = password]) <br/> $ (input: radio) is equivalent to $ (input [type = radio]) <br/> $ (input: reset) equivalent to $ (input [type = reset]) or $ (button [typ E = reset]) <br/> $ ('. clssname: selected') <br/> $ (input: submit) is equivalent to $ (input [type = submit]) or $ (button [type = submit]) <br/> $ (input: text) is equivalent to $ (input [type = text]) <br/> $ (p: visible) </p> <strong> 3. Processing DOM elements </strong> </p> <p> operation element attributes: <br/> </p> <p> $ ('*'). each (function (n) {<br/> this. id = this. tagName + n; <br/>}) <br/> </p> <p> Get attribute value: $ (''). attr (''); <br/> </p> <p> set the attribute value: <br/> </p> <p> $ ('*'). attr ('title', function (I Ndex, previusvalue) {<br/> return previusvalue + 'I am element' + index + 'and my name is' + this. id; <br/>}) is a property setting value <br/> $ ('input '). attr ({<br/> value: '', <br/> title:'' <br/> }); set multiple attribute values <br/> </p> <p> Delete attribute: <br/> </p> <p >$ ('P '). removeAttr ('value'); <br/> open all links in a new window: <br/> $ ('a [href ^ = "http: // "] '). attr ('target', "_ blank"); <br/> </p> <p> avoid multiple forms: <br/> $ ("form "). submit (function () {<br/> $ (": Submit", this ). attr ("disabled", "disabled"); <br/>}) <br/> </p> <p> Add Class Name: $ ('# id '). addClass ('') <br/> </p> <p> delete a class name: $ ('# id '). removeClass ('') <br/> </p> <p> switch Class Name: $ ('# id '). if toggleClass ('') exists, the class name is deleted. If it does not exist, the class name is added. <br/> </p> <p> determines whether the class name is included: $ ('P: first '). hasClass ('') $ ('P: first '). is ('') <br/> </p> <p> returns the list of class names in array format: <br/> $. fn. getClassNames = function () {<br/> var name = this. attr ('someclsssname'); <br/> if (name! = Null) {<br/> return name. split (""); <br/>}< br/> else <br/>{< br/> return []; <br/>}< br/> </p> <p> set the style: <br/> detail ('p.someclassname'detail .css (function (index, currentWidth) {<br/> return currentWidth + 20; <br/>}); <br/> comment ('p'character .css ({<br/> cursor: 'pointer ', <br/> border: '1px solid Black', <br/> padding: '12px 12px 20px 20x', <br/> bacgroundColor: 'white' <br/> }); <br/> </p> <p> dimension: <br/> $ (p ). width (500) <br/> $ ('P '). height () <br/> $ ('P '). innerHeight () <br/> $ ('P '). innerWidth () <br/> $ ('P '). outerHeight (true) <br/> $ ('P '). outerWidth (false) <br/> </p> <p> positioning: <br/> $ ('P '). offset () is relative to the reference position of the document <br/> $ ('P '). position () offset relative position of the parent element <br/> $ ('P '). offset Value of the scrollLeft () horizontal scroll bar <br/> $ ('P '). scrollLeft (value) <br/> $ ('P '). scrollTop () <br/> $ ('P '). scrollTop (value) <br/> </p> <p> related elements: <br/> comment ('p'{.html () <br/> comment ('p'{.html ('') <br/> $ ('P '). text () <br/> $ ('P '). text ('') <br/> </p> <p> Append content <br/> append an html at the end of the element: $ ('P '). append ('<B> some text </B>'); <br/> the existing dom element at the end of the element: $ ('P '). append ($ (. someclassname) <br/> append at the beginning of the element: $ ("p "). prepend () <br/> append before the element: $ ("span "). before () <br/> append the following element: $ ("span") after () <br/> append the content to the end: appendTo (targets) <br/> append the content to the beginning: prependTo (targets) <br/> append the content to the front of the element: insertBefore (targets) <br/> append the content to the end of the element: $ ('<p> </p> '). insertAfter ('P img '); <br/> </p> <p> package element: <br/> $ ('a. someclassname '). wrap ("<p class = 'hello'> </p>") <br/> $ ('a. someclassname '). wrap ($ ("p: first") [0]) <br/> $ ('a. someclassname '). wrapAll () <br/> $ ('a. someclassname '). wrapInner () <br/> $ ('a. someclassname '). unWrap () <br/> </p> <p> Delete element: <br/> $ ('. classname '). remove () deletes an element. Events and data bound to the element are also deleted <br/> $ ('. classname '). detach () deletes elements, but retains events and data <br/> $ ('. classname '). empty () does not delete the element, but clears the element content <br/> </p> <p> copy element: <br/>$ ('img '). clone (). appendTo ('p. someclassname') <br/> $ ('ul '). clone (). insertBefore ('# id') <br/> </p> <p> replacement element: <br/> $ ('img [alt]'). each (function () {<br/> $ (this ). replaceWith (''+ $ (this ). attr ('alt') + ''); <br/>}) <br/> $ (" p "). replaceAll ("<B> </B>") <br/> </p> <p> values of form elements: <br/> $ ('[name = "radioGroup"]: checked '). val () gets the value of the single-choice button. If no value is selected, undefined <br/> var checkboxValues =$ ('[name = "checkboxGroup"]: checked') is returned '). map (function () {<br/> return $ (this ). val (); <br/> }). toArray (); obtain the value of multiple selection boxes <br/> </p> <p> for <select id = "list" multiple = "multiple"> use $ ('# list '). array of values returned by val () <br/> $ ('input '). val (['one', 'two', 'three ']) if a single struct or check box matches an element in the array, the selected status