$（this）变成js怎么写

在jQuery中，$(this)通常被用来表示当前元素的jQuery对象。如果你想将其转换成纯JavaScript，那么你可以使用this来获取当前元素，并使用document.querySelector或document.getElementById等方法来选择元素，或者直接使用this作为DOM元素。

以下是一些将$(this)转换成纯JavaScript的常见方法：

一、使用addEventListener来绑定事件

在jQuery中，你可能会这样写：

$(document).ready(function(){

  $('button').click(function(){
    $(this).hide();
  });
});

等价的纯JavaScript写法是：

document.addEventListener('DOMContentLoaded', function() {

  var buttons = document.querySelectorAll('button');
  buttons.forEach(function(button) {
    button.addEventListener('click', function() {
      this.style.display = 'none';
    });
  });
});

二、获取属性值

在jQuery中，你可能会这样获取属性值：

var id = $(this).attr('id');

等价的纯JavaScript写法是：

var id = this.getAttribute('id');

三、修改CSS样式

在jQuery中，你可能会这样修改CSS样式：

$(this).css('color', 'red');

等价的纯JavaScript写法是：

this.style.color = 'red';

四、获取和设置元素内容

在jQuery中，你可能会这样获取和设置元素内容：

var text = $(this).text();

$(this).text('new text');

等价的纯JavaScript写法是：

var text = this.textContent;

this.textContent = 'new text';

五、遍历和操作多个元素

在jQuery中，你可能会这样遍历和操作多个元素：

$('li').each(function() {

  $(this).css('color', 'blue');
});

等价的纯JavaScript写法是：

var listItems = document.querySelectorAll('li');

listItems.forEach(function(item) {
  item.style.color = 'blue';
});

六、显示和隐藏元素

在jQuery中，你可能会这样显示和隐藏元素：

$(this).show();

$(this).hide();

等价的纯JavaScript写法是：

this.style.display = '';

this.style.display = 'none';

通过以上方法，你可以将$(this)在jQuery中的使用场景转化为纯JavaScript的等价代码。这样做不仅可以减少对外部库的依赖，还能提高代码的可读性和性能。

相关问答FAQs：

1. 如何将$（this）转换为JavaScript代码？

• 问题描述：如何使用JavaScript替代$（this）？
• 回答：在JavaScript中，可以通过使用document.querySelector()或document.getElementById()来替代$（this）。这些方法可以帮助您选择和操作当前元素。

2. 如何在JavaScript中代替$（this）？

• 问题描述：有没有办法在JavaScript中不使用$（this）来引用当前元素？
• 回答：是的，您可以使用event.target来引用当前元素。当事件被触发时，event.target会返回触发事件的元素，您可以使用它来操作当前元素。

3. 如何使用原生JavaScript实现与$（this）相同的功能？

• 问题描述：我想要使用原生JavaScript来实现与$（this）相同的功能，有什么方法吗？
• 回答：您可以使用addEventListener()方法来监听事件，并在事件处理程序中使用event.target来引用当前元素。这样可以实现与$（this）相同的效果。另外，您还可以使用classList属性来操作当前元素的类名，以及使用setAttribute()和getAttribute()方法来操作当前元素的属性。