(1) Basic JQuery core and basic jquery Core

(1) Basic JQuery core and basic jquery Core

I. Knowledge Point note:

1. JQuery has excellent compatibility and does not need to consider compatibility issues with different browsers.


2. Mainstream JavaScript libraries: YUI, Prototype, Mootools, Dojo, and ExtJS (page card loading and payment ).


3. JQuery2.0 does not support IE6/7/8 anymore.


4. IE6 is not supported at all: Netease cloud class.


5. "$" is a JQuery object, which is unique to JQuery.


6. The use of the "$" symbol and "jQuery" is constant.


7. $ (function (){

Alert ($); // returns the internal content of the jQuery object
Alert ($ (); // returns the JQuery object
Alert ($ ('# box'); // returns the JQuery object
Alert((('{box'}.css ('color', 'red'); // return the JQuery object
('{Box'}.css('color', 'red'}.css('font-size', '200px'}.css ('font-weight ', 'blod ');
// Since the jQuery object can be returned, the css style can be added after a css () object, as shown in the previous line.
});


8. Why $ (function () {}); is this code used for the first and last package? The reason is that our JQuery library file is loaded before the body element. We must wait for all DOM elements to be loaded and delay to support DOM operations. Otherwise, the file cannot be obtained.


9. $ (document). ready (function () {}); Abbreviation: $ (function () {}); Generally, window. onload is not used.


10. If there are other libraries that may cause some symbol conflicts, for example, a library B also contains the $ symbol, we can convert the $ (JQuery object) of the JQuery object) change the variable name:
Var $ = jQuery;
Another method is:
JQuery. noConflict (); // remove all $ Permissions
After removing $ ownership, the original $ get method is invalid. You can write the following sentence:
Var $ = jQuery; // then alert ($ ('# box'). get (0 ));

Ii. demo

Simple project structure:

Index. jsp:

<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 

Demo. js file:


/* $ (Function () {$ ('input '). click (function () {alert ("JQeury program") ;}); * // * functions (function({{}('{box'}.css ('color', 'red '); // Add a css style in the row}); * // * jquery(function({}('{box'}.css ('color', 'red'); // Add a css style in the row }); * // * $ (function () {alert ($); // The internal alert ($ () of the jQuery object is returned ()); // return the JQuery object alert ($ ('# box'); // return to the jqueryobject alert('{box'}.css ('color', 'red'); // returns ('font-westight ', 'blod') ;}); * // * specify your onload=function({}('{box'}.css ('color', 'red') ;}; * // ** // print only 2, do not print 1 because it overwrites the previous value ** window. onload = function () {alert (1) ;}; window. onload = function () {alert (2) ;}; * // print 1 first and then print 2, not overwrite $ (document ). ready (function () {alert (1) ;}); $ (document ). ready (function () {alert (2) ;}); */$ (function () {alert ($ ('# box ')); // returns the JQuery object alert (document. getElementById ('box'); // [object HTMLDivElement], native DOM object alert ($ ('# box '). get (0); // obtain the native dom object and obtain the first element alert ($ (document. getElementById ('box'); // returns the JQuery object, interchange between the Jquery object and the Dom object });