jquery Experience 1--jquery Introductory knowledge Management 1

1. JavaScript Library function and comparison

To simplify the development of JavaScript, some javsscript libraries were born. The JavaScript library encapsulates a number of predefined objects and utility functions. It helps users build rich-client pages with Web2.0 features that are highly difficult to interact with, and is compatible with large browsers; The current popular JavaScript libraries are:

2. JQuery Introduction

JQuery is another good JavaScript library after Prototype.

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

Lightweight

A powerful selector

Excellent encapsulation of DOM operations

Reliable event-handling mechanisms

The Perfect Ajax

Excellent browser compatibility

Chain Mode of operation

......

3. JQuery objects

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

The jquery object cannot use any of the methods of the DOM object, nor can the DOM object use any of the methods in jquery

convention: If you get a JQuery object, precede the variable with $.

var $variable = JQuery Object

var variable = DOM Object

4. Conversion of DOM objects to jquery objects

DOM objects into JQuery objects

For a DOM object, you can get a jquery object by wrapping the DOM object (the jquery object is the object that is created after the DOM object is wrapped through jquery).

You can use the methods in jquery after the conversion.

JQuery object into DOM object

jquery objects cannot use methods in the DOM, but if jquery does not encapsulate the desired method and has to use a DOM object, there are two ways to do it:

5. JQuery Selector

Selectors are the foundation of jquery, and in jquery, event handling, traversal DOM, and Ajax operations all depend on selectors

The advantages of the jquery selector:

6. Basic Selector

The base selector is the most commonly used selector in JQuery, and the simplest selector, which looks up the DOM element through the element ID, class, and tag name (the ID can only be used once in the Web page and class allows reuse).

7. Hierarchy Selector

If you want to get specific elements, such as descendant elements, child elements, neighboring elements, sibling elements, and so on, through hierarchical relationships between DOM elements, you need to use a hierarchy selector.

Note:

("prev ~ div") selector can only select sibling elements following the "#prev" element; In jquery, the method siblings () is independent of the front and back position, as long as the sibling node can select

$ ("#one + div") Select the next div element with ID One, must be a neighbor ! $ ("#two ~ div") Select all the div sibling elements behind the element with ID two

8. Filter Selector

The filter selector mainly filters out the required DOM elements through specific filtering rules, most of which start with ":" Except for those special attributes

According to different filtration rules, filter selector can be divided into basic filter, Content filter, visibility filter, attribute filter, child element filter and Form object attribute filter selector.

need to note: $ ("Div:first") and $ ("Div:first") the difference!

9. Content Filter Selector

The filtering rules of the Content filter selector are mainly embodied in the child elements and text content .

10. Visibility Filter Selector

The Visibility filter selector selects the element based on the visible and invisible state of the element

Visible selector: Hidden not only contains elements with a style property display of none, but also elements such as text-hidden fields (<input type= "hidden" >) and Visible:hidden

11. Attribute Filter Selector

The filter rule for the attribute filter selector is to get the corresponding element through the attributes of the element

12. Child element Filter Selector

The Nth-child () selector is detailed as follows:

• (1): Nth-child (even/odd): can select elements under each parent element with an index value of even (odd) number

• (2): Nth-child (2): can select elements under each parent element with an index value of 2

• (3): Nth-child (3n): An element that can select a multiple of 3 for the index value under each parent element

• (3): Nth-child (3n + 1): The element that can select the index value under each parent element is 3n + 1