The basic chapter of jquery

jquery Trigger Events:
1.blur (triggers when focus is left)
2.focus (get focus direct trigger)
3.change (the contents of the form are changed and triggered after the cursor leaves)
4.click (Click event)
5.dblclick (double-click event)
6.error (triggering an event after an error occurs)
7.focusin (when the element is detected and its child elements get focus, the child element can be detected on the parent element for the focus)
8.focusout (a condition in which a child element loses focus can be detected on the parent element if the element is detected and its child element loses focus)
9.keydown (triggered when press the button is not lifted)
10.keyup (triggered when the key is pressed and lifted)
11.keypress (Press the button to lift the trigger)
Event firing Sequence is 9.11.10

12.load event (triggered when option load is complete)
13.mousemove (triggered when the mouse is moved by the option)
14.mousedown (triggered when the mouse is pressed)
15.mouseup (triggered when mouse is lifted)
16.mouseover (always triggered when mouse hovers until left) MouseEnter
17.mouseout (triggered when the mouse is away) MouseLeave
Add: E.pagex and E.pagey mouse horizontal ordinate, general and mouseover with the use of

18.resize (Window event, triggered when the size of the Windows changes)
19.select (when content is selected)

Block event bubbling can return a false after adding an event or use the E.stoppropagation event to block time bubbling.
Cancel Default event: E.preventdefault

Binding and unblocking events
1.bind binding event, two parameters: ① event Type ② triggered function
2.unbind de-event (disassociate event of the same type, parameter is event type)
3.trigger binding Event (parameter is event name)
Bind multiple Events: The event type can be separated by a space, but this method can only share one event handler function.
The second method is that the event and handler functions can be separated by a colon (object form), and each event can have a different handler function
. Bind ({
Click:function () {
Console.log ("click!");
},
Dblclick:function () {
Console.log ("dblckick!");
}
});

Bind an event with one: Trigger only once

Use Triggerhandler to bind event type, refresh page automatically trigger once

Live bind event: The Bind-bound event is not valid on the new element, and the event that is bound to live is on the new element.

With toggle binding event, you can declare a number of functions inside, each Click to trigger the 1234th ... a function
$ ("Ele"). Toggle (
function () {
Consolo.log (1);
},
function () {
Consolo.log (2);
},
function () {
Consolo.log (3);
}
);

Hide Show Toggle Slideup slidedown slidetoggle fadeIn fadeOut fadetoggle Fadeto There are three parameters: the first is speed, the second is transparency, and the third is a callback function
Animate (named Property with small hump in object body), animate 4 parameters are ① animation ② animation duration ③ Animation type ④ callback function
Some property names can also be represented by toggle, such as height, opacity, and animate.
An element can add more than one animate, or you can give them a sequential format of:. Animate (). Animate (). Animate ();

Adding the Stop method prevents the animation of elements from being animated,
There are two parameters for the Stop method: the first parameter is StopAll, the second argument is Gotoend, and both parameters are false by default.
When the first argument is set to true, all animation effects are stopped, and the second argument is true to stop the current and subsequent animations directly
Completes the current animation.

Chaining: element. Method 1. Method 2 ...

Add Class AddClass Remove class Removeclass

. Text method: Gets the text content of the element.
. html method: Gets all the contents of an element, and can be obtained if there is a label
. Val method: Gets the value of the form element
. attr is used to return/set the property value of the specified element, attr can also set the property value with a function, as long as the property value to be set is returned in the function body,
You can also set multiple attribute value formats to attr ({attr1:val1,attr2:val2 ...}); REMOVEATTR removes the specified attribute;
. Map gets all the specified elements and puts them into the specified collection, for example: var map = $ ("div"). Map (function () {return $ (this). val ();}); can then be obtained through the Map.get () method;
. empty (); Removes all child elements in the matching element;
. remove (); Removes all matching elements from the DOM;
. Detach (); Removes the text and child nodes of the matching element, as well as itself, but preserves the bound event, the attached data, which is different from the remove

JS objects and jquery objects are converted to each other:
Js=>jquery:① Get JS object ② convert to JQuery object using the $ (JS object) method
Jquery=>js:① get JQuery Object ② use Jquery[0] method to convert to JS object

Three ways to resolve conflicts
①jquery.noconflict ();
JQuery (function () {
function body;
});

②var $j = Jquery.noconflict ();
$j (function () {
function body;
});

③jquery.noconflict ();
JQuery (document). Ready (function ($) {
function body (the function body still uses $);
});

④jquery.noconflict ();
(function ($) {
function body (the function body still uses $);
}) (JQuery);

Common selectors in jquery:
Global Selector ("*"),
ID selector ("#id"),
Class selector (". Class"),
Tag Selector ("tag name"),
The set selector ("Div, #id,. Class") is separated by commas,
The intersection selector ("P#id") is not delimited by any symbols,
The descendant selector ("P #id") is separated by a space,
Descendant selectors ("P>span") are separated by >,
The adjacent selector ("p+ #id") is separated by A +, which refers to the first matching element after the selected element.
The adjacent sibling selector ("P~div") is delimited with ~, returning all matching selectors behind the element,

