Differences between js and jQuery

JQuery can greatly simplify the compilation of Javascript programs. I recently spent some time learning about jQuery and shared my notes during the Getting Started process. I hope it will be helpful to you.

To use jQuery, you must first Add a reference to the jQuery Library at the beginning of the HTML code, for example:

<Script language = "javascript" src = "/js/jquery. min. js"> </script>

Library files can be stored locally or directly using the CDN of well-known companies. The advantage is that the CDN of these large companies is quite popular, before a user visits your website, it is likely that the website has been cached in the browser when accessing other websites, which can speed up website opening. Another advantage is obvious, saving the website traffic bandwidth.

Provided by Google

Http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

JQuery official

Http://code.jquery.com/jquery-1.6.min.js

I made a subdomain name myself, and actually jumped to Google's CDN

Http://cdn.akcms.com/js/jquery.js

The differences between jQuery code writing and native Javascript writing are as follows:

1 positioning Element 
JS
Document. getElementById ("abc ")

JQuery
$ ("# Abc") locate by id
$ (". Abc") locates through class
$ ("Div") locate by tag

It should be noted that the result returned by JS is this element, and the result returned by jQuery is a JS object. In the following example, we assume that the element abc has been located.

2. Change the Element Content 
JS
Abc. innerHTML = "test ";
JQuery
Abc.html ("test ");

3. Show Hidden elements 
JS
Abc. style. display = "none ";
Abc. style. display = "block ";

JQuery
Abc. hide ();
Abc. show ();

Abc. toggle ();
// Switch between display and hide (updated on 2012.4.21)

4. Focus 

JS and jQuery are the same, both of which are abc. focus ();

5. assign values to the form 
JS
Abc. value = "test ";
JQuery
Abc. val ("test ");

6. Obtain the form value. 
JS
Alert (abc. value );
JQuery
Alert (abc. val ());

7. The setting element is unavailable. 
JS
Abc. disabled = true;
JQuery
Abc. attr ("disabled", true );

8. Modify element styles
JS
Abc. style. fontSize = size;
JQuery
Abc.css ('font-size', 20 );

JS
Abc. className = "test ";
JQuery
Abc. removeClass ();
Abc. addClass ("test ");

9 Ajax
JS
Create an object by yourself, and handle browser compatibility issues by yourself. Skip the table.
JQuery
$. Get ("abc. php? A = 1 & B = 2 ", recall );
Postvalue = "a = B & c = d & abc= 123 ";
$. Post ("abc. php", postvalue, recall );

Function recall (result ){
Alert (result );
// If json is returned, the processing is as follows:
// Result = eval ('+ result + ')');
// Alert (result );
}

10. Check whether the check box is selected.
JQuery
If (abc. attr ("checked") = "checked ")
Note: The. attr ("checked") = true on the internet is actually unavailable. It has been used in the previous test.