1 <body> 2 <h3>例子</h3> 3 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> 4 <ul> 5 <li id="apple">苹果</li> 6 <li>橘子</li> 7 <li>菠萝</li> 8 </ul> 9 </body>
可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点,这样得到的DOM元素就是DOM对象,DOM对象可以使用JavaScript中的方法,如下:
1 var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象 2 3 var objHTML = domObj.innerHTML; // 使用JavaScript中的属性——innerHTML
jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么可以使用jQuery里的方法。
alert($(‘#apple‘).html());
这段代码等同于:
alert(document.getElementById(‘apple‘).innerHTML);
1.在jQuery对象中无法使用DOM对象的任何方法,例如$(‘#id‘).innerHTML和$(‘#id‘).checked之类的写法都是错误的,可以用$(‘#id‘).html()和$(‘#id‘).attr("checked")之类的jQuery方法来代替。
2.DOM对象也不能使用jQuery里的方法,例如document.getElementById(‘apple‘).html()也会报错,只能用document.getElementById(‘apple‘).innerHTML语句。
3.用#id作为选择符取得的是jQuery对象而并非document.getElementById(‘id‘)所得到的DOM对象,两者并不等价。
jQuery不能使用DOM中的方法,但如果jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有以下两种处理方法。
jQuery提供了两种方法将jQuery对象转换为DOM对象,即[index]和get(index)。
- jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象,jQuery代码如下:
var $cr = $("#cr"); //jQuery对象 var cr =$cr[0]; //DOM对象 alert(cr.checked) //检测这个checkbox是否被选中
- 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象,jQuery代码如下:
1 var $cr = $("#cr"); //jQuery对象 2 var cr =$cr.get(0); //DOM对象 3 alert(cr.checked) //检测这个checkbox是否被选中
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方法为$(DOM对象),jQuery代码如下:
1 var cr = document.getElementById("cr"); //DOM对象 2 var $cr = $(cr); //jQuery对象 3 alert($cr.is(":checked")); //jQuery方式判断
is(":checked")是jQuery中的方法,判断jQuery对象是否被选中,返回boolean值。
时间: 2024-12-18 20:55:09