Pseudo-class selectors common in jquery:
: Header returns all header elements
: First returns the element of the specified element
: Last returns the final element of the specified element
: Not (#id) returns an element with an ID name that is not an ID
: Even returns the specified element with an even number of indexes
: Odd returns the specified element with an odd index
: eq (num) returns the specified element indexed to num
: GT (NUM) returns the specified element with an index greater than num
: LT (num) returns the specified element with an index less than num
: Nth-of-type (2n) returns the ordinal element of a specified element (not indexed to even)
: Nth-of-type (2n-1) returns the odd number of elements of a specified element (not indexed as odd)
: Only-child If the specified element is the only child element in its parent element, it will be matched
: Contains (text) returns the specified element that contains text
: Has ("P") returns the element containing the specified element
: Empty returns the specified element with no content and no child elements
:p arent returns elements that contain child elements or content
: Hidden returns the specified element that is hidden
: Visible returns the specified element
:d isable returns the specified disabled element
: Enabled returns the specified non-disabled element input:checked option:selected
: Filter returns all elements that satisfy the filter condition, which can be multiple, separated by commas input[type= ' checkbox ']

Property Selector
[attr] Returns the element containing the attr attribute
[attr = val] Returns the specified element with the property value Val
[attr ^= Val] Returns the specified element with the value of the attribute starting with Val
[attr $= Val] Returns the specified element with the attribute value ending in Val
[attr *= Val] Returns the property value containing the specified element of Val
The property selector can also be intersected, with multiple conditions arranged together [][][] ...

. Children () returns all child elements of the specified element, or can write filters within parentheses, such as: Contains ("Dby"): Has ("P"), etc.;
. Closest ("Ele") starts with the element itself, and then matches the ancestor element, returning the first matching element or the element itself;
. Find () returns a descendant element, or a filter, such as. FIND ("span");
. Next () returns the neighboring element (next) of the sibling,. Nextall () returns all adjacent elements (after),. Nextuntil ("Ele") returns the element between the specified element and the action element,
Prev and next represent the preceding adjacent elements.
. OffsetParent () returns a parent element that is closest to the action element in all of the matched elements and uses the anchor;
. Parent () returns a direct parent element;
. Parents () returns all the parent elements of the matching element;
. Parentsuntil ("parent"); finds the parent element of all current elements between the current element and the specified element;
. Siblings () returns all sibling elements of the matching element;
When you add styles or other actions to different elements, you can add them simultaneously using the. Add ("Ele") method;

. Addback () to add its own elements to the selector
. Wrap ("Ele"), wrap the matching elements with elements, use the current element, and keep the current element, or use a label;
. Unwrap (); Removes the immediate parent element of the current matching element;
. Wrapall ("Ele"); wrap all matching elements with the current element;
. Wrapinner ("< tags >"); wrap the contents of each matching element with a label;

Add inside the matching element:
. Append ("Ele"); add information to the end of the matching element (can be text or tag elements)
. prepend ("ele"); Adds information to the head of the matching element (can be text or tag elements)
. AppendTo ("Ele"); add information to the end of the matching element (can be text or tag elements)
. Prependto ("ele"); Adds information to the head of the matching element (can be text or tag elements)
The difference after adding to is that the element being added at the time of use is preceded by a matching element, such as $ ("<span>1</span>"). AppendTo ("#p1"), add to
Defined content, you can also add content that already exists in the page but the page offset will occur;

To add outside the matching element:
. After ("Ele"); add element after match element
. Before ("Ele"); add an element before the matching element
. InsertAfter ("Ele"); add elements after matching elements
. InsertBefore ("Ele"); add an element before the matching element
The difference between the insert and the previous is that the element being added at the time of use is preceded by the matching element, for example, $ ("<span>1</span>"). InsertAfter ("#p1"), add the insert after adding your own
Defined content, you can also add content that already exists in the page but the page offset will occur;
You can also use functions to add elements, and the function two parameters are the index index of the matching element and the Val value respectively;

Replacement method:
. ReplaceWith ("Ele"); Replace all matching elements with the specified HTML or DOM elements, replacing them with elements from the current page, causing the replacement element to be removed
. ReplaceAll ("Ele"); Replace all selector matching elements with matching elements

Cloning:
. Clone (); Copy the matching element, if no parameter is just a copy of the DOM structure, with parameter true copies both the event and DOM structure
. offset (); Returns/sets the offset of the element relative to the entire document, the return usage:. Offset (). top/left/right; Usage:. Offset ({top: "100px"});
The principle is to set the matching element to relative

. width (); Returns the content width of the matched element;
. height (); Returns the content height of the matching element;
. innerwidth (); Returns the width of content + left and right padding;
. Innerheight (); Returns the height of content + upper and lower padding;
. Outerwidth (); Returns the width of the content + left and right padding + width of the left and right border;
. Outerheight (); Returns the height of the content height + upper and lower padding + height of the upper and lower border;
. Outerwidth (true); return content width + left and right padding width + left and right border width + left and right margin;
. Outerheight (true); Returns the height of the content height + upper and lower padding + upper and lower border height + upper and lower margins;

$ (document). ScrollTop (); Scroll distance from top of page
$ (document). ScrollLeft (); Scroll distance from the left of the page

When you get the distance from the top of an element, it is divided into the following steps:
① gets the height of the entire window var winheight = $ (window). Height ();
② gets the distance of the element from the top of the page var eletop = $ ("ele"). Offset (). Top;
③ gets the scrolling distance of the page var doctop = $ (document). ScrollTop;
④ judging the size of ③ and ②-①

The basic chapter of jquery