jquery-Related Basics

Native JavaScript and jquery methods cannot be mixed at the same time


1. Operation Properties
attr: $ (' xxx '). attr (' attribute ')///A parameter is get property
$ (' xxx '). attr (' Properties ', ' xxx ')//two parameters is set property
Filter: $ (' XXX '). Filter (' xx ')//filter, filter
$ (' XXX '). Filter (' [title=xx] ')
Not: $ (' XXX '). "Not (' xx ')//filter antonyms, elements that do not contain the XX attribute

Has: $ (' XXX '). have (' xx ')//xxx inside the element contains an XX element, if it is included, the element is included in the result. If it is not included, then exclude it.
<div id= ' xxx ' ><span id= ' xx ' ></span></div>

The Find://find () method is to get the descendants of each element in the current result set. The filter conditions are preserved, and the descendants are preserved.
Unlike has (), the has () method, in which the parameter is only used as a condition, conforms to the condition, and its former element joins the new result set instead of the descendants to the new result set.

Next://Next sibling node
Prev://previous sibling node

Index: $ (' XXX '). Index ()//position in all sibling nodes where the current element is located;

AddClass: $ (' XXX '). addclass (' xx xx '); Add Class Xx,xx;
Removeclass: $ (' XXX '). Removeclass (' XX '); Remove class;

Width/height: $ (' XXX '). Width ()//width
Innerwidth/innerheight: $ (' XXX '). Innerwidth ()//width+padding
Outerwidth/outerheight: $ (' XXX '). Outerwidth ()//width+padding+border
Outerwidth/outerheight: $ (' XXX '). Outerwidth (True)//width+padding+border+margin


2.DOM operation

InsertBefore: $ (' B '). Insetbefor ($ (' a ')); Cut B to the front of a
Inserafter: $ (' B '). Insetbefor ($ (' a ')); Cut B to the back of a

AppendTo: $ (' Fuji '). AppendTo ($ (' Ziji ')); Insert Ziji at the end of the Fuji;
Prependto: $ (' Fuji '). Prependto ($ (' Ziji ')); Start inserting the Ziji in the Fuji;

Before,after,append,prepend: $ (' B '). befor ($ (' a ')); The front of B is a = cut A to front B;

Remove: $ (' a '). Remove (); Remove A;

Scrolltop/scrollleft: longitudinal/transverse scroll bar distance

Offset (): offset (). Left; element distance from the left side of the screen, ignoring the parent;
Position:position (). Left; To the left value of the parent that has the location, the current element is transformed into a similar position;

OffsetParent ()://Gets the parent with location
Parent://Get Parents
Parents: $ (' a '). Parents (' XXX ')//Get ancestor nodes, incoming parameters can be filtered
Closest://Gets the nearest specified ancestor node (including the current element itself) must pass in the parameter, only one element can be found
Siblings://Get sibling node, add parameter can be filtered;
Nextall/preall://below/Above all sibling nodes, add parameters can be filtered;
Parentsuntil/nextuntil/preuntil://Up to (parameter) screening;

Clone: $ (' a '). Clone (). AppendTo ....//Clone, if True is passed in clone, its method is cloned;
Wrap: $ (' a '). Wrap (' <div> ')//wrap a div outside A;
wrapall:$ (' a '). Wrapall (' <div> ')//a DIV is wrapped outside all A; Change the DOM node mode, note
Wrapinner: $ (' a '). Wrapinner (' <div> ')//wrap a div inside all A;
Unwrap: $ (' a '). Unwrap ()//method to delete the parent element of the selected element

Add:var a=$ (' a '). Add (' B '); A also contains a A, B;
Slice://Split
Serialize/serializearray

3.event

Ev.pagex: Mouse coordinates//relative to document ClientX: relative to the viewable area
Ev.which: Key value//including mouse key value

Ev,preventdefault://block Default events
Ev.stoppropagation://block bubbling operation
return false://block default events and block bubbling operations

Delegate: $ (' ul '). Delegate (' Li ', ' click ', Function () {})
Adding events to Li using the bubbling Principle; Name: event delegate
Advantages: Eliminate the loop operation, for the subsequent addition of elements in the same set, excellent performance;
Undelegate://block Event delegation;

