Any conversion between jquery objects and DOM objects

Any conversion between jquery objects and DOM objects_jquery

WBOY

Release： 2016-05-16 15:14:40

Original

1210 people have browsed it

What is a jQuery object?
---It is the object generated by wrapping the DOM object through jQuery. The jQuery object is unique to jQuery and can use methods in jQuery.
For example:
$("#test").html() means: get the html code in the element with ID test. Among them, html() is a method in jQuery
This code is equivalent to using DOM to implement the code:

document.getElementById("id").innerHTML;

Copy after login

Although jQuery objects are generated by wrapping DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery. If used indiscriminately, an error will be reported. For example: $("#test").innerHTML, document.getElementById("id").html() and other writing methods are wrong.
Another thing to note is that the jQuery object obtained by using #id as the selector and the DOM object obtained by document.getElementById("id") are not equivalent. Please see the conversion between the two below.
Since jQuery is different but also related, jQuery objects and DOM objects can also be converted to each other. Before converting the two, we first make a convention: if a jQuery object is obtained, then we add $ in front of the variable, such as: var $variab = jQuery object; if a DOM object is obtained, it is the same as usual. : var variab = DOM object; this convention is only for convenience of explanation and distinction, and is not stipulated in actual use.

Before discussing the mutual conversion between jquery objects and DOM objects, first agree on the style of defining variables. If you obtain a jquery object, add $ in front of the variable, for example

var $varible = jquery object;

If the DOM object is obtained, it is defined as follows:

var varible = DOM object;

1. Convert jquery object to DOM object:

Jquery objects cannot use methods in DOM, but if you are not familiar with the methods provided by jquery objects, or there are no methods that jquery wants to encapsulate, you have to use DOM objects, namely [index] and get[index].

(1) The jquery object is an array object, and the corresponding DOM object can be obtained through the [index] method.

The jquery code is as follows

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

Copy after login

(2).DOM object converted to jquery object:

For a DOM object, you only need to wrap the DOM object with $(), and then you can get a jquery object. The method is $(DOM object).

The jquery code is as follows:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

Copy after login

After conversion, you can use jquery methods arbitrarily.

Through the above methods, jquery objects and DOM objects can be converted to each other arbitrarily.

Finally, it is emphasized again that only DOM objects can use DOM methods. jquery objects cannot use methods in DOM, but jquery objects provide a more complete set of tools for operating DOM.

Hope you all will like this article.