Get started quickly with jQuery: Detailed analysis of the difference between writing jQuery and writing JS directly_jquery

To use jQuery, you must first add a reference to the jQuery library at the beginning of the HTML code, such as:

The library file can be placed locally, or you can directly use the CDN of a well-known company. The advantage is that the CDN of these large companies is more popular. Before users visit your website, they are likely to have been cached in the browser when visiting other websites. , so it can speed up the website opening speed. Another benefit is obvious, saving website traffic bandwidth.

The difference between the specific way of writing jQuery code and the way of writing native Javascript when performing common operations is as follows:

1 Positioning element
JS
document.getElementById("abc")

jQuery
$("#abc") Positioned by id
$(".abc") Positioned by class
$("div") Positioned 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. The following example assumes that element abc has been positioned.

2 Change the content of the 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();
//Switch between showing and hiding (updated on 2012.4.21)

4 Get focus
JS and jQuery are the same, both are abc.focus();

5 Assign value to the form
JS
abc.value = "test";
jQuery
abc.val("test");

6 Get the value of the form
JS
alert(abc.value);
jQuery
alert(abc.val());

7 Setting element is not available
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);

8 Modify element style
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 by yourself, handle browser compatibility and other messy issues by yourself, omit it
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, proceed as follows
//result = eval('(' result ')');
//alert(result);
}

10 Determine whether the check box is checked
jQuery
if(abc.attr("checked") == "checked")