Chapter One jquery Foundation

Chapter One jquery Foundation I. Jquert INTRODUCTION 1. What is jquery

jquery is one of the JavaScript libraries, which is the encapsulation of JavaScript objects and utility Functions.

jquery is another excellent JavaScript library following prototype, an open source project created by the American johh Resig in 2006.

jquery is just a library of javascript, which is only a subset of it, and does not completely replace Javascript.

2. Why use jquery

In contrast to javascript, the syntax for making interactive effects with jquery is simpler, the amount of code is greatly reduced, and there are no browser compatibility issues.

3. jquery and other JavaScript libraries

According to the usage ratio, a few large JavaScript libraries accounted for the following:

1. JQuery (62%)
2. Bootstrap (22%)
3. Zepto (6%)
4. Ext (5%)
5. YUI (5%)

4. Use of jquery

1) accessing and manipulating DOM elements

jquery makes it easy to get and modify the elements in the page, whether it's deleting, moving, or copying elements, and jquery offers a quick and easy way to do So.

2) Control page Style

By introducing jquery, developers can quickly control the Page's CSS Files.

3) Handling of page events

After the introduction of jquery, the presentation layer of the page can be separated from the function development, the developer focuses more on the logic and efficacy of the program, and the page designer focuses on the optimization of the page and the User's experience.

With the event binding mechanism, the combination of the two can be easily implemented. (such as a mouse click Event)

4) easy to use jquery plugin

After the introduction of jquery, you can use a lot of jquery plug-ins to improve the function and effect of the page, such as jquery UI plugin library, form plugin, Validate plugin, etc. The functionality that makes it so difficult to implement with JavaScript code can be easily implemented with jquery Plugins. For example, 3D slides are implemented by Jquery's Slicebox Plugin.

5) the perfect combination of Ajax technology

Using AJAX to read server data asynchronously, greatly facilitates the development of the program, enhance the interaction of the page, enhance the user experience, after the introduction of jquery, through the internal object or function, plus a few lines of code to achieve complex functions.

6) dealing with Browser compatibility issues

Help us write compatibility code in the jquery library.

5. The Advantages of jquery

1) lightweight. jquery is small in size and compresses approximately equal to 100KB.

2) powerful Selector. jquery supports almost all CSS selectors, and jquery has a custom-specific selector.

3) Excellent Dom Encapsulation. jquery encapsulates a lot of Dom operations, making it easier for developers to use their hands when writing DOM operations related Programs.

4) a reliable event handling Mechanism. The event handling mechanism of jquery absorbs the essence of the event handler function in JavaScript and is very reliable.

5) Excellent browser Compatibility.

6) an implicit Iteration. When using jquery to find the same name (class name, table signature, and so on), a result collection is returned, with no user one by one traversal, and a quick way to find the matching value simplifies programming.

7) Rich Plug-in Support. The extensibility of jquery has attracted developers from all over the world to write jquery extensions, and there are now hundreds of officially supported Plug-ins.

6. jquery Version and Configuration

1. Get the latest version of jquery

