Front-end jquery Section simple finishing

Introduction to jquery
Why use jquery
When using JS to write code, you will encounter some problems:
The Window.onload event has an event coverage problem, so only one event can be written.
Poor code tolerance.
Browser compatibility issues.
Writing is cumbersome and the amount of code is much.
The code is messy and the pages are all over the place.
Animation effects are difficult to implement.
The advent of jquery can solve the above problems.

What is JQuery
JQuery is a library of JS, which encapsulates some of the features we commonly use in our development process to facilitate our invocation and improve our development efficiency.
JS Library is to put our common functions in a separate file, when we use, the direct reference to the page.

Two major features of JQuery
Chained programming: For example,. Show () and. html () can be written in. Show (). HTML ().
Implicit iteration: implicit corresponds to explicit. Implicit iterative means: loop through the inside of the method without having to loop it ourselves, simplifying our operation and making it easier for us to invoke.

Basic steps for using JQuery
(1) Lead package
(2) Entry function
(3) Function implementation code (event handling)

The entry function and the $ symbol for JQuery
Writing one:
1. When the document is loaded and the picture is not loaded, the function can be executed.
$ (document). Ready (function () {
Alert (1);
})
Two:
2. When the document is loaded and the picture is not loaded, the function can be executed.
$ (function () {
Alert (1);
});
Three:
3. When the document is loaded and the picture is loaded, the function is executed.
$ (window). Ready (function () {
Alert (1);
})

The difference between the jquery entry function and the JS entry function:
Difference One: The number of writing is different:
The entry function of Js can only occur once, and there will be an issue with event coverage multiple times.
The entry function of JQuery can occur any number of times, and there is no event coverage problem.
Difference two: The timing of execution is different:
The entry function of JS is only executed after all the file resources have been loaded. These file resources include: page document, external JS file, external CSS file, image, etc.
The entry function of jquery is executed after the document has been loaded. The completion of the document loading means that the DOM tree is ready to be manipulated, without waiting for all external resources to be loaded to complete.
The order in which the document is loaded: From top to bottom, edge parsing edge execution.

The $ symbol for jquery
JQuery uses the $ notation reason: Simple to write, different from other characters, easy to remember.

Comparison of Dom objects and jquery objects in JS
The essence of jquery is to repack the DOM object to have the jquery method.

The mutual transformation of the two

jquery Selector
The basic selector for JQuery

Hierarchy Selector

Basic Filter Selector

Property Selector

Filter selectors

