jquery Basic Tutorials for various elements _jquery

The examples in this article describe jquery's actions for elements, including the underlying operations, the selection of elements to be manipulated, and the processing of DOM elements. The study of jquery has a good reference value. Share for everyone to use for reference. The specific analysis is as follows:

1. Basic

jquery Object Set:

$ (): JQuery object Collection

Gets the elements in the jquery object set:

Use the index to get the JavaScript elements in the wrapper:

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

Obtain JavaScript elements in the jquery object set using the Get method of jquery:

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

Get the jquery object elements in the jquery object set using the "EQ" Method of jquery:

$ (' img[alt] '). EQ (0)
$ (' img[alt] ').
$ (' img[alt] '). Last ()

The jquery object set is converted to a JavaScript array:

var arr = $ (' Label+button '). ToArray ()

All sibling button elements after label, converted to JavaScript array

Index of 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 the previous line cannot find return-1
var n = $ (' img '). Index () get IMG indexes in sibling elements

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] ')

Take different approaches to different jquery object concentrations:

$ (' img[alt] '). addclass (' Thickborder '). Add (' img[title] '). addclass (');

To add a newly created element to a jquery object set:

$ (' P '). Add (' <div></div> ');

To delete an element in a jquery object set:

$ (' img[title] '). Not (' [Title*=pu] ')
$ (' img '). Not (function () {return!$ (this). Hasclass (' Someclassname ')})

Filtering jquery Object sets:
$ (' TD '). Filter (function () {return This.innerHTML.match (^\d+$)}) filters for TD containing numbers

Get a subset of the jquery object set

$ (' * '). Slice (0,4) A new set of JQuery objects containing the first 4 elements
$ (' * '). Slice (4) A new set of JQuery objects containing the first 4 elements
$ (' div '). has (' img[alt] ')

To convert elements in a jquery object set:

var allids = $ (' div '). Map (function () {return
 (this.id==undefined) null:this.id;
}). Get ();

The example above can be converted to a JavaScript array by a GET method.

Iterate through the elements of the jquery object set:

$ (' img '). each (function (n) {
 This.alt = ' This is the [' +n+ '] picture, the ID of the picture is ' + this.id;
} ')
$ ([1,2,3]). each (function () {alert (this);})

To get a set of jquery objects using relationships between elements:

$ (this). Closest (' div ') such as the trigger button in which div occurs
$ (this). Siblings (' button[title= "close"]) all sibling elements that do not contain themselves
$ (this). Children ('. Someclassname ') All child node elements that do not contain duplicate child nodes
$ (this). Closest (") near ancestor element
$ (This). Contents () A set of jquery objects consisting of element content, such as access to <iframe> element content
$ (this). Next ('. Someclassname ') Next sibling element
$ (this). All sibling elements after Nextall ()
$ (this). Nextuntil ('. Someclassname ') after all sibling elements until the target element is encountered
$ (this). offsetparent () The most recent parental element from the jquery object set
$ (this). Parent () Direct parents element
$ (this). Parents () all parent elements
$ (this). Parrentsuntil () All parent elements until the target parent element
$ (this). Prev () Previous sibling element
$ (this). All sibling elements prior to Prevall ()
$ (this). All sibling elements prior to PREVTNTL () until the target element

Other ways to get the set of jquery objects:

$ (this). Find (P span)

Determine if it is a set of jquery objects:

var hasimg = $ (' * '). Is (' img ');

jquery Method:

$ (). Hide ()
$ (). AddClass (")
$ (). HTML (')
$ (' a '). Number of size () elements

jquery selector:

$ (' P:even ')
$ (' Tr:nth-child (1) ')
$ (' body > div ') Direct child element
$ (' a[href=$= ' PDF ') selection based on attributes
$ (Div:has (a)) filtration

jquery function:

$.trim ()
jquery Execution Time:
$ (document). Ready (function () {});
$ (function () {});

To create a DOM element:

$ (' <p></p> '). InsertAfter ();
$ ('  ', {
 src: ',
 alt: ',
 title: ',
 click:function () {}
}}). css ({
 cursor: ' Pointer ',
 border: ',
 padding: ',
 backgroundcolor: ' White '
}. Append (");

jquery extension:

$.fn.disable = function () {return
 This.each (function () {
 if (this.disabled!= null) this.disabled = true;
 })
};
$ ('). disable ();

Does the jquery test element exist:

if (item) () {}else{} loose test
if (item!= NULL) recommended test, can distinguish between null and undefined

2, select the elements to be manipulated

By label name: $ (' a ')
According to id:$ (' #id ')
According to class name: $ ('. Someclassname ')
Satisfies multiple conditions: $ (' A#id.someclassname ') or $ (' Div,span ')
All child nodes of an element: $ (P a.someclassname)
Direct child nodes of an element: $ (Ul.mylist > Li)
According to the property name:
$ (a[href^= ' http://']) to ... Beginning
$ (href$= '. pdf ') to ... End
$ (Form[method]) contains the form of the method property
$ (intput[type= ' text '])
$ (intput[name!= '])
$ (href*= ' some ') contains

The first element after an element: $ (e+f) matches the f,f is the first element following E

One element after an element: $ (e~f) matches the f,f is an element after E

Through Location:

$ (li:first) first Li
$ (li:last) Last Li
$ (li:even) even line Li
$ (li:odd) odd-numbered line Li
$ (li:eq (n)) nth element, Index from 0
$ (LI:GT (n)) elements after n elements, index from 0 start
$ (LI:LT (n)) elements before the nth element, index starting from 0
$ (ul:first-child) List of the first Li
$ (ul: Last-child) The last Li
$ (ul:nth-child (n)) List of the nth Li
$ (ul:only-child) has no brother Li's ul
$ (ul:nth-child (even)) Even-numbered rows in the list are li,odd for the count line Li
$ (ul:nth-child (5n+1)) List of 5 except 1 Li

Through the filter:

$ (Input:not (: checkbox))
$ (': Not (img[src*= "dog"])
$ (' Img:not ([src*= "Dog"])
$ (Div:has (span))
$ (' Tr:has (img[src$= "Pu.png"])
$ (tr:animated) TR in animation state
$ (Input:button) includes input of type Button,reset,submit
$ (Input:checkbox) equivalent to $ (Input[type=checkbox])
$ (span:contains (food)) contains span of literal food
$ (input:disabled) disabled
$ (input:enabled) enabled
$ (Input:file) equivalent to $ (input[type=file])
$ (: header) H1 to H6
$ (Input:hidden)
$ (Input:image) equivalent to $ (input[type=image])
$ (: Input) includes input, select, TextArea, Button element
$ (tr:parent)
$ (Input:password) equivalent to $ (Input[type=password])
$ (Input:radio) equivalent to $ (Input[type=radio])
$ (Input:reset) equivalent to $ (Input[type=reset]) or $ (Button[type=reset])
$ ('. clssname:selected ')
$ (Input:submit) equivalent to $ (Input[type=submit]) or $ (Button[type=submit])
$ (Input:text) equivalent to $ (Input[type=text])
$ (div:visible)

3. Dealing with DOM elements

Attributes of the action element:

$ (' * '). each (function (n) {
 this.id = This.tagname + N;
})

Get property value:

$ ('). attr (');

Set Property values:

$ (' * '). attr (' title ', Function (index, previousvalue) {return
 Previousvalue + ' I am element ' + index + ' and my name I s ' + this.id;
}) Set a value of
$ (' input ') for a property. attr ({
 value: ',
 title: '
});//Set value for multiple properties

To delete an attribute:

$ (' P '). Removeattr (' value ');

To have all the links open in a new window:

$ (' a[href^= "http://"]). attr (' target ', ' _blank ');

Avoid multiple submissions of forms:

$ ("form"). Submit (function () {
 $ (": Submit", this). attr ("Disabled", "disabled");
})

Add Class Name:

$ (' #id '). addclass (')

Delete class Name:

$ (' #id '). Removeclass (')

Toggle Class Name:

$ (' #id '). Toggleclass (')

Delete the class name if it exists, add the class name if it does not exist
Determine if the class name is included:

$ (' P:first '). Hasclass (') $ (' P:first '). Is (')

Returns the list of class names as an array:

$.fn.getclassnames = function () {
 var name = this.attr (' someclsssname ');
 if (name!= null) {return
 name.split ("");
 }
 else
 {return
 [];
 }
}

To set a style:

$ (' Div.someclassname '). CSS (function (index, currentwidth) {return
 currentwidth +;
});
$ (' div '). css ({
 cursor: ' pointer ',
 border: ' 1px solid black ',
 padding: ' 12px 12px 20px 20x '),
 Bacgroundcolor: ' White '
});

About Dimensions:

$ (div). Width (500)
$ (' div '). Height ()
$ (' div '). Innerheight ()
$ (' div '). Innerwidth ()
$ (' div '). Outerheight (True)
$ (' div '). Outerwidth (False)

About positioning:

$ (' P '). Offset () relative to the document reference position
$ (' P '). Position () offset the relative position of the parent element
$ (' P '). ScrollLeft () offset value of the horizontal scroll bar
$ (' P '). ScrollLeft (value)
$ (' P '). ScrollTop ()
$ (' P '). ScrollTop (value)

About element content:

$ (' P '). HTML ()
$ (' P '). HTML (')
$ (' P '). Text ()
$ (' P '). Text (')

Append content

Append a section of HTML to the end of the element:

$ (' P '). Append (' <b>some text</b> ');

Existing elements in the DOM at the end of the element:

$ (' P '). Append ($ (a.someclassname))

Append at the beginning of the element:

$ ("P"). Prepend ()

Append to the front of the element:

$ ("span"). Before ()

Append to the following element:

$ ("span") after ()

Append the content to the end:

Appendto (Targets)

Append the content to the beginning:

Prependto (Targets)

Append content to front of element:

InsertBefore (Targets)

Append the content to the element:

$ (' <p></p> '). InsertAfter (' P img ');

Parcel element:

$ (' a.someclassname '). Wrap ("<div class= ' hello ' ></div>")
$ (' a.someclassname '). Wrap ($ ("Div:first") [0])
$ (' A.someclassname '). Wrapall ()
$ (' A.someclassname '). Wrapinner ()
$ (' a.someclassname '). Unwrap ()

To delete an element:

$ ('. ClassName '). Remove () Deletes the element, and the events and data bound to the element are also deleted
$ ('. ClassName '). Detach () Delete elements, but preserve events and data
$ ('. ClassName '). Empty () Do not delete elements, but empty element contents

To copy an element:

$ (' img '). Clone (). Appendto (' P.someclassname ')

$ (' ul '). Clone (). InsertBefore (' #id ')

Replace element:

$ (' img[alt] '). each (function () {
 $ (this). ReplaceWith (' <span> ' + $ (this). attr (' alt ') + ' </span> ');
})
$ ("P"). ReplaceAll ("<b></b>")

About the value of a FORM element:

$ (' [name= ' Radiogroup ']:checked '). Val () Gets the value of the radio button, and returns undefined
var checkboxvalues = $ (' [name= ') If no one is selected CheckboxGroup "]:checked"). Map (function () {return
 $ (this). Val ();
}). ToArray (); Get the value of a multiple-selection box

For <select id= "list" multiple= "multiple" > Use $ (' #list '). Val () returns an array of values
$ (' input '). val ([' One ', ' two ', ' three ']) if a radio box or check box matches an element in an array, the selected state

It is believed that this article has certain reference value to the jquery program design of everybody.