美文网首页web前端
JQuery this和$(this)的区别及获取$(this)

JQuery this和$(this)的区别及获取$(this)

作者: Setsuna_F_Seiei | 来源:发表于2019-08-29 17:01 被阅读0次

    // this其实是一个Html 元素。

    // $this 只是个变量名,加$是为说明其是个jquery对象。

    // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。

    相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?

           首先来看看JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。

           那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码:

    $("#desktop a img").each(function(index){

     alert($(this));

                alert(this);

    }

    那么,这时候可以看出来:

    alert($(this));  弹出的结果是[object Object ]

    alert(this);        弹出来的是[object HTMLImageElement]

    也就是说,后者返回的是一个html对象(本例中是遍历HTML的img对象,所以为HTMLImageElement)。

    很多人在使用jquery的时候,经常this.attr('src');   这时会报错“对象不支持此属性或方法”,这又是为什么呢?其实看明白上面的例子,就知道错在哪里了:很简单,this操作的是HTML对象,那么,HTML对象中怎么会有val()方法了,所以,在使用中,我们不能直接用this来直接调用jquery的方法或者属性。

    2.获取$(this)子节点对象的方法:find(element)

    明白了$(this)和this的区别,再来看看这个例子:(假设,我的页面中a标签包含img,并含有src属性),当我在遍历的时候,想取到$(this)下img中src的地址

          $("#desktop a ").each(function(index){

             var imgurl=$(this).find('img').attr('src');

             alert(imgurl);

            }

    其中 .find(element) 是返回一个用于匹配元素的DOM元素,这样就可以取到想要的src地址了。

    其中:

    1.each()方法

    URL:https://www.w3school.com.cn/jquery/traversing_each.asp

    each() 方法规定为每个匹配元素规定运行的函数。

    提示:返回 false 可用于及早停止循环。

    2.eq()方法

    URL:https://www.runoob.com/jquery/traversing-eq.html

    eq() 方法返回带有被选元素的指定索引号的元素。

    索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。

    3.find()方法

    URL:https://www.w3school.com.cn/jquery/traversing_find.asp

    如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。

    4.

    $('li[class="item-ii"]').find('li').css('background-color', 'red'); = $('li[class=item-ii]') = $('li.item-ii')

    $('li[id="3"]') = $('li[id=3]') = $('li#3') 

    $('li[type=text]') = $('li[type="text"]')

    相关文章

      网友评论

        本文标题:JQuery this和$(this)的区别及获取$(this)

        本文链接:https://www.haomeiwen.com/subject/ruaiectx.html