jquery animation effects
Show animations
Way One:
$ ("div"). Show ();
Way two:
$ (' div '). Show (3000);
Way three:
$ ("div"). Show ("slow");
Mode four:
Show (millisecond value, callback function;
$ ("div"). Show (5000,function () {
Alert ("The animation is done!") ");
});

Hide Animation
$ (selector). Hide ();
$ (selector). Hide (1000);
$ (selector). Hide ("slow");
$ (selector). Hide (+, function () {});

On-off display hidden animation
$ (' #box '). Toggle (3000,function () {});
The toggle () method is used to show and hide the back and forth switch: Execute show () first, then hide ().

Slide in and slide out
1, slide into the animation effect: (similar to the life of the shutter door)
$ (selector). Slidedown (speed, callback function);
2, slide out the animation effect:
$ (selector). Slideup (speed, callback function);
3. Slide-in slide-out toggle animation effect:
$ (selector). Slidetoggle (speed, callback function);

Fade animation
1. Fade in animation effect:
$ (selector). FadeIn (speed, callback);
2, fade out the animation effect:
$ (selector). FadeOut (1000);
3. Fade-in fade animation effect:
$ (selector). Fadetoggle (' Fast ', callback);

Custom animations
$ (selector). Animate ({params}, speed, callback);
Function: Performs a custom animation of a set of CSS properties.
The first parameter represents: The CSS property to be animated (required)
The second parameter indicates: The duration of the animation is performed (optional)
The third parameter means: The callback function that executes immediately after the animation is executed (optional)

Stop animation
$ (selector). Stop (true, false);
First parameter:
True: Subsequent animations do not execute.
False: Subsequent animations will execute.
A second parameter:
True: Immediate execution completes the current animation.
False: Stops the current animation immediately.
PS: If all parameters are not written, the default of two is false. The actual work, directly write stop () use more.


Property manipulation of jquery
JQuery's property manipulation module is divided into four parts: HTML property Manipulation, Dom property manipulation, class-style manipulation, and value manipulation
HTML property Manipulation: reads, sets, and removes properties from an HTML document. such as attr (), removeattr ()
Dom Property manipulation: Read, set, and remove properties of DOM elements. such as prop (), Removeprop ()
Class-style operation: refers to the addition of DOM property classname, which removes the operation. such as AddClass (), Removeclass (), Toggleclass ()
Value action: Is the read and set operation on the DOM property value. such as HTML (), text (), Val ()

Sets the property value or returns the property value of the selected element
attr ()

removing properties from
Removeattr ()
Prop ()


About the differences between attr () and prop ()

When to use attr (), when to use Prop ()?
1. There are true,false two attributes using prop ();
2. The other uses attr ();

AddClass (Add multiple class names)
Removeclass removes all or the specified classes from all matching elements. (You can implement the display hiding of the element by adding the Delete class name)

Toggleclass Deletes (adds) a class if it exists (does not exist). Toggleclass (' box ')

Html
HTML () is to get all the contents of the selected tag element

Text
Text () Gets the textual content that the matching element contains

Val
Val () is used to get values in form controls, such as input textarea select and so on


Use jquery to manipulate the value of input


Documentation Operations for jquery
Insert operation
Parent element. Append (child element)
Explanation: Appends an element and adds a new child element to the parent element. Child elements can be: stirng | Element (JS object) | jquery elements

child element. AppendTo (parent Element)
Explanation: Appending a child element to an element is added to the parent element

The parent element. Prepend (child element);
Explanation: Pre-Add, add to first position of parent element

The parent element. Prependto (child element);
Explanation: Post-Add, add to the last position of the parent element

The parent element. After (child element);
child element. Inserafter (parent element);
Explanation: Inserting content after a matching element

The parent element. Before (child element);
child element. Inserbefore (parent element);
Explanation: Inserting content after a matching element

Cloning operations
$ (selector). Clone ();
Explanation: Cloning a matching DOM element

Modify Operation
$ (selector). replacewith (content);
Replaces all matching elements with the specified string, JS object, and jquery object.

$ (' <p> ha ha </p> ') replaceall (' H2 ');
Explanation: Replace All. Replace all H2 tags with p tags.

Delete operation
$ (selector). Remove ();
Explanation: When the node is deleted, the event is also deleted (in short, the entire label is deleted)

$ (selector). Detach ();
Explanation: When a node is deleted, the event is preserved

$ (selector). empty ();
Explanation: Emptying all descendant nodes in the selected element



Location information for jquery
Width and height
Gets the width. Width ()
Set width. width (value)

Height
Gets the height. Height ()
Set height. Height (value)


Innerheight () and Innerwidth ()
Gets the interior width. innerwidth ()
Set the interior width. innerwidth (value);

Get internal high. Innerheight ()
Set the interior width. innerheight (value);


Outwidth and Outheight ()
Gets the external width. outerwidth ([Includemargin])
Set the external width. Outerwidth (value)

Get External high. Outerheight ([Includemargin])
Set external high. Outerheight (value)

Offset
Get. Offset ()
Set. Offset (coordinates)

The element coordinates. Position ()
Scrolling distance
Get:
Horizontal direction. ScrollLeft ()
Description: Gets the position of the current horizontal scroll bar of the first element in the matching element collection (the width of the page roll away)

Set up:
. ScrollLeft (value)
Description: Sets the horizontal scroll bar position for each matched element.

Vertical direction
Get:
. ScrollTop ()
Description: Gets the position of the current hysteresis scrollbar of the first element in the matching element collection (the height of the page roll walk)
Set up:
. ScrollLeft (value)
Description: Sets the vertical scroll bar position for each matched element.



The concept of JS's event stream
What is event flow
Event flow describes the order in which events are received from the page
1. Dom Event Flow
The event flow defined by the "DOM2 level event" consists of three phases:
① event capture phase;
② in the target stage;
③ Event Bubbling Phase

The relationship between document, DocumentElement and Document.body:
Document represents the entire HTML page;
Document.documentelement represents the Document.body represents the <body> tag;

Three stages:

Common events for jquery

Event Object
The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

The origin of the event stream
Microsoft and Netscape promiscuity

About the Event object

jquery Event binding and reconciliation
Binding events
Grammar
Bind (TYPE,DATA,FN)
Description: Binds an event handler function for each matching element's specific event (like click).

Parameter explanation:
Type (String): Event Type
Data (object): (optional) An additional data object that is passed to the event object as the value of the Event.data property
fn (function): handler function above the event bound to each matching element


Unbind Event
Grammar
Unbind (TYPE,FN);
Describe:
The reverse operation of BIND () removes the bound event from each matching element.
If there are no parameters, all bound events are deleted.
If you pass a handler function that is passed at bind time as the second argument, only that particular event handler will be deleted.

Parameter explanation:
Type (String): (optional) event type
fn (function): (optional) The event handler to be tied to the event of each matching element

Unbind all events in all paragraphs
$ ("P"). Unbind ()

Custom events
Grammar
Trigger (Type,data);
Description: Triggers a class of events on each matched element that triggers a custom event registered by bind ().

Parameter explanation:
Type (String): The type of event to trigger
Data (Array): (optional) Additional parameters passed to the event handler

Disposable Events
Grammar
One (TYPE,DATA,FN)
Describe:
Binds a one-time event handler for each matching element's specific event (like click). On each object, this event handler function is only executed once. Other rules are the same as the bind () function

Parameter explanation:
Type (String): Event Type
Data (object): (optional) An additional data object that is passed to the event object as the value of the Event.data property
fn (function): handler function above the event bound to each matching element



Event delegate (event proxy)
What is an event delegate
Popularly speaking, the event is onclick,onmouseover,onmouseout, and so is the event, commissioned, is to let others do, this event is added to some elements, but you add to others to do, complete this event.

Principle:
Using the bubbling principle, the event is added to the parent, triggering the execution effect.
Role:
1. Better performance
2. For newly created elements, you can have an event directly

Event Source:
Same as this (he does not have to look at the problem, who is the person who operates), the event object under the
Usage scenarios:
Binds the same event to many elements in the DOM;
Binds an event to an element that does not already exist in the DOM;

Grammar:
On (TYPE,SELECTOR,DATA,FN);
Description: Bind one or more event handlers to the selected element

Parameter interpretation
Events (String): One or more space-delimited event types
Selector (string): A selector string that filters out the descendant elements in the selected element that can trigger events
Data: The Event.data to be passed to the event handler when an event is triggered.
fn: callback function


The carousel is all over the web, and you can change it.


The Ajax of jquery
What is Ajax
AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML)
In short, without overloading the entire Web page, Ajax loads the data in the background and displays it on the Web page.
With the JQuery AJAX approach, you can request text, HTML, XML, or JSON from a remote server using HTTP Get and HTTP Post-and you can load the external data directly into the selected elements of the Web page.

