`
welcome66
  • 浏览: 400628 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery this和$(this)的区别及获取$(this)子元素对象的方法

阅读更多

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

相信很多刚接触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地址了。

分享到:
评论

相关推荐

    浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$...

    jQuery获取this当前对象子元素对象的方法

    总结一下,jQuery中获取`this`当前对象子元素对象的方法主要有两种:一是使用jQuery选择器,二是结合`this`和`children()`或`find()`方法。在实际应用中,根据场景选择合适的方法,可以更高效地操作DOM元素。希望这...

    jQuery实现获取元素索引值index的方法

    5. jQuery的索引方法:使用.index()方法获取当前选中按钮在同级元素中的索引值。 6. jQuery的CSS样式应用:通过CSS设置了按钮和盒子的样式,使得点击不同的按钮会切换对应盒子的可见状态和背景颜色。 7. jQuery的...

    jQuery 中$(this).index与$.each的使用指南

    在 jQuery 中,$(this) 常用于引用当前事件的元素对象,而 .index() 方法则用来获取这个元素在其同级元素中的位置索引(从0开始计数)。在上述内容中,$(this).index() 被应用于点击事件,当点击事件触发时,我们...

    jQuery方法大全

    - `$(img).attr("src","test.jpg")`和`$(img).attr("title", function() { return this.src })`:这些是分别给`<img>`元素添加或修改单一属性`src`和`title`的方法,后者使用一个函数返回当前元素的`src`属性值作为...

    jquery常用的方法

    - `each( callback )` - 遍历jQuery对象中的每个元素,`callback`是一个接收索引和元素作为参数的函数,`this`指向当前元素。 以上就是jQuery中一些常见的方法,它们构成了jQuery强大功能的基础,极大地简化了...

    jQuery常用方法jQuery常用方法

    - **children(expr)**: 获取所有匹配元素的直接子元素。 - **contains(str)**: 检查是否包含某个字符串。 - **end()**: 结束当前遍历链,返回到上一步的状态。 - **filter(expression)**: 从当前元素集合中筛选出...

    jQuery 选择方法及$(this)用法实例分析

    4. **上下文定位**:使用`find()`, `children()`, `contents()`, `next()`, `prev()`, `nextAll()`, `prevAll()`, `parent()`, `parents()`, `closest()`, `parentsUntil()` 等方法在特定元素的子元素、相邻元素或...

    jQuery 获取对象 定位子对象

    在jQuery中,获取和定位DOM对象是其核心功能之一,特别是对于子对象的选取和操作,使得开发者能够高效地操作页面元素。以下是一些关于jQuery获取对象和定位子对象的关键知识点: 1. **选择器(Selectors)**:...

    jQuery 文档操作方法

    本文将对 jQuery 文档操作方法进行详细的介绍,包括方法的语法、参数、返回值、使用场景和示例代码等。 addClass() 方法 addClass() 方法用于向匹配的元素添加指定的类名。该方法可以将一个或多个类名添加到元素上...

    jQuery 子级元素在父级元素内滚动

    在滚动事件的回调函数中,我们可以获取父元素和子元素的滚动位置以及它们的尺寸。然后,我们可以根据这些信息计算子元素需要的偏移量,确保它始终在视口内: ```javascript var parentScrollTop = $(this)....

    jquery获取array

    - **CSS 选择器**:除了 `[name='noread']` 这种基本的选择器外,jQuery 还支持多种复杂的选择器,如属性选择器、子元素选择器等。 - **事件处理**:可以利用 jQuery 提供的事件处理方法(如 `.click()`、`.change()...

    JQuery笔记JQuery笔记

    jQuery的一个关键特性是能够将DOM元素转化为jQuery对象,从而可以调用jQuery提供的丰富方法集。例如,可以通过`$("div")[0]`从DOM中选择一个`div`元素,并将其转化为jQuery对象,但要注意此时返回的是DOM元素,而非...

    js与jquery获取父元素,删除子元素的两种不同方法

    var obj=document.getElementById(“id”);得到的是dom对象,对该...(2).jquery方法 $(“#id”).each(function(){ $(this) 来获得对应的某一个元素}); 2.获取满足条件的元素的父元素 (1).js方法:var o=obj[i].pare

    Jquery常用方法.txt

    2. **获取子元素**: - `children(expr)` - **描述**:返回当前匹配元素集合的直接子元素。 3. **检查元素是否包含特定字符串**: - `contains(str)` - **描述**:检查元素的文本内容是否包含指定的字符串。 4. ...

    JQUERY 常用方法大全

    - **用途**:获取当前元素的直接子元素。 - **示例**: ```javascript $("div").children(".example"); ``` 3. **`.contains()`** - **用途**:检查一个DOM元素是否包含另一个DOM元素。 - **示例**: ```...

Global site tag (gtag.js) - Google Analytics