Mutual translation of jquery objects and Dom objects _jquery

Source: Internet
Author: User

Mutual conversion of jquery objects and Dom objects

Before discussing the mutual conversion of jquery objects and Dom objects, agree on the style of defining variables. If you get a jquery object, precede the variable with $, such as

var $varible = jquery object;

If you get a DOM object, it is defined as follows:

var varible = DOM object;

The 1.jquery object is turned into a DOM object:

jquery objects cannot use methods in the DOM, but if you are unfamiliar with the methods provided by the JQuery object, or if you do not have the methods that jquery wants to encapsulate, you have to use the DOM object, that is, "index" and Get[index.

(1) The JQuery object is an array object, and the corresponding DOM object can be obtained by means of "index".

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 Object
  var cr = $CR [1];  Dom object
  var ct = $cr. Get (0)  //The second way to convert to a DOM object
  cr.innerhtml = "  You"///detect if conversion is successful, you can use the DOM method The output is changed to the second my
  ct.innerhtml = ' fuck '  /output result the first I changed to fuck
</script>
</body>

(2). The DOM object is converted to a jquery object:

For a DOM object, you need to wrap the DOM object in $ () to get a jquery object, in the form of $ (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 object
  var $CR = $ (CR);   jquery object
  $cr. EQ (0). (" Fuck "); If the conversion succeeds, you can use the JQuery method to output the result to the second I fuck
  $cr. EQ (1). HTML ("you");//output results for my
</script>
</body>

After conversion, you can use the JQuery method arbitrarily.

The above methods allow you to arbitrarily convert jquery objects and Dom objects to each other.

Finally, again, DOM objects can use DOM methods, and jquery objects cannot use methods in the DOM, but the jquery object provides a better set of tools for manipulating the DOM.

Thank you for reading, I hope to help you, thank you for your support for this site!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.