How to convert dom object into jquery object-Front-end Q&A-php.cn

How to convert dom object into jquery object

青灯夜游

Release： 2022-03-11 15:32:41

Original

4667 people have browsed it

How to convert a dom object into a jquery object: Just use "$()" to wrap the DOM object, the syntax is "$(DOM object)"; after conversion, you can use jQuery arbitrarily method.

How to convert dom object into jquery object

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

DOM object

DOM (Document Object Model, Document Object Model), each DOM can be represented as a tree. Let’s look at a simple example first: The code is as follows

// ...省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
// ...省略其他代码

Copy after login

describes the above HTML structure as a DOM tree:

How to convert dom object into jquery object

The nodes in this DOM tree are Is a DOM element node. You can get the element node through getElementByTagName or getElementById in JS. The DOM element obtained like this is a DOM object.

jQuery object

jQuery object is an object generated by wrapping a DOM object through jQuery.

jQuery objects are unique to jQuery. If an object is a jQuery object, then you can use the methods in jQuery. Any method of the DOM object cannot be used in the jQuery object, and the same DOM object cannot use the methods in jQuery.

How to convert a dom object into a jquery object

For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object . The method is $(DOM object). After conversion, you can use any method in jQuery.

Note: The jQuery objects commonly used are manufactured through the $() function. The $() function is a manufacturing factory for jQuery objects.

The jquery code is as follows:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-1.10.2.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 any jquery method.

Through the above methods, jquery objects and DOM object web page effects can be converted to each other at will.

Finally, I emphasize 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.

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to convert dom object into jquery object. For more information, please follow other related articles on the PHP Chinese website!