First, the mainstream JavaScript library
In addition to JQuery, there are Prototype, Dojo, YUI, ExtJS, MooTools, of which Prototype older, more loosely structured design, ExtJS interface is great but need commercial authorization, MooTools is also worth learning a JS library, Dojo There are some special functions, you can also consider learning, YUI's documentation is very complete, grammar is also standardized. For me personally, the selectivity is jQuery > MooTools > ExtJS > Dojo > YUI > Prototype.
The slogan for JQuery is "write Less,do more." It has the advantage of using chained operations and implicit iterations to greatly reduce the amount of code, stripping behavior from HTML code for division of labor and post-maintenance, plus a powerful selector.
jquery's interface library has a jquery UI and easy UI, and after learning jquery you can consider continuing to learn these two.
Second, the good thing, the first to benefit its device
Choose an IDE that is easy to learn jquery, and you can use Dreamweaver 8, which has a plugin that intelligently prompts jquery to write, called Jquery_api. MXP, via Dreamwearver's "commands"--"extended management" to installation is used. Dreamweaver 8 was the last version of Macromedia, and then Macromedia company was acquired by Adobe, and Dreamweaver began to command from CS3, with the latest CS6 version built to support the JQuery smart tip.
Second, not necessarily to download the JQuery library to the local, you can directly use the following two online link address:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/ 2.1.0/jquery.min.jshttp://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.jshttp://ajax.microsoft.com/ajax/ Jquery/jquery-2.1.0.min.js
As can be seen from the above, JQuery offers 1.x and 2.x versions, the difference being that the 2.x version no longer supports IE 6/7/8, so the volume is smaller. However, given that the default version of IE on XP and Win8 is still in this range, it is recommended to use a 1.x library, and the JQuery team has declared that it will support both 1.x and 2.x upgrades in the future.
Third, the first jQuery code
<HTML><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></Script></Head><Body> <Script>$ (document). Ready (function(){ $("Body"). HTML ("hello,world!"); }); </Script></Body></HTML>
Here are two questions to mention: First, the previous wording is <script type= "Text/javascript" ></script>, but in HTML5 JavaScript is already the default script, do not have to write, and the second is about $ ( Document). Ready (function () {...}); The meaning of the function is to wait for all documents to be loaded and then execute the code inside. It can also be written in the following form: $ (function () {...});
Iv. about DOM objects and JQuery objects
Simply and rudely, the jquery object is a collection of DOM objects, and the nature of jquery's implicit iteration is built on that basis. A simple example is as follows:
<HTML><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <Scripttype= "Text/javascript"src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></Script> <Scripttype= "Text/javascript"> $(function(){ varDom_obj=document.getElementById ('ID'); varJquery_obj= $('#id'); alert (dom_obj.innerhtml); Alert (jquery_obj.html ()); Alert (jquery_obj[0].innerhtml); //Convert a jquery object into a DOM objectAlert ($ (dom_obj). html ()); //Convert a DOM object to a jquery object }); </Script></Head><Body> <spanID= ' id '>hello,world!</span></Body></HTML>
The above four alert statements output are "hello,world!", Visible DOM objects and JQuery objects can be converted to each other, so that when needed, we can combine the two to quickly complete some functions. It should be noted that code that uses if (document.getElementById (' id ')) {} can determine whether the element exists, and if ($ (' #id ')) {}, it will never return an object, and when the element does not exist, It's just a collection object of length 0, so it's either converted to a DOM object or judged by the length of its jquery object.
V. References
The official documentation is very detailed: http://api.jquery.com/