Trigger: $ (' a '). On (' XXX ', fn1); $ (' a '). Trigger (' xxx ')//active triggering of XXX events;

On: $ (' a '). On (' event ', FN); $ (' a '). On ({' event ': fn1, ' Event2 ': fn2});
$ (' a '). On (' event ', {"XX": xx},fn (EV) {
Ev.date.XX//data is in JSON format;
Ev.target//Event source, who is operating
Ev.type//Event Type
});
Off: Cancel Event

Bind (TYPE,[DATA],FN) binds event handlers for specific events of each matching element
$ ("a"). Bind ("click", Function () {alert ("OK");});
Live (TYPE,[DATA],FN) attaches an event handler function to all matching elements, even if the element is added later in the
$ ("a"). Live ("Click", Function () {alert ("OK");});
Delegate (SELECTOR,[TYPE],[DATA],FN) The specified element (which belongs to the child element of the selected element) adds one or more event handlers and specifies the function to run when these events occur
$ ("#container"). Delegate ("A", "click", Function () {alert ("OK");})
On (EVENTS,[SELECTOR],[DATA],FN) an event handler that is bound to one or more events on the selection element

Difference:
. Bind () is directly bound on the element
. Live () is bound to an element by bubbling way. More appropriate for the list type, bound to the document DOM node. and. Bind () have the advantage of supporting dynamic data.
. Delegate () is a more precise, small-scale use of event proxies with better performance. Live ()
. On () is the latest 1.9 version of the new event binding mechanism that incorporates the previous three ways
4. Other

one:$ (' a '). One (' event ', FN); Only one event is triggered


Val: $ (' a '). val;  $ (' a '). val (XXX); Get value, change value
Size://Get length;
Each: $ (' a '). each (function (I,elem) {})//for in; Parameter 1: The following table; parameter 2: each element

Hover://mouse move in and out
Hide/show: $ (' a '). Hide (time); Hide/Show; add time will animate;
Fadein/fadeout: $ (' a '). FadeIn (time)//fade; default 400 ms; Parameter 2: Transparency
Slidedown/slideup: $ (' a '). Slidedown (time)//curl up/down


5. Basic expansion
Get: $ (' a '). Get (0). InnerHTML; So that JQ and JS can be mixed use, get need to specify the set of the first few use;
For (Var i=0;i<$ (' a '). Get (). length;i++) {}
For (Var i=0;i<$ (' a '). length;i++) {}//source also has the length property

Outerwidth://Can get to the width of the hidden element, native offsetwidth cannot get the hidden element width is high
Text://Get only textual content and not get tags

Detach://Same as the Remove method, but retains the behavior of deleting the element before it is deleted


6. Animations
Animate://Parameter 1: Values and properties of motion
Parameter 2: Time of movement
Parameter 3: Movement form: Swing (slow), linear (constant speed)
Parameter 4: callback function

Stop://block Current motion,
Parameter 1:true, block all movement;
Parameter 2:true, immediately let the current animation go straight;

Finish://stop immediately to all specified target points;

Delay://delayed;

7. Tool methods
$.type:js:typeof; More powerful than TypeOf, can judge more types;
$.trim:js: No Trim
$.inarray:var a=[' A ', ' B ', ' C ', ' d '];    $.inarray (' B ', a); Similar to IndexOf
$.proxy: $.proxy (fn1,xxxx)//change this point, the fn1 of this point to XXXX;
$.proxy (FN1,XXXX) (A, B)//A/b; will be executed immediately;
$.proxy (FN1,XXXX,A,B)//parameter a.b;

$.noconflict:var xxx=$.noconflict (); XXX can be used as $, for example: XXX (' a '). css ...;
$.parsejson; Convert to JSON;
$.makearray://class array to true array;

8.ajax
$.ajax ({
Url:xxxx,
Data:xxxxxx,
Type: ' Post/get ',
Success:function () {},
Error:function () {},.........
})

9. Expansion
$.extend: Extension Tool method Plug-in form $.xxx () $.yyy ();
$.extend ({
Lefttrim:function (str) {
Return Str.replace (/^\s+/, ");
}
});
$.fn.extend: Extended JQ object under Plug-in form $ (). XXX () $ (). YYY ();

jquery-Related Basics