Python Learning (23)-The jquery of the front-end Foundation

Reprinted from https://q1mi.github.io/Blog/2017/07/10/about_jQuery/

First, the introduction of jquery

1. jquery is a lightweight, multi-browser-compatible JavaScript library.
2. jquery simplifies JavaScript programming by making it easier for users to work with HTML Document, Events, animate, and facilitate Ajax interactions. Its purpose is: "Write less, does more."

Ii. Advantages of jquery

1. A lightweight JS frame. The jquery core JS file is only dozens of KB and does not affect page loading speed.
2. A rich Dom selector, jquery's selection is handy, such as to find a DOM object adjacent elements, JS may have to write several lines of code, and jquery line of code is done, such as to a table of interlaced color, jquery is a line of code.
3. Chained expressions. jquery's chained operations can be more concise by writing multiple operations in one line of code.
4. event, style, animation support. jquery also simplifies the javascript operation of the CSS code, and the code is more readable than JS.
5. Ajax operation Support. jquery simplifies Ajax operations, and the backend simply returns a JSON-formatted string to complete communication with the front-end.
6. Cross-browser compatible. jquery is basically compatible with today's mainstream browsers, without having to worry about browser compatibility issues.
7. Plug-in extension development. jquery has a rich third-party plug-in, such as: Tree menu, date control, picture switch plug-ins, pop-ups, and so on the basic front-end page of the components have corresponding plug-ins, and with the jquery plug-in made the effect is very dazzling, and can be adapted to their own needs to rewrite and encapsulation plug-in, simple and

Third, jquery contains the following content

1. Selector Selector
2. Filter
3. Style actions
4. Text manipulation
5. Property manipulation
6. Document processing
7. Event
8. Animation effects
9. Plug - ins
10. Each, data, Ajax

Download Link: jquery official website

Iv. Choice of jquery

• 1.x: Compatible with IE678, the most widely used, the official only bug maintenance, function no longer new. So for general projects, the 1.x version is available, and the final version: 1.12.4 (May 20, 2016)
• 2.x: Incompatible with IE678, few people use, official only bug maintenance, function no longer new. If you do not consider a compatible low version of the browser can use 2.x, final version: 2.2.4 (May 20, 2016)
• 3.x: Incompatible IE678, only the latest browser is supported. It is important to note that many of the old jquery plugins do not support version 3.x. Currently this version is the official maintenance version of the main update.

Maintenance IE678 is a headache, in general we will be extra load a CSS and JS alone processing. Fortunately, the use of these browsers are gradually reduced, PC-side users have gradually been replaced by mobile users, if there is no special requirements, will generally choose to abandon the 678 support.

V. jquery objects

The jquery object is the object that is generated after wrapping the DOM object through jquery. jquery objects are unique to jquery. If an object is a jquery object, then it can use the method in jquery: For example, $ ("#i1"). html ().

$("#i1").html() Gets the i1 HTML code for the element with the ID value. html()This is the method in jquery. equivalent to document.getElementById("i1").innerHTML; :

Although jQuery对象 it is DOM对象 produced after packaging, but jQuery对象 can not be used in DOM对象 any way, the DOM对象 same way can not be used in jQuery the method.

A convention, when declaring a jquery object variable, precede the variable name with $:

var $variable = jquery pair like var variable = dom object $variable[0]  //  jquery objects Turn into DOM objects

Take the example above for the use of jquery objects and DOM objects:

$ ("#i1"). html ();  // jquery objects can use the method of jquery $ ("#i1") [0].innerhtml;  // DOM objects using the DOM method

Vi. Basic jquery syntax

$ (selector). Action ()

1. Selector

ID selector:

$ ("#id");

Tag Selector:

$ ("TagName");

Class selector:

$ (". ClassName");

All element selectors:

$("*");

Combo selector:

$ ("#id,. Classname,tagname");

2. Hierarchy Selector

X and y can be any selector

$ ("x y");  // x All descendants of Y (descendants)$ ("x > Y");  // all sons of X Y (son)$ ("x + y")  // Find all of the Y-$ ("x ~ y") immediately following the x followed by    all brothers y 

Python Learning (23)-The jquery of the front-end Foundation