Basic knowledge of jQuery introduction_jquery

JavaScript library functions and comparison

In order to simplify the development of JavaScript, some JavsScript libraries were born. JavaScript libraries encapsulate many predefined objects and utility functions. It can help users create rich client pages with Web 2.0 features that have difficult interactions, and is compatible with major browsers

Currentlypopular JavaScript librariesare:

Introduction to jQuery

jQuery is another excellent JavaScript library after Prototype

jQuery philosophy: Write less, do more. The advantages are as follows:

Lightweight

Powerful selector

Excellent encapsulation of DOM operations

Reliable event handling mechanism

Perfect Ajax

Excellent browser compatibility

Chain operation mode

……

jQuery: HelloWorld

jQuery object

jQuery object is the object generated by wrapping the DOM object through jQuery ($())

jQuery objects are unique to jQuery. If an object is a jQuery object, then it can use the methods in jQuery: $(“#persontab”).html();

The jQuery object cannot use any method of the DOM object, and the DOM object cannot use any method of jQuery

Convention: If you obtain a jQuery object, add $ in front of the variable.

var $variable = jQuery object

var variable = DOM object

DOM object converted to jQuery object

For a DOM object, you only need to wrap the DOM object with $() (the jQuery object is the object generated by wrapping the DOM object through jQuery), and you can get a jQuery object.

After conversion, you can use the methods in jQuery

Convert jQuery object to DOM object

jQuery objects cannot use methods in DOM, but if jQuery does not encapsulate the desired methods and you have to use DOM objects, there are two methods as follows:

(1) The jQuery object is an array object, and the corresponding DOM object can be obtained through the [index] method.

(2) Use the get(index) method in jQuery to get the corresponding DOM object    

jQuery Selector

Selectors are the foundation of jQuery. In jQuery, event processing, DOM traversal and Ajax operations all rely on selectors

Advantages of jQuery selectors:

Simple writing method

Complete event handling mechanism

Basic Selector

The basic selector is the most commonly used selector in jQuery, and it is also the simplest selector. It searches for DOM elements through element id, class and tag name (id can only be used once in a web page, and class is allowed to be used repeatedly) .

Basic selector example

Change the background color of the element with id one to # bbffaa

Change the background color of all elements with class mini to #bbffaa

Change the background color of all elements named

to #bbffaa

Change the background color of all elements to #bbffaa

Change the background color of all elements and the element with id two to # bbffaa

Level Selector

If you want to get specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, sibling elements, etc., you need to use hierarchical selectors.

Note: ("prev ~ div") selector can only select sibling elements after the "# prev" element; while the method siblings() in jQuery has nothing to do with the front and back positions, as long as it is a sibling node, it can select

Hierarchical selector example

Change the background color of all

within to # bbffaa

Change the background color of the

inner subsection

to # bbffaa

Change the background color of the next

with id one to # bbffaa

Change the background color of all sibling

elements behind the element with id two to # bbffaa

Change the background color of all

sibling elements of the element with id two to # bbffaa