JQuery Learning Path (1): Intro

Source: Internet
Author: User
Tags jquery library mootools

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/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.