The load () method of jquery
The load () method loads the data from the server and puts the returned data into the selected element.
Grammar
$ ("selector"). Load (url,data,callback);

The Getjson method of jquery
jquery uses the Getjson () method to asynchronously load JSON-formatted data in Ajax. Get data from the server and parse the data to display it in the page
Grammar:
$.getjson (Url,[data],[callback])

Parameter explanation:
URL parameter: The server address that loads the JSON-formatted file for the request
Optional Data parameter: The information sent for the request
Callback parameter: A function that executes after a successful request for data

jquery's $.get () method
The $.get () method requests data from the server over an HTTP GET request
Grammar:
$.get (Url,callback);

URL parameter: Specifies the path you requested, which is a required parameter
Callback parameter: A function that executes after a successful request for data

The post () method of jquery
The post () method is used to send data to the server in post, the server receives the data, processes it, and returns the processing result to the page
Grammar:
$.post (Url,data,callback);

URL parameter: Specifies the path you requested, is a required parameter, and the optional data parameter is the one sent with the request
Optional callback parameter: A function that executes after the data request succeeds

Basic format
Get () mode
$.ajax ({
URL: './data/index.txt ',
Type: ' Get ',
DataType: ' Text ',
Success:function (data) {
$ (' P '). HTML (data);

},
Error:function (Error) {
Console.log (Error)
}

Post () mode
$.ajax ({
URL: '/index ',
Type: ' Post ',
Data:{name: ' Zhang San ', Age:12},
Success:function (data) {
$ (' P '). HTML (data);
},
Error:function (Error) {
Console.log (Error)
}


XMLHttpRequest, learn from yourself.

jquery also includes:
jquery Plugin Https://www.oschina.net/project/tag/273/jquery
jQueryUI https://jqueryui.com/http://www.jqueryui.org.cn/

Front-end jquery Section simple finishing