Detailed explanation of the difference between jquery code writing and native js writing

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>

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

The difference between jquery code writing and native js writing is as follows:

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

jQuery
$("#abc") Positioning by id
$(".abc") Positioning by class
$("div") Positioning 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

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. Set the element to be unavailable
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);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')'); 
//alert(result);
}

10. JudgmentCheck boxWhether it is selected
jQuery
if(abc.attr("checked") == "checked")

The above is the detailed content of Detailed explanation of the difference between jquery code writing and native js writing. For more information, please follow other related articles on the PHP Chinese website!