Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Konvertierungsmethode für jQuery-Objekte und DOM-Objekte_jquery

Detaillierte Erläuterung der Konvertierungsmethode für jQuery-Objekte und DOM-Objekte_jquery

WBOY
WBOYOriginal
2016-05-16 09:00:182676Durchsuche

本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考,具体如下:

jQuery对象转换为dom对象

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。

jQuery对象的索引保存的是dom对象,所以可以通过索引将经jQuery对象转化为dom对象(实际上是获取保存在jQuery对象中的dom对象)。

$("#myphoto")[0];

通过索引返回dom对象后,就可以使用各种dom对象的方法和属性,比如获取dom对象的src属性:

alert($("#myphoto")[0].src);

如果想要遍历jQuery对象中的每个元素,通常使用each()函数。

echo(callback);

Callback()是一个回调函数,此函数中的this也指向dom元素。

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

对于懒人有一个小窍门,如果不想记忆在不同的jQuery函数中的this到底是jQuery对象还是this对象,可以使用"this"方法都转化成jQuery对象,因为即使一个对象已经是jQuery对象也不会出错。

Dom对象转化为jQuery对象

如果已经获得了一个dom对象,可以使用"jQuery(elements)"函数将其转化为jQuery对象:

var img=document.getElementById("myphoto");
jQuery(img).css("border","solid 2px #FF0000");

上面代码中img是使用dom获取到的dom对象。将其转化为jQuery对象后就可以使用jQuery对象的css()方法更改其样式。

可以使用"$"代替"jQuery",因为在jQuery的内部有如下实现:

jQuery=window.jQuery=window.$

"$"字符在JavaScript中可用做变量名,并且可以作为前缀出现。但是一些其他的类库或者是程序可能已经使用了"$"作为变量名。

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

以上两条语句是等同的。

"jQuery(elements)"函数的elemients参数还可以是jQuery对象,虽然讲一个jQuery对象在次转化没有意义,这是为了当不确定一个对象的类型是jQuery对象还是dom对象时,可以再次调用此函数进行转化,这样可以保证此对象一定是jQuery对象。

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结

希望本文所述对大家jquery程序设计有所帮助。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn