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方法了。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mybatis源码学习(三):MappedStatement的解析过程

我们之前介绍过MappedStatement表示的是XML中的一个SQL。类当中的很多字段都是SQL中对应的属性。我们先来了解一下这个类的属性: public final class MappedStatement {private String resource;private Configuration configuration;//sql的IDprivate String id;//…

sealed java_Java包isSealed()方法与示例

包类isSealed()方法isSealed()方法在java.lang包中可用。isSealed()方法用于检查此程序包是否密封。isSealed()方法是一种非静态方法,只能通过类对象访问,如果尝试使用类名称访问该方法,则会收到错误消息。isSealed()方法在密封包装时不会引发…

java enum分析

用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... 。现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法。 public enum Color { RED, GREEN,…

1176: C语言实验题――数组逆序

描述:输入10个整数存入一维数组&#xff0c;再按逆序重新存放后再输出。输入:输入包括一行。 10个以空格格开的整数输出:逆序的10个整数&#xff0c;整数以空格格开样例输入:1 3 5 9 7 6 8 2 4 0样例输出:0 4 2 8 6 7 9 5 3 1考点:数的交换代码: #include <stdio.h> int …

C# 二十年语法变迁之 C# 8参考

C# 二十年语法变迁之 C# 8参考自从 C# 于 2000 年推出以来&#xff0c;该语言的规模已经大大增加&#xff0c;我不确定任何人是否有可能在任何时候都对每一种语言特性都有深入的了解。因此&#xff0c;我想写一系列快速参考文章&#xff0c;总结自 C# 2.0 以来所有主要的新语言…

windows 提权 cve-2018-8897

windows 提权 cve-2018-8897影响范围&#xff1a;基本上是全版本具体影响范围看详情&#xff1a;https://portal.msrc.microsoft.co … isory/CVE-2018-8897http://www.o2oxy.cn/wp-content/uploads/2018/06/cve-2018-8897.rar转载于:https://blog.51cto.com/9861015/2126608

java servlet练习测试

步骤&#xff1a; 0、首先创建web project&#xff0c;工程名&#xff1a;test_servlet 1、编写Servlet&#xff0c;TestServlet.java文件内容&#xff1a; package com.ouyang.servlet;import java.io.IOException; import java.sql.Connection; import java.sql.DriverManage…

java 检测ip网速_java心跳测网速Demo

//心跳中可以放//自己瞎搞的&#xff0c;有人帮改进吗&#xff1f;package netTest;import java.io.BufferedReader;import java.io.InputStreamReader;import java.util.ArrayList;public class net_test_one {public static void main(String[] args) {try {String[] cmd ne…

简洁的 Bash Programming 技巧(三)

这是简洁的 Bash Programming 技巧系列的第三篇文章&#xff0c;这一系列的文章专门介绍 Bash 编程中一些简洁的技巧&#xff0c;帮助大家提高平时 Bash 编程的效率。有兴趣的同学可以回顾下之前的两篇文章&#xff08;一&#xff09;和续篇。 1. 替换语法${parameter/pattern/…

《ASP.NET Core 6框架揭秘》实例演示[19]:数据加解密与哈希

数据保护&#xff08;Data Protection&#xff09;框架旨在解决数据在传输与持久化存储过程中的一致性&#xff08;Integrity&#xff09;和机密性&#xff08;confidentiality&#xff09;问题&#xff0c;前者用于检验接收到的数据是否经过篡改&#xff0c;后者通过对原始的数…

java开发保险案例_Java实现双保险线程的示例代码

双保险线程&#xff0c;每次启动2个相同的线程&#xff0c;互相检测&#xff0c;避免线程死锁造成影响。两个线程都运行&#xff0c;但只有一个线程执行业务&#xff0c;但都会检测对方的时间戳 如果时间戳超过休眠时间3倍没有更新的话&#xff0c;则重新启动对方线程。例子&am…

如何在ABAP Netweaver和CloudFoundry里记录并查看日志

Netweaver 要记录日志需要有一个checkpoint group&#xff0c;可以自行创建也可以使用标准的。这里我重用标准的group&#xff1a;DEMO_CHECKPOINT_GROUP。 tcode SAAB&#xff0c;点Display <->Activate进入编辑模式&#xff0c;将Logpoints设置为"Log"&#…

TiDB 源码初探

作者: 申砾 本文档面向 TiDB 社区开发者&#xff0c;主要介绍 TiDB 的系统架构、代码结构以及执行流程。 目的是使得开发者阅读文档后&#xff0c;可以对 TiDB 项目有一个整体的了解&#xff0c;更好的参与进来。首先会介绍一下大体的结构以及 Golang 包的结构&#xff0c;然后…

C#高性能低GC 非托管动态扩容数组

开始之前相比固定长度的Array&#xff0c;大家可能在编程的时候经常会使用List<T>&#xff0c;同时可能会经常往里面Add东西&#xff0c;因为List具有可扩容性&#xff0c;但是注重GC的朋友会发现&#xff08;比如Unity开发者&#xff09;&#xff0c;List.Resize会造成扩…

leetCode 53. maximum subarray

Find the contiguous subarray within an array (containing at least one number) which has the largest sum. For example, given the array [-2,1,-3,4,-1,2,1,-5,4],the contiguous subarray [4,-1,2,1] has the largest sum 6. 贪婪算法找每个当前位置对应的最大的subar…

如何成为有效学习的高手(许岑)——思维导图

总结自许岑精品课《如何成为有效学习的高手》&#xff0c;图片看不清的可以看下面。 最后有彩蛋&#xff01;最后有彩蛋&#xff01;最后有彩蛋&#xff01; 定义 高效学习的定义&#xff1a;找到最适合自己的学习手法&#xff0c;在相对短的时间内集中注意力&#xff0c;以解决…

tomcat不能多次startup.sh,异常时直接,分析logs目录下的日志。

tomcat不能多次startup.sh&#xff0c;异常时直接干掉其进程。 分析logs目录下的日志。

java类sample是公共的_应在名samle.java的文件_Andoid NDK编程 1 - 注册native函数

打算对Android的NDK的开发做一总结&#xff0c;首先是JNI部分&#xff0c;接下来是NDK的内容。今天首先介绍一下JNI的第一部分&#xff1a;注册native函数。当java代码中执行native的代码时候&#xff0c;首先是通过一定的方法来找到这些native方法。而注册native函数的具体方法…

WPF Canvas 平滑笔迹

WPF Canvas 平滑笔迹控件名&#xff1a;CanvasHandWriting作者&#xff1a;小封&#xff08;邝攀升&#xff09;原文链接&#xff1a; https://github.com/WPFDevelopersOrg/WPFDevelopers编辑&#xff1a;驚鏵完整的思路如下收集路径点集。平均采样路径点集。将路径点集转为…

IIS应用程序池相关问题及连接池已满的解决方法

关于应用程序池 在 IIS 6.0 中,引入了应用程序池&#xff0c;应用程序池是将一个或多个应用程序链接到一个或多个工作进程集合的配置。因为应用程序池中的应用程序与其他应用程序被工作进程边界分隔&#xff0c;所以某个应用程序池中的应用程序不会受到其他应用程序池中应用程序…