PHP Course---The difference between JavaScript and jquery

Source: Internet
Author: User
Tags jquery library

jquery can greatly simplify the writing of JavaScript programs, I recently took the time to understand the jquery, I started the process of notes and share with you, I hope to be helpful to everyone. To use jquery, first add a reference to the jquery library in front of the HTML code, such as: <script language= "JavaScript" src= "/js/jquery.min.js" ></script > Library files can be either local or directly use the CDN of a well-known company, the advantage is that these large companies are more popular CDN, users visit your site before it is likely to visit other sites have been cached in the browser , so it can speed up the opening of the site. Another benefit is obvious, saving the traffic bandwidth of the website.

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

The official http://code.jquery.com/jquery-1.6.min.js of jquery

I've got my own subdomain, and I'm actually jumping to Google's Cdn.

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

JS is the abbreviation for a language JavaScript.
jquery is a framework that uses JS encapsulation.
JS is like noodles (raw), while jquery is like instant noodles, you can eat it. More convenient.
The reasons are:
In the use of JS, some of the syntax is more troublesome. jquery put that syntax, integration, encapsulation. Then the user becomes simple. The original document.getElementById (ID); Using jquery is $ (ID). There are many effects that can be achieved with a single sentence. For example, a picture fades in and out. Just need a code and so on. jquery also considers browser compatibility issues.

The specific wording of the jquery code and the native Javascript notation differ in the following common operations:

1 Positioning Elements
Js
document.getElementById ("abc")

Jquery
$ ("#abc") Location by ID
$ (". ABC") through class positioning
$ ("div") positioned by tag

It is important to note that the result of JS return is this element, jquery returns the result is a JS object. The following example assumes that element ABC has been positioned.

2 Changing the contents of an element
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 ();
Toggle between show and hide (2012.4.21 update)

4 getting Focus

JS and jquery are the same, both Abc.focus ();

5 Assigning a value to a form
Js
Abc.value = "Test";
Jquery
Abc.val ("test");

6 Getting the value of a form
Js
alert (Abc.value);
Jquery
Alert (Abc.val ());

7 setting elements are not available
Js
Abc.disabled = true;
Jquery
Abc.attr ("Disabled", true);

8 Modifying 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 objects themselves, handle browser compatibility and other messy problems, omit 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 the JSON is returned, the following processing
result = eval (' (' + result + ') ');
alert (result);
}

10 Determine if check box is selected
Jquery
if (abc.attr ("checked") = = "Checked")

Note: Online said. attr ("checked") = = true is not actually used, the above test can be used

PHP Course---The difference between JavaScript and jquery (GO)

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.