jQuery有许多方便的方法,这正是我们希望使用的东西。但是jQuery方法仅限于jQuery对象,所以我们在使用一个jQuery方法时,一定要注意自己是否获取到的是jQuery对象。
而我们熟知的使用jQuery选择器获取的对象,当然是jQuery对象。如果想在一个事件方法的回调函数中选择触发这个事件的jQuery对象,就要用
$(this)
来选中。
当然了直接使用
this
得到的是dom对象,那就只能使用js中的dom对象的方法。
看一段代码:
<div class=\'sortList\'><ul><li v-for=\"item in list\"><i v-bind:class=\"[iconfont,iconName]\"></i>{{item.sort}}</li></ul></div>
这里面明显有多个li元素。如果想获取触发了事件的某个li元素的jQuery对象就需要用以下方法:
$(\'.sortList>ul>li\').mouseover(function(){console.log($(this))})
这一段代码的意思是获取触发了mouseover事件的li元素,并输出到控制台上。
顺便补充一下,这里的
$(\'.sortList>ul>li\')
获取的是所有满足选择器的li元素的jQuery对象,而回调函数里面的
$(this)
只是触发了mouseover事件的那个li元素的jQuery对象。
小结:在前端编写中会经常碰到对触发某个事件的元素单独编写一些代码的情况,所以要善用$(this)。