jquery Quick Start: The difference between writing jquery and writing JS in detail _jquery

Source: Internet
Author: User
Tags jquery library

To use jquery, first precede the HTML code with a reference to the jquery library, such as:
<script language= "javascript" src= "/js/jquery.min.js" ></script>

Library files can be placed locally, you can directly use a well-known company CDN, the advantage is that these large companies CDN is more popular, users visit your site is likely to visit other sites have been cached in the browser, so can speed up the opening of the site. Another benefit is obvious, saving the bandwidth of the site's traffic.

The difference between the specifics of the jquery code and the native JavaScript notation is the following when performing common operations:

1 positioning elements
Js
document.getElementById ("abc")

Jquery
$ ("#abc") Positioning by ID
$ (". ABC") Positioning by class
$ ("div") positioning by label

Note that JS returns the result is this element, jquery returned the result is a JS object. The following example assumes that element ABC has been positioned.

2 Change the content of elements
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 display and hide (2012.4.21 update)

4 Gain focus
JS and jquery are the same, are all abc.focus ();

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

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

7 Set Element 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 your own objects, dealing with browser compatibility, such as a mess of 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 JSON is returned, the following is handled
result = eval (' (' + result + ') ');
alert (result);
}

10 Determines whether the check box selects
jQuery
if (abc.attr ("checked") = = "Checked")

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.