浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法

让我来详细讲解一下“浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法”的完整攻略。

jQuery中的this和$(this)

在jQuery中，this指当前被选中的DOM元素，它是一个原生的DOM对象。而$(this)实际上是将这个DOM对象包装成了一个jQuery对象，这个对象可以使用jQuery的方法，比如find()、css()等。

下面是一个例子：

<div id="box" class="container">
  <button>点击我</button>
</div>

$('#box').on('click', function() {
  console.log(this); // 输出 <div id="box" class="container">
  console.log($(this)); // 输出 jQuery(div#box.container)
})

由于this是一个原生的DOM对象，它并不具备jQuery对象的方法，所以如果要使用jQuery的方法，就必须先将它包装成一个jQuery对象。

获取$(this)子元素对象的方法

要获取$(this)的子元素对象，可以使用jQuery的find()方法。find()用于查找当前元素内部的子元素，可以指定查找的元素，也可以通过选择器来指定查找的子元素。

例如：

<div id="box" class="container">
  <button>点击我</button>
</div>

$('#box').on('click', function() {
  var $button = $(this).find('button'); // 获取子元素对象
  console.log($button); // 输出 jQuery(button)
})

在上面的示例中，使用了find()方法来获取$(this)的子元素对象，可以看到，$button输出了一个jQuery对象，它包含了查找的子元素button。

除了find()方法，还可以使用children()方法来获取$(this)的子元素对象。不同的是，children()只会查找直接子元素，而不会进一步查找子元素的子元素。

例如：

<div id="box" class="container">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

$('#box').on('click', function() {
  var $ul = $(this).children('ul'); // 获取子元素对象
  console.log($ul); // 输出 jQuery(ul, ul)
})

在上面的示例中，使用了children()方法来获取$(this)的子元素对象，可以看到，$ul输出了一个jQuery对象，它包含了查找的两个直接子元素ul。