The function and comparison of JavaScript library
To simplify the development of JavaScript, some Javsscript libraries were born. The JavaScript library encapsulates a number of predefined objects and utility functions. Helps users build rich-client pages with Web2.0 features that are highly difficult to interact with, and is compatible with major browsers
the current popular JavaScript libraries are:
Introduction to JQuery
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
......
Jquery:helloworld
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
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:
(1) The JQuery object is an array object, and the corresponding DOM object can be obtained by the method [index].
(2) using the Get (index) method in JQuery to obtain the corresponding DOM object
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 :
A Concise formulation
Perfect event-handling mechanism
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).
Basic Selector Example
Change the background color of the element with ID one to # BBFFAA
Change the background color of all elements of Class A mini to # BBFFAA
Change the background color of all elements named <div> to #bbffaa
Change the background color of all elements to #bbffaa
Change the background color of all <span> elements and ID two to # BBFFAA
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: (the "prev ~ div") selector can only select sibling elements behind the "# prev" element; In JQuery, the method siblings () is independent of the front and back position, as long as the sibling node can select
Hierarchy Selector Example
Change the background color of all <div> in <body> to # BBFFAA
Change <body> my wife <div> background color is # BBFFAA
Change the next <div> background color of ID one to # BBFFAA
Change the background color of all the sibling <div> elements behind the element with ID two to # BBFFAA
Change the element with ID two the background color of all <div> sibling elements is # BBFFAA
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
