首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

jquery 学习(4) 获取标签中的值||text()与html的区别,以及jquery对象与dom对象的转换

2013-09-12 
jquery 学习(四) 获取标签中的值||text()与html的区别,以及jquery对象与dom对象的转换代码如下:!DOCTYPE

jquery 学习(四) 获取标签中的值||text()与html的区别,以及jquery对象与dom对象的转换

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>1-4</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 引入 jQuery --><script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">//等待dom元素加载完毕.$(document).ready(function(){var domObj = document.getElementsByTagName("h3")[0]; // Dom对象var $jQueryObj = $(domObj);  //jQuery对象alert("DOM对象:"+domObj.innerHTML);alert("jQuery对象:"+$jQueryObj.html());alert($jQueryObj.text());var $jObject = $("#h2");//jQuery对象var domO = $jObject[0];//dom对象alert(domO.innerHTML);});</script></head><body><h3><a>例</a>子</h3><h2 id="h2">hehe</h2></body></html>


打印结果,弹出对话依次显示为:<a>例</a>子、<a>例</a>子、例子、hehe

分析:先通过标签h3获取所有h3标签的dom对象数组取第一个,通过$()将dom对象转换成了jquery对象。从打印的结果可以看出dom的innerHTML属性与jquery的html()函数获取的结果相同,而text()函数则只获取h3标签中的文本,h3标签中包含的其他标签则过滤。

     然后通过id为h2获取jquery对象,通过[0]或get(index)方式将jquery对象转成了dom对象。

 

热点排行