js原生态函数中使用jQuery中的 $(this)无效的解决方法

当我们在原生态js代码中想要使用jQuery中的选择器 $(this) 时，会发现 $(this) 不能正常工作，原因是 $(this) 是 jQuery 对象，原生 js 不知道该如何处理 jQuery 对象。但是我们可以使用一些实用技巧解决这个问题。

一、使用apply()或者call()方法
我们可以使用apply()或者call()方法，来改变函数内部的this指向，然后将 $(this) 作为参数传递给相应函数。

例如，在原生态js代码中，我们想要使用 jQuery 的 animate() 这个函数，可以通过以下方式来实现：

document.getElementById('test').addEventListener('click', function() {
    $(this).animate({
        width: '200px'
    }, 1000);
}.call(jQuery('#test')[0]));

其中，我们通过call()方法将事件函数中的this指向 jQuery 对象 $('#test')，然后 $(this) 就可以正常工作了。

二、使用箭头函数来解决问题
另一个解决方法是使用箭头函数，因为箭头函数本身不会改变this的指向，它会从上一级作用域中继承this的值。

例如，在原生态js代码中，我们想要改变某个 div 元素的背景颜色，可以通过以下方式来实现：

document.getElementById('test').addEventListener('click', () => {
    $(event.currentTarget).css('background-color', 'red');
});

其中，箭头函数的this指向上一级作用域中的this值，也就是 $(event.currentTarget)，这样就可以使用 jQuery 中的选择器 $(this) 了。

通过这两个方法，我们可以在原生态js代码中使用 jQuery 中的 $() 函数了，提高我们的开发效率。