如何在jquery中正确使用$（this）？

Question

我正在尝试将文字大小调整为父框的大小，有人可以向我解释为什么这样做有效：

$('.box').css('font-size',$('.box').height());

这不起作用：

$('.box').css('font-size',$(this).height());

顺便说一句，我正在使用带有phonegap的jquery mobile。

Answer 1

这不起作用，因为你正在调用css的{​​{1}}函数并传递$（this）.height（）的值，而不是对它自己的引用。在这种情况下，$('.box')仍然是包含该行代码的函数的上下文。尝试这样的事情来实现你想要的：

this

Answer 2

正如您从jQuery docs所见：

$('.box').css('font-size',function () {
   return $(this).height() + "px";
});

传递函数的上下文绑定到调用css()方法的对象。这就是为什么this将被分配给具有类dom的HTML元素。

Answer 3

示例：

HTML：

 <input type="button" class="box" id="someID" value="Click this box" />

jQuery的：

$('.box').click(function() {

    var test = $(this).attr('id');
    alert('Here is the ID for the element on which you clicked: ' + test);

});

当您捕获事件时，该事件与页面上的元素相关联。在这种情况下，元素是按钮类型的输入字段，被捕获的事件是'click'事件。

click()事件函数中的代码可以将触发事件的元素称为$(this)。

如果要引用DOM中的任何其他元素，则必须指定元素。