The difference ...LOGIN

The difference between jQuery juery and native js

Earlier we learned some basics of js. Let’s look at the following jquery

jquery object and DOM object

jQuery object and DOM object are different. Let’s use an example below. Let’s explain the difference between the two

First, use native code. The js native code is as follows:

var div = document.getElementById('dv');
div.innerHTML ="php Chinese website";

In the above code, the DOM element obtained through the document.getElementById("dv") method provided by the native DOM model is a DOM object, and then the text is processed through innerHTML.

Let’s look at the jquery code

$(function(){

var div = $('#dv');

div.html ("php Chinese website");

});

Through the $('#dv') method, you will get a jQuery object of $p, where $p is an array-like object. This object contains the information of the DOM object, and then encapsulates many operation methods. It calls its own methods html and css, and the effect obtained is consistent with the standard JavaScript processing result.

Comparison between operating DOM through standard JavaScript and operating DOM through jQuyer

1. The object wrapped by the jQuery method is an array-like object. It is completely different from the DOM object. The only similarity is that they can both operate the DOM.

2. Processing DOM operations through jQuery allows developers to focus more on the development of business logic, without the need for us to know specifically which DOM nodes have those methods, nor do we need to care about the compatibility issues of different browsers , we develop through the API provided by jQuery, and the code will be more streamlined.


Next Section
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery</title> <style type="text/css"> #dv{ width:150px; height:150px; border:1px solid red; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> // window.onload=function(){ // var div = document.getElementById('dv'); // div.innerHTML="php 中文网"; // } $(function(){ var div = $('#dv'); div.html("php中文网"); }); </script> </head> <body> <div id="dv"></div> </body> </html>
submitReset Code
ChapterCourseware