jQuery对象和DOM对象的相互转化实现代码_jquery
作者:大眼妹886 | 来源:互联网 | 2018-06-15 15:40
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg");这里的$("#img")就是jQuery对象;
jQuery对象和DOM对象相互转化
jQuery对象和DOM对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";这里的document.getElementById("img")就是DOM对象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等价的,是正确的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。
在说一个例子:就是this,我在写jQuery的时候经常这样写:this.attr("src","test.jpg"); 可是就是出错。其实this是DOM对象,而.attr("src","test.jpg") 是jQuery方法,所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象,例如$(this).attr("src","test.jpg");
1.DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
2.jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
推荐阅读
-
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
-
IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ...
[详细]
蜡笔小新 2023-12-12 13:43:58
-
-
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
-
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
-
前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ...
[详细]
蜡笔小新 2023-10-16 17:08:23
-
JavaScript无符号右移赋值操作-示例代码:resultexpression其中参数是result任何变量。expression是任何表达式。JavaScript中无符 ...
[详细]
蜡笔小新 2023-10-16 16:49:19
-
我有使用googledrivepdf的共享链接,我必须使用angular7下载pdf文件。我已经完成了自欺 ...
[详细]
蜡笔小新 2023-10-16 11:21:16
-
IhaveawebapplicationthatusesanActiveXCOMcomponent,forexample:我有一个使用ActiveXCOM组件的Web应用程 ...
[详细]
蜡笔小新 2023-10-16 08:07:22
-
浅析javascript异步执行函数导致的变量变化问题解决思路-浅析javascript异步执行函数导致的变量变化问题解决思路for(vari0;i ...
[详细]
蜡笔小新 2023-10-15 18:57:11
-
表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ...
[详细]
蜡笔小新 2023-10-15 18:44:55
-
Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ...
[详细]
蜡笔小新 2023-10-15 16:40:16
-
该对象中的属性方法和数学有关.abs(x)返回数的绝对值。exp(x)返回e的指数。floor(x)对数进行下舍入。log(x)返回数的自然对数(底为e)。 ...
[详细]
蜡笔小新 2023-10-14 20:27:26
-
get()方法用于拦截某个属性的读取操作,如果没有该属性的时候会报一个undefined的,如果结果get处理会返回对应的错误信息varperson{name:张三 ...
[详细]
蜡笔小新 2023-10-14 11:04:09
-
[JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ...
[详细]
蜡笔小新 2023-10-13 19:00:52
-
前提ES5只有函数作用域和全局作用域,var属于ES5。let属于ES6,新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ...
[详细]
蜡笔小新 2023-10-13 18:33:54
-