(1) JQuery Foundation core

First, the knowledge point précis-writers:

1, jquery compatibility is very good, do not need to consider the compatibility of different browsers.


2, the mainstream JavaScript library: YUI, Prototype, Mootools, Dojo, ExtJS (Load page card, pay).


3, JQuery2.0 no longer support IE6/7/8.


4, completely does not support IE6: NetEase Cloud classroom.


5, "$" is a jquery object, jquery-specific object.


6. Using the "$" symbol and "jQuery" are identical.


7, $ (function () {

Alert ($);//Returns the interior of a jquery object
Alert ($ ());//Return jquery Object
Alert ($ (' #box '));//Return jquery Object
Alert ($ (' #box '). CSS (' Color ', ' red ');//Return jquery Object
$ (' #box '). CSS (' Color ', ' red '). CSS (' font-size ', ' 200px '). CSS (' font-weight ', ' blod ');
Now that you can return a jquery object, you can continue to add CSS styles after a CSS (), as shown in the previous line
});


8. Why use $ (function () {}); This code for the end-to-end package? The reason is that our jquery library file was loaded before the BODY element, and we had to wait for all DOM elements to load and delay support for DOM operations, otherwise it would not be available.


9, $ (document). Ready (function () {}); shorthand is $ (function () {}); Window.onload is not normally used.


10, if there are other libraries after the introduction of some symbolic conflicts, such as a B library also has the $ symbol, then we can put the jquery object's $ (that is, jquery object) variable name:
var $$=jquery;
Another approach is to:
Jquery.noconflict ();//Remove All permissions
After removing the $ ownership, the original $ get method is invalid, then you can write the following sentence:
var $$=jquery;//then alert ($$ (' #box '). Get (0));

Second, 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");}); *//*$ (function () {$ (' #box '). CSS (' Color ', ' red ');//Adds a inline CSS style}), *//*jquery (function () {$ (' #box '). CSS (' Color ', ' Red ');//Adds a inline CSS style}), *//*$ (function () {alert ($);//Returns the internal alert ($ ()) of the JQuery object,//Returns the JQuery Object Alert ($ (' #box '));// Returns the JQuery object Alert ($ (' #box '). CSS (' Color ', ' red '));//returns jquery object $ (' #box '). CSS (' Color ', ' red '). CSS (' font-size ', ' 200px ') ). CSS (' font-weight ', ' Blod ');}); *//*window.onload=function () {$ (' #box '). CSS (' Color ', ' red ');}; *//* *//Print only 2, do not print 1, because the previous value is overwritten *  * window.onload=function () {alert (1);}; Window.onload=function () {alert (2);}; *//*//here first print 1 and then Print 2, without being overwritten with $ (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));//Gets the native DOM object, gets the first element with the ID of Box alert ($ (document.getElementById (' box '))); Returns the JQuery object, the interchange between the JQuery object and the DOM object});


(1) JQuery Foundation core