Go to the official jquery website (http://jquery.com) and download the latest version in the Download jquery area on the right side of the Page.

1. jquery Class Library description

jquery class Library A plugin is divided into two versions: the development version (full Uncompressed) and the release version (gzip compressed version).

The version number is 1. The jquery plugin at the beginning can support IE6~IE8 Compatibility. The recommended versions are: Jquery-1.8.3.min.js and Jquery-1.12.4.js

1. How jquery is quoted
   1. Page References (referencing Local)
   2. The absolute address of the Reference Address utility network store that references the network Store.

Two. jquery Syntax 1.jQuery loading

$ (document). Ready (function () {

Code of execution;

})；

This syntax is equivalent to JavaScript code:

Window.onload=function () {

Execute code;

}；

Window.onload in $ (document). The comparison of Ready ()
	Window.onload	$ (document). Ready ()
Timing of execution	You must wait until all the elements in the page (pictures, Flash, video, and so On) have been loaded before they can be executed	Executes immediately after all DOM objects in the page have been drawn.
Number of writes	The same page cannot write multiple Even if you write more than one, there will only be an effect	The same page can write multiple Write n to have n-times effect
Simplified notation	No	$ (document). Ready (function () { Code of execution; })； can be simply written $ (function () { Execute code }

The grammatical structure of the 2.jQuery

jquery statements consist mainly of three parts: $ (), document, and ready (), which are called in Jquery: Factory functions, selectors, and METHODS.

Syntax: $ (selector). Action ();

1. Factory function $ ()

In jquery, the dollar sign "$" is equivalent to jquery, i.e. s () =jquery ().

The purpose of $ () is to convert the DOM object to a jquery object, and the jquery method can only be used if the DOM object is converted to a jquery Object.

2. Selector Selector

Syntax: $ (selector);

3. Method Action ()

A series of methods are provided in Jquery. One of the most important methods in these methods is event handling, such as many underlying events: mouse events, keyboard events, and form events, all of which can be bound by event METHODS.

Ways to manipulate CSS Styles:

1) add a new style to the element

Syntax: jQuery object. addclass ([style name]);

Note: style names do not take "." Class symbols, as distinct from selectors

2) set new CSS style properties

Syntax: jQuery object. css ("properties", "property values");

JQuery object. css ({"attribute 1": "property 1 value", "property n": "value of attribute n"});

3) show/hide Elements

Syntax: $ (selector). Show (); Display element

$ (selector). Hide (); Hide elements

Code style for 3.jQuery

1. Use of "$"

In a jquery program, the most used is "$", which must be used whether it is a page element selector or a function function prefix. It "$" is equivalent to Jquery.

1. Chained operation

Multiple operations on an object, and only one object is Called.

Writing:

$ ("h1"). mouseover (function () {

Code 1;

}). mouseout (function () {

Code 2;

})；

1. Implicit iteration

When you get a collection in jquery, all elements inside are traversed by default.

1. Add Comment

A) Development phase: Add comments to the code to increase the readability of the Code

B) Maintenance phase: The key module forms the development document, facilitates the later maintenance

C) The official release of the product: it is recommended to delete the comments, reduce the file size, speed up the download speed, improve the user experience.

Three. jquery object and Dom object 1.DOM object

The node object that you get directly using JavaScript is the DOM Object.

In javascript, using getElementsByTagName () or getElementById () to get the nodes of an element, the DOM elements obtained in this way are Dom Objects.

2. jquery objects

The jquery object is the object that is produced after the DOM object is wrapped through jquery. It can use the jquery method.

3. jquery and Dom objects are converted to each other

jquery objects cannot directly use any method of the DOM Object.

Dom objects also cannot directly use the methods of jquery Objects.

jquery object name prefix with "$"

1. jquery objects converted to DOM objects

1) the jquery object is an Array-like object that can be obtained by [index] by means of the corresponding DOM object

var $text =$ ("text"); jquery Object

var text= $text [0]; Dom Object

2) get the corresponding DOM object with the Get (index) method

var $text =$ ("text"); jquery Object

var text= $text. get[0]; Dom Object

2.DOM Object Conversion jquery Object

For a DOM object, you only need to wrap the DOM object with the $ () function, and the wine can get a jquery object.

var Text=document.getelementbyid ("text"); Dom Object

var $text =$ (text); jquery Object

This chapter Summarizes:

1. To use jquery, you need to first reference the jquery library file, first introduce the jquery plug-in file, and then reference your Own. JS File. otherwise, It may not be recognized or compiled.
2. Multiple library files are used in one page, variable collisions: use the Jquery.noconflict () method to resolve the control of the variable $ jquery, which releases Jquery's control over the $ variable.
3. Use the next () method to get the next sibling element of the current Element.

Chapter One jquery Foundation