使用jQuery与JavaScript选择元素的浏览器差异及$(this)和this的区别

• this 是JavaScript原生上下文对象，在DOM事件触发场景下指向触发事件的原生DOM元素，可以直接调用所有原生DOM API，比如读取this.id、this.value，调用this.classList.add('active')等。
• $(this) 是jQuery对原生this对象的包装结果，属于jQuery实例对象，仅可调用jQuery封装的方法，比如$(this).attr('id')、$(this).val()、$(this).addClass('active')，支持jQuery链式调用特性。

代码示例 #

// 场景：给按钮绑定点击事件
$('#testBtn').click(function() {
  // 直接用this调用原生DOM属性
  console.log('按钮ID：', this.id)
  // 用$(this)调用jQuery方法
  console.log('按钮自定义属性：', $(this).data('custom'))

  // 错误用法：两者API不通用
  // console.log(this.val()) 报错：原生DOM无val方法
  // console.log($(this).id) 报错：jQuery实例不会直接暴露原生DOM属性
  // 正确的互转写法：从jQuery实例取原生DOM
  console.log($(this)[0].id) // 等效于this.id
})

使用建议 #

如果仅需要操作原生DOM支持的属性和方法，直接用this性能更高，无需额外包装；如果需要使用jQuery的兼容方法、动画、链式调用等特性，再使用$(this)。

参考示意图：

内容的提问来源于stack exchange，提问作者Voon Tao Tan