您的位置：首页 > Web前端 > JQuery

JQuery学习之--3、jQuery对象和DOM对象

2012-12-20 19:01 363 查看 
1，DOM对象
DOM（Document Object Model ,文档对象模型，每一个DOM都可以表示成一个倒挂的树。）
<h3>例子</h3>
<p title="选择你喜欢的水果:">你喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>梨子</li>
</ul>
在DOM树中，<h3><p>等节点都是DOM元素的节点。
在javascript中，通过getElementById或者getElementTagName来获取元素的节点。像这样得到的元素就是DOM      对象:var objectDOM=document.getElemetById("id");//根据id获取DOM对象。

2，jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么他就可以使用jQuery中所有的方法。
$("#foo").html();//获取id为foo元素内的html代码,其中，html(),是jQuery中的方法。
上面的代码在DOM的写法:getElementById("foo").innerHTML;

值得注意的是:在jQuery对象中，无法使用DOM对象的任何方法。同样的是，在DOM中也无法使用jQuery对象。
特别注意的是:使用#id取得的jQUery对象，并非document.getelementById("id")得到的DOM对象，两者并不等价。

3，jQUery对象和DOM对象的相互转换。
a，jQUery对象转换成DOM对象。
（1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
var $cr=$("#cr");//jQuery对象
var cr  =$cr[0];//DOM对象
（2）另一种方法是jQUery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr = $("#cr");//jQuery对象
var cr=$cr.get(0);//DOM对象
b，DOM对象转换成jQUery对象。
对于一个DOM对象，只要用$()把DOM对象包装起来就可以获得jQUery对象。
var cr = document.getelementById("id");//获取的是DOM对象。
var $cr=$(cr);//转换成jQUery对象。

小demo：
<title>同意注册</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(function (){
var $foo=$("#foo");//获取到jQUery对象
var foo=$foo.get(0);//将jQuery对象转换成DOM对象
$foo.click(function (){
if(foo.checked){
alert("感谢您对我们的支持!");
}
});
});

</script>
</head>

<body>
<input type="checkbox" id="foo"><label for="cr">同意上述内容</label>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航