zoukankan      html  css  js  c++  java
  • JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别

    // 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地址了。

    ---------------------------------------------------------------------------------------------------------------

    this 与 $(this) 是不一样的对象
    this指针表示的是当前function中的context对象,

    在 jQuery 事件中:
    - this 表示的是当前事件发生的目标元素(DOM对象)
    - $(this) 表示将该元素封装为一个 jQuery 对象

    例如
    $( "p" ).bind() 中的 this 就是一个 p 元素,它是DOM对象,拥有的属性和方法都是DOM对象的属性和方法。
    $(this)则是将这个p元素封装为一个jQuery对象,从而可以使用jQuery定义的一些方法来访问DOM对象。
    $(this).text() 方法属于jQuery对象,作用是取得元素的文本内容,与之对应的DOM对象属性是 this.textContent
    同样,$(this).html() 是取得元素内的HTML内容,对应的是 this.innerHTML。
    而 this.nodeName 则没有对应的jQuery方法了。
  • 相关阅读:
    scrapy中selenium的应用
    Django的锁和事务
    redis
    【leetcode】187. Repeated DNA Sequences
    【leetcode】688. Knight Probability in Chessboard
    【leetcode】576. Out of Boundary Paths
    【leetcode】947. Most Stones Removed with Same Row or Column
    【leetcode】948. Bag of Tokens
    【leetcode】946. Validate Stack Sequences
    【leetcode】945. Minimum Increment to Make Array Unique
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/6266392.html
Copyright © 2011-2022 走看看