1. DOM object: The object returned by using methods in JavaScript to retrieve elements from the page is the DOM object.
  2. JQuery objects: jQuery objects are the objects that are returned using jQuery methods to retrieve elements from the page.
  3. JQuery objects are essentially wrapped collections of DOM objects (pseudo-arrays)
  4. Methods for DOM objects and jQuery objects cannot be mixed.
  • Js object objects cannot call methods of JQ objects
  • Jq object and JS object connection (JQ object is actually a collection of JS objects, pseudo-array, which stores a large number of JS objects) (macro)
  • Whether jquery objects can call methods on DOM objects
  • DOM cannot call methods on jQuery objects: Why: Because they are two different objects
  • The DOM object calls the methods of the jQuery object. You need to convert DOM objects into jQuery objects.

conversion

  • DOM object to jQuery object
var $obj = $(domObj);
// $(document).ready(function(){}); This is a typical DOM object to jQuery object
Copy the code
  • JQuery object to DOM object:
varLi = $(" li ");// The first method (recommended)
$li[0]
// The second method
$li.get(0)
Copy the code

Case study:

<! DOCTYPE html><html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
</head>
<body>
<ul>
  <li id="cloth">clothes</li>
  <li>The trousers</li>
  <li>Boxer shorts</li>
  <li>socks</li>
</ul>

<script src="Jquery - 1.12.4. Js"></script>
<script>
  
  $(function () {
    
    //1. What is a DOM object (JS object): The element obtained using JS is a JS object (DOM object)
    //var cloth = document.getElementById("cloth");
    //cloth.style.backgroundColor = "pink";
    
    //2. What is a Jq object: elements obtained using JQ are jq objects
    //var $li = $("li");
    //console.log($li);
    $li.text(" I changed the content ");
    
    
    //3. The difference between jq and JS objects
    //js objects cannot call methods of Jq objects
    //var cloth = document.getElementById("cloth");
    / / cloth. The text (" ha ha ");
    
    // the connection between jq object and JS object (jq object is actually a collection of JS objects, pseudo-array, which stores a large number of JS objects)
    
    
    
    // Jquery objects can call DOM object methods
    //var $li = $("li");
    //$li[0].setAttribute("name","hehe");
    
    //DOM cannot call jQuery object methods: Why: Because they are two different objects
    // The DOM object calls the jQuery object's methods. You need to convert DOM objects into jQuery objects.
    var cloth = document.getElementById("cloth");
    
    //DOM objects become jQuery objects
    / / $(cloth), text (" ha ha ");
    
    // How to convert jQuery objects into DOM objects
    var $li = $("li");
    $li[1].style.backgroundColor = "red";
    $li.get(2).style.backgroundColor = "yellow";
    
    
    
    
    
    //1. What is a DOM object
    //2. JQuery object: jQ object
    //3. Differences and connections
    //4. Difference: Methods of js objects and Jq objects cannot be mixed
    Contact: / / 5.
      // DOM--> jQuery $()
      // jQuery-- DOM $li[0] $li.get(0)
  });
 
  
</script>

</body>
</html>
Copy the code

JQuery has a Dom object in it. JQuery is a pseudo-array, but it has its own methods.

conclusion

  1. What is a DOM object: a DOM object when an object is retrieved using JS
  2. JQuery object: jQ object when an object is obtained using JQ
  3. Distinction and Connection
  4. Difference: Methods for JS objects and JQ objects cannot be mixed
  5. $li.get(0) $li.get(0) $li.get(0) $li.get(0)