Learn jquery and get started with this paper

References to jquery
Local File Introduction:
<script src= ' js/jquery.min.js ' ></script>

Content Distributed Network CDN
Non-condensed version
<script src= "Https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script> development
Compressed version
<script src= "Https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ></script> official release

jquery Source Analysis
Http://www.cnblogs.com/aaronjs/p/3279314.html

How to tell if jquery was really introduced
Input $.fn.jquery
Output "3.2.1"

jquery's official website https://jquery.com

Use of jquery
$ equivalent to jquery, which is the alias of jquery
$ = = = JQuery;
jquery is equivalent to a constructor function

$ () is a shorthand class array for jquery () with extra methods

$ (String)
$ ('. Footer '); Convert an element with the class name footer to a jquery object (equivalent to selector)
$ (' <div></div> '); A jquery object that generates a div (equivalent to HTML text)

$ (DOM Element)
Get all paragraph elements dom
var paragraphs = document.getelementbytagname (' P ');
var $paragraphs = $ (paragraphs); Convert the DOM to a jquery object

Using Eq,get, Index
var $firstParagraph = $paragraphs. EQ (0); jquery Object
var firstparagraph = $paragraphs [0]; Dom
var secondparagraph = $paragraphs. Get (1); Dom

jquery Selector
jquery Selector->css Selector
(Link coding.imweb.io/demo/p4/jquery-selector.html)
The jquery selector is divided into 3 main categories
1. Basic Selector
$ (tag) Select by Tag example: $ (' div ');//Find div tag
$ (. Class) Select an example by class name: $ ('. Footer ');//Find an element with the class name footer
$ (#id) Select an example by tag ID: $ (' #cat-tab ');//Find the element with the label ID Cat-tab
$ () matches all element examples $ (');//Find all elements
2. Combo Selector
$ (SELECTOR1,SELECTOR2) multi-Element Selector Example: $ (' DIV.P ');
$ (Selector1 selector2) descendant element Selector Example: $ ('. Footer P ');
$ (Selector1 > Selector2) child element Selector Example: $ ('. Footer > P ');
$ (Selector1 + selector2) adjacent element Selector Example: $ ('. Footer + P ');
3. Other selectors
$ (selector:first-child) Select the first child element example: $ ('. Footer:first-child ');
$ (selector:last-child) Select the last child element example: $ ('. Footer:last-child ');
$ (Selector:eq (index)) Select an index element in the collection: $ ('. ITEM:EQ (2) ');
$ (attribute=value) Select an element with a property value of $: $ (' [value=2] ');

Traversing the DOM

Get parent element (one)
$ (' #me '). parent ();

Get all parent and ancestor elements (multiple)
$ (' #me '). Parents ();

Use the. EQ () function to get the corresponding element
$ (' #me '). Parents (). EQ (0); Get Dad
$ (' #me '). Parents (). EQ (1); Get Grandpa

Use. Parents (selector) to find exactly
$ (' #me '), parents ('. Fat ');
$ (' #me '). Parents ('. Oldest ');

Get all the sibling elements
$ (' #me '). siblings (); Multiple

Use. Siblings (selector) to find exactly
$ (' #me '), siblings ('. Tall ');

Target for Grandpa.

Use. Children () to get child elements
$ (' #grandPa '). Children ();
Use the. Find (') to get all the descendant elements
$ (' #grandPa '). Find (');

Use the. Find (selector) to obtain the offspring element (if the descendant has, youngest selector)
$ (' #grandPa '). Find ('. youngest ');

6 most common selectors
. Parent ()
. Parents ()
. EQ ()
. Siblings ()
. Children ()
. Find ()

(Link coding.imweb.io/demo/p4/query-traversal.html)

Adding and removing DOM elements
Append/appendto Insert content (inside Element) at the end of the selected element
Prepend/prependto Insert content (inside Element) at the beginning of the selected element
After/inserafter Insert Content after selected element (outside element)
Before/inserbefore Insert content (outside Element) before the selected element

You want to kill your offspring.
$ (' #father '). Empty ()
You want to kill yourself and your offspring.
$ (' #father '). Remove ()

How to use
$ (document.body). Append (' <div> awesome </div> ')
$ (document.body). prepend (' <div> awesome </div> ')
$ (' <div> sharp </div> '). Prependto (Document.body)
$ (' <div> sharp </div> '). AppendTo (Document.body)

$ (' H1 '). EQ (0). After (' $ (' H1 '). EQ (0). Before (' $ (' $ ('

Add a UL to display the operating system, similar to the implementation of JS
$ (document. Body). Append ('

jquery Event Monitoring
1. The target element that triggered the event
2. Event names that are triggered
3. Callback when event is triggered
4. Event Object

Click the button to change the background color to XXX

$ (' #traget '). On (' click ', Function (event) {
Console.log (' target '); Was clicked on
$ (' body '). CSS (' background ', ' #ff0 ');
});
$ (' #target ') event target element
On Event listener function
Event name of ' click ' Listener
The entire function () event triggers the execution of the callback callback
Event jquery Events Object

JQuery Event Object--encapsulates the native event object (and is browser-compatible, adding useful properties and methods)

Cases:

$ (' a ') on (' Click ', Function (event) {
Console.log (event.target);//Gets the element that triggered the event
Event.preventdefault (); Block Default Events
Event.stoppropagation (); Block event bubbling
});
And the following effect is the same

$ (' a '). On (' click ', Function (event) {
Console.log (Event.target); Gets the element that triggered the event
return false; Block default events and prevent events from bubbling
});

Click the button to modify the background color

$ (' #button '). On (' click ', Function (event) {
$ (' section '). css (' backgroundcolor ', yellow);
});

To write an event listener using jQuery, you need to complete the following requirements:
The target element of the triggering event is #target
The listener is a click event
When an event is triggered, you need to add the class name disabled to the target element

$ (' #target '). On (' click ', function () {
$ (this). addclass (' disabled ');
});

Toggleclass (' classname ') toggles one or more classes that are set or removed from the selected element

Delegate of the event
An event delegate can manage all events of a certain type by using time bubbling to specify only one time handler.
Event delegates are implemented using the bubbling principle of events, what is event bubbling? It is the event that starts with the deepest node and then propagates the event up and down, for example: There is a node tree on the page,div>ul>li>a; for example, to add a click Click event to the innermost a, then the event will be executed one layer at a level, and the order of execution a> Li>ul>div, there is such a mechanism, then we give the outermost div plus click events, then the inside of the Ul,li,a do click events, will bubble to the outermost div, so it will trigger, this is the event delegate, delegate their parents to execute the event on their behalf.
In general, we will bind an event to an element, which will be directly bound to that element, as follows:

Bind the Li element to a point-and-click event
$ (' li '). Click (function () {
Console.log (' You clicked on Me ');
})
However, this direct processing will have the following problems:
--The newly added Li element via JS does not have this event binding, so click Invalid
--If the element is more, the analogy has 200 Li, that each Li bound an event, performance is very low
So how do we solve these problems? This is what we call the event delegate (or the event proxy).
Event delegation simply means using event bubbling to specify only one event handler to manage all events of a certain type.
Take a todo list for example:

The element to click is todo-item//but we bind the event to the parent element Todo-list, implementing the event delegate//HTML structure as: ul#todo-list>li.todo-item*5

$ (' #todo-list '). On (' click ', '. Todo-item ', function () {
$ (this). Toggleclass (' done ');
})
Take JQuery For example, so we don't see the nature behind it, and here we illustrate it with a native implementation:

var todolist = document.getElementById ("Todo-list");

Todolist.addeventlistener ("click", Function (e) {
var target = E.target;
Check if the event source target is Todo-item
if (target && target.nodeName.toUpperCase () = = ' LI ' && target.classList.contains (' Todo-item ')} {
Target.classList.toggle (' Done ')
} else {
Console.log (' I'm not Todo-item ');
}
});
Note: Because event delegates are dependent on event bubbling, events that have no event bubbling are not allowed to use event delegates.
Events that are appropriate for event delegation: Click,mousedown,mouseup,keydown,keyup,keypress.

Learn jquery and get started with this paper