A Brief Discussion on the Difference Between eq() in jQuery and element.[] in DOM

As shown below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Title</title>
</head>
<body>
  <a class="a">#1</a>
  <a class="a">#2</a>
  <a class="a">#3</a>
  <script src="js/jq.js"></script>
  <script>
    var a = $('.a') ;
    var b = $('.a').eq(1) ;
    var c = $('.a')[1);
    var d = $('.a').eq(1)[0];
    var f = $('.a')[0].eq(1);
  </script>
</body>
</html>

$('.a')　 // Selected3a, all are jq objects (can use jq's properties and methods).

$('.a').eq(1) // The second a selected is a jq object (cannot use dom properties and methods, can use jq's properties and methods).

$('.a')[1]　 // The second a selected is a dom object (can use dom properties, methods, and cannot use jq properties and methods).

$('.a').eq(1)[0]　 // The second a is selected, and it is converted to all dom objects (can use dom properties, methods, and cannot use jq properties and methods).

-----As can be seen, jQuery wraps the js again, jq properties can strip off the packaging to call dom properties, while dom cannot call jq's properties and methods.

$('.a')[0].eq(1) // Error, because the dom object cannot use jq methods, eq() is a jq method.

That's all for the discussion of the difference between eq() in jQuery and element.[] in DOM brought to you by the editor. Hope everyone will support and cheer for the tutorial~

Basic Tutorial