jquery Basic Knowledge Summary _jquery

1. Basic

jquery Object Set:
$ (): JQuery object Collection

Gets the elements in the jquery object set:

Using the index to get 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] '). Getting (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 '). All sibling button elements after ToArray () 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 () Indexing of an img in a sibling element

Add more jquery object sets to the JQuery object set:
Using 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] ')

Converting elements in a jquery object set
var allids = $ (' div '). Map (function () {
Return (this.id==undefined)? Null:this.id;
). get (); Convert to JavaScript array by get method

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

   Use the relationships between elements to get the jquery object Set
   $ (this). Closest (' div ') such as the trigger button in which div occurs
    $ (This). Siblings (' button[title= "close"]) all sibling elements, not including itself
   $ (this). Children ('. Someclassname ') All child node elements, does not contain duplicate child nodes
   $ (this). Closest (') near ancestor element
   $ (this). Contents () A set of jquery objects consisting of element content, such as the <iframe> element content
   $ (this). Next ('. Someclassname ') The next sibling element
   $ (this). Nextall () is followed by all sibling elements
   $ (this). Nextuntil ('. Someclassname ') until the target element
   $ (this) is encountered. offsetparent () The most recent parental element from the jquery object set
    $ (This). Parent ()
   $ (this). Parents () All parent elements
   $ (this). Parrentsuntil () All the parent elements until the target parent element
   $ (this). Prev () previous sibling element
   $ (this). Prevall () All sibling elements before all sibling elements
   $ (this). Prevtntl () until the target element

Other ways to get a 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 line Li
$ (LI:EQ (n)) nth element, index starting from 0
$ (LI:GT (n)) element after nth element, index starting from 0
$ (LI:LT (n)) element before nth element, index starting from 0
$ (ul:first-child) The first Li in the list
$ (Ul:last-child) The last Li in the list
$ (Ul:nth-child (n)) the nth Li in the list
$ (ul:only-child) without the brother Li's ul
$ (Ul:nth-child (even)) List of even rows li,odd to count rows Li
$ (Ul:nth-child (5n+1)) in the list by 5 except 1 of 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 is ' + this.id;
}) sets a value for a property
$ (' input '). attr ({
Value: ',
Title: "
}); Set values 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 (') exists to delete the class name and 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 + 20;
});
$ (' 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
Appends a html:$ (' P ') to the end of the element. Append (' <b>some text</b> ');
The existing element in the DOM at the end of the element: $ (' P '). Append ($ (a.someclassname))
Append at the beginning of the element: $ ("P"). Prepend ()
Append in front of the element: $ ("span"). Before ()
Append after element: $ ("span") after ()
Append content to the end: appendto (Targets)
Append 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 if one is not selected
var checkboxvalues = $ (' [name= ' CheckboxGroup ']:checked '). Map (function () {
return $ (this). Val ();
}). ToArray (); Get the value of a multiple-selection box

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