Basic jQuery operations for various elements tutorial _ jquery-js tutorial

This article mainly introduces jQuery's basic operations for various elements, including basic operations of jQuery, selection of elements to be operated, and processing of DOM elements. It is an essential basic skill for in-depth learning about jQuery, for more information about jQuery operations on elements, see the following example. It has good reference value for jQuery learning. Share it with you for your reference. The specific analysis is as follows:

1. Basics

Jquery object set:

$ (): Jquery object set

Obtain the elements in the jquery object set:

Use indexes to retrieve javascript elements in the wrapper:

var temp = $('img[alt]')[0]

Use the get method of jquery to obtain the javascript elements 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+button').toArray()

All button elements at the same level after the label are converted into javascript arrays.

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 () to obtain the 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 the elements in the jquery object set:

var allIds = $('p').map(function(){ return (this.id==undefined) ? null : this.id;}).get();

The above example can be converted to a javascript Array Through the get method.

Traverse the elements in the 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 elements of the same level before prevTntl () until the target element </p> <p> other methods to obtain the jquery object set: <Br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ (this ). find (p span) </pre> </p> <p> determine whether a jquery object set is used: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;"> var hasImg = $ ('*'). is ('img '); </pre> </p> <p> jquery method: <br/> $ (). hide () <br/> $ (). addClass ('') <br/> values ().html ('') <br/> $ ('A '). size () element quantity </p> <p> jquery selector: <br/> $ ('P: even') <br/> $ ('tr: nth-child (1) ') <br/> $ ('body> p') direct child element <br/> $ ('a [href = $ = 'Pdf ']') Select <br/> $ (p: has (a) filter </p> <p> jquery function: <br/> $. trim () <br/> jquery execution time: <br/> $ (document ). ready (function () {}); <br/>$ (function () {}); </p> <p> Create a DOM element: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('<p> </p> '). insertAfter (); $ ('', {src:'', alt: '', title:'', click: function(curter }}).css ({cursor: 'pointer ', border: '', padding:'', backgroundColor: 'white '}). append (''); </pre> </p> <p> j Query Extension: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$. fn. disable = function () {return this. each (function () {if (this. disabled! = Null) this. disabled = true ;}};$ (''). disable (); </pre> </p> <p> jquery test element: <br/> if (item )() {} else {} loose test <br/> if (item! = Null) Recommended test, distinguish null from undefined </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/> according to the attribute name: <br/> $ (a [href ^ = 'HTTP: // '])... <br/> begin (href00000000''')... end <br/> $ (form [method]) form containing the method attribute <br/> $ (intput [type = 'text']) <br/> $ (Intput [name! = '']) <Br/> $ (href * = 'some') contains </p> <p> the first element after an element: $ (E + F) F is matched, and F is the first element after E </p> <p> An element after an element: $ (E ~ F) matches F, and F is an element after E. </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) there is no ul for Brother li <br/> $ (ul: nth-child (even) the even number of rows in the list of li, and the odd is the counting row li <br/> $ (Ul: nth-child (5n + 1) List is divided by more than 5 li </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 the animation state <br/> $ (input: button) includes Input of the type "button", "reset", and "submit" <br/> $ (input: checkbox) equivalent to $ (input [type = checkbox]) <br/> $ (span: contains (food) span containing text food <br/> $ (input: disabled) disable <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 the input, select, textarea, And button elements <br/> $ (tr: parent) <br/> $ (input: password) equivalent to $ (input [type = password]) <br/> $ (input: radio) equivalent to $ (input [type = radio]) <br/> $ (input: reset) is equivalent to $ (input [type = reset]) or $ (button [type = reset]) <br/> $ ('. clssname: selecte D') <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> <p> 3. Process DOM elements </p> <p> operation element attributes: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('*'). each (function (n) {this. id = this. tagName + n ;}) </pre> </p> <p> obtain the attribute value: </p> <p class = "jb51code"> <pre class = "brush: js; "> $ (''). attr (''); </pre> </p> <p> set the attribute value: <br/> </p> <p class =" jb51code "> <Pre class = "brush: js;" >$ ('*'). attr ('title', function (index, previusvalue) {return previusvalue + 'I am element' + index + 'and my name is' + this. id;}) // set the value for an attribute $ ('input '). attr ({value: '', title:''}); // set values for multiple attributes </pre> </p> <p> Delete attributes: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('P '). removeAttr ('value'); </pre> </p> <p> enable all links in a new window: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;"> $ (' A [href ^ = "http: //"] '). attr ('target', "_ blank"); </pre> </p> <p> avoid multiple forms: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ("form "). submit (function () {$ (": submit", this ). attr ("disabled", "disabled") ;}) </pre> </p> <p> Add a Class Name: </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('# id '). addClass ('') </pre> </p> <p> Delete class Name: </p> <p class =" jb51code "> <pre class =" brush: js; "> $ ('# id '). removeClass ('') </pre> </p> <p> switch Class Name: </p> <p cl Ass = "jb51code"> <pre class = "brush: js;" >$ ('# id '). toggleClass ('') </pre> </p> <p> delete a class name if it exists. If it does not exist, add a class name. <br/> check whether the class name is included: </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('P: first '). hasClass ('') $ ('P: first '). is ('') </pre> </p> <p> returns the list of class names in array format: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$. fn. getClassNames = function () {var name = this. attr ('someclsssname'); if (name! = Null) {return name. split ("") ;}else {return [] ;}</pre> </p> <p> set the style: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;"> Functions ('p.someclassname'+.css (function (index, currentWidth) {return currentWidth + 20;{{}('p'}.css ({cursor: 'pointer ', border: '1px solid Black', padding: '12px 12px 20px 20x', bacgroundColor: 'White '}); </pre> </p> <p> dimensions: <br/> $ (p ). width (500) <br/> $ ('P '). height () <br/> $ ('P '). innerHeight () <br/> $ ('P '). innerWidth () <br/> $ ('P '). outerHeight (true) <br/> $ ('P '). outerWidth (false) <br/> 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/> related elements: <br/> ('p'{.html () <br/> ('p'{.html ('') <br/> $ ('P '). text () <br/> $ (' P '). text ('') </p> <p> Append content <br/> append an html segment at the end of the element: </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('P '). append ('<B> some text </B>'); </pre> </p> <p> existing elements in the dom at the end of the element: </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('P '). append ($ (. someclassname) </pre> </p> <p> append at the beginning of the element: </p> <p class = "jb51code"> <pre class = "brush: js; "> $ (" p "). prepend () </pre> </p> <p> append before the element: </p> <p class = "jb51code"> <pre class = "brush: js; ">$ (" span "). Before () </pre> </p> <p> append after an element: </p> <p class = "jb51code"> <pre class = "brush: js; ">$ (" span ") after () </pre> </p> <p> append the content to the end: </p> <p class = "jb51code"> <pre class = "brush: js;"> appendTo (targets) </pre> </p> <p> Append content to the beginning: </p> <p class = "jb51code"> <pre class = "brush: js; "> prependTo (targets) </pre> </p> <p> append the content to the front of the element: </p> <p class = "jb51code"> <pre class = "brush: js;"> insertBefore (targets) </pre> </p> <p> append the content to the end of the element: </p> <p class = "jb5 1 code "> <pre class =" brush: js; ">$ ('<p> </p> '). insertAfter ('P img '); </pre> </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 () </p> <p> Delete element: <br/> $ ('. classname '). remove () deletes an element. Events and data bound to the element are also deleted <br/> $ ('. classname '). detach () Delete the element, but retain the event and data <br/> $ ('. classname '). empty () does not delete elements, but clears the elements </p> <p> copy elements: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('img '). clone (). appendTo ('p. someclassname') </pre> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('ul '). clone (). insertBefore ('# id') </pre> </p> <p> replace element: <br/> </p> <p class = "jb51code"> <pre class = "brush: js; "> $ ('img [alt] '). each (function () {$ (this ). replaceWith (''+ $ (this ). Attr ('alt') + '');}) $ (" p "). replaceAll ("<B> </B>") </pre> </p> <p> values of form elements: <br/> </p> <p class = "jb51code"> <pre class = "brush: js;" >$ ('[name = "radioGroup"]: checked '). val () gets the value of the single-choice button. If no value is selected, undefinedvar checkboxValues =es ('[name = "checkboxGroup"]: checked') is returned '). map (function () {return $ (this ). val ();}). toArray (); // obtain the value of the Multi-choice box </pre> </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 </p> <p> I believe this article provides some reference for jQuery programming.