JQuery对象与DOM对象

来源:互联网 发布:it 产业链 编辑:程序博客网 时间:2024/06/06 12:31
  1. DOM对象
    在网页中,各标签都是一个DOM节点,如下所示:
<ul id="ulId">    <li>a</li>    <li>b</li>    <li>c</li>    <li>d</li></ul>

ul是一个DOM节点,li也是一个DOM节点。通过document.getElementById()获取到的就是DOM对象

var  ul = document.getElementById("ulId");

DOM对象可以使用JS当中的方法,如:

var objectHTML = ul.innerHTML;
  1. DOM对象
    通过JavaScript中的方法获取的对象是DOM对象,如:
var obj = document.getElementById("one");
  1. JQuery对象
    JQuery对象是通过JQuery包装DOM对象后产生的对象。创建JQuery对象后可以使用JQuery对象中独有的方法,如:
$("#one").html();

注意:JQuery对象只能使用JQuery对象当中的方法,而不能使用DOM对象当中的方法,如:

    var obj = $("#one");        //下面的写法是正确的        obj.html('xxx');        //下载的写法是错误的        obj.innerHTML = 'xxx';

反之亦然。
3. DOM与JQuery对象互换

    var obj = $("#one");        //JQuery转换成DOM对象        var domObj = obj[0];        var object = document.getElementById("one");        //DOM转换成JQuery对象        var jQueryObj = $(object);

判断一个元素是否存在,使用DOM对象和JQuery对象有不同的判断方法。 $(“#..”)获取的永远是对象,即使没有该元素。所以当判断某个元素是否存在时,不能使用如下代码:

    if($("#one")){            //do something        }

而应使用如下代码:

    if($("#one").length>0){            //do something        }    //或是转换成DOM对象再进行判断        if($("#one")[0]){            //do something        }