jQuery对象和DOM对象相互转化

2016-02-19 16:06 3 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享jQuery对象和DOM对象相互转化教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

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"); 都是错误的。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

在说一个例子:就是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是否被选中

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1611058.html

延伸阅读
标签: Web开发
参照prototype.js中getElementsByClassName的思想,扩展出几种在DEOM操作中可经常用到的获取对象的方法,使用获取对象变得更方便、更精确了: document.getElementsByClassName = function(className,oBox) { //适用于获取某个HTML区块内部含有某一特定className的所有HTML元素 this.d= oBox || document; va...
标签: Web开发
例如:有一个employee对象, 代码如下: function employee(){ this.e_id = 0; this.e_name = ""; } 现在需要为它动态的新增"age"属性和"toString()"方法, 代码如下: var empObj = new employee(); empObj["age"] = 20; empObj["toString"] = function() { return this.e_id.toString() + this.e_name; }; 一行简...
标签: Web开发
看看我们的jQuery为我们都提供了哪些可用的方法: size():很明显,它应该是返回包装集中的元素个数,如$('a').size()表示链接元素的个数; get(index):当没指定index时就默认取包装集中所有元素,并以js中的数组形式返回,如果指定了index,则返回下标为index对应的元素,如$('img[title]').get(0)返回包含属性title的第一个img元...
很多开发者表示,不知道Android的Drawable和Bitmap之间如何相关转换。下面Android123给大家两种比较简单高效的方法。 一、Bitmap转Drawable 代码如下: Bitmap bm=xxx; //xxx根据你的情况获取 BitmapDrawable bd=BitmapDrawable(bm); Android开发网提示因为BtimapDrawable是Drawable的子类,最终直接使用bd对象即可。 ...
Ondataavailable 事件 作 用 此事件会在XML 文件有效时被触发。 基本语法 此一事件有下面三种处理方式. Inline: ;. Event property:object.ondataavailable = handler;. Named script: ; 说 明 ondataavailable 事件只要一获得有效的数据就会被触发。这项技术并未说明在这个文件中有多少数据是有效的。范 例xmlDoc.ondataavailable = ...

经验教程

927

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部