Basic knowledge about jQuery _ jquery

This article mainly introduces some basic jQuery knowledge, which is a basic knowledge base, including jQuery introduction, object conversion, basic selector, level selector, and other knowledge points. Functions and comparison of JavaScript libraries

To simplify JavaScript development, some JavsScript libraries have emerged. the JavaScript library encapsulates many predefined objects and practical functions. It can help users establish rich client pages with Web2.0 features of difficult interaction and be compatible with various browsers

CurrentPopular JavaScript librariesInclude:

JQuery introduction

JQuery is another excellent JavaScript library after Prototype

JQuery philosophy: write less and do more. advantages:

Lightweight

Powerful selector

Excellent DOM operation encapsulation

Reliable event processing mechanism

Comprehensive Ajax

Excellent browser compatibility

Chain Operation method

......

JQuery: HelloWorld

JQuery object

A jQuery object is an object generated after DOM objects are packaged using jQuery ($ ().

JQuery objects are exclusive to jQuery. If an object is a jQuery object, it can use the method in jQuery: getting ({{persontab}}.html ();

JQuery objects cannot use any methods of DOM objects. Similarly, DOM objects cannot use any methods in jQuery.

Convention: If you get a jQuery object, add $ Before the variable.

Var $ variable = jQuery object

Var variable = DOM object

Convert a DOM object to a jQuery object

For a DOM object, you only need to use $ () to wrap the DOM object (jQuery object is the object generated after DOM object is wrapped through jQuery) to obtain a jQuery object.

After conversion, you can use the method in jQuery.

Convert a jQuery object to a DOM object

JQuery objects cannot use methods in the DOM, but if jQuery does not encapsulate the desired method, there are two ways to deal with DOM objects:

(1) The jQuery object is an array object. you can use the [index] method to obtain the corresponding DOM object.

(2) use the get (index) method in jQuery to obtain the corresponding DOM object.

JQuery selector

Selector is the foundation of jQuery. in jQuery, event processing and DOM traversal and Ajax operations depend on the selector.

Advantages of jQuery selector:

Concise Writing

Comprehensive event handling mechanism

Basic selector

The basic selector is the most commonly used selector in jQuery and the simplest selector. it searches for DOM elements by element id, class, and TAG Signature (the id can only be used once on a webpage, class can be reused ).

Basic selector example

Change the background color of the element whose id is one to # bbffaa

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

Change element name

The background color of all elements is # bbffaa

Change the background color of all elements to # bbffaa

Change the background color of all elements whose id is two to # bbffaa

Level selector

If you want to obtain specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, and sibling elements, you need to use the hierarchical selector.

Note: ("prev ~ P ") the selector can only select the peer element behind the" # prev "element. the method siblings () in jQuery is irrelevant to the front and back positions, and can be selected as long as it is a peer node.

Hierarchical selector example

ChangeAll

The background color is # bbffaa

ChangeInner

The background color is # bbffaa

Change id to the next one

The background color is # bbffaa

Change the id to all the brothers behind the two element.

The background color of the element is # bbffaa

Change all elements whose id is two

The background color of the sibling element is # bbffaa