jQuery基础学习DOM对象与jQuery对象

网页案例的代码：

   <h3>例子</h3>
    <h3>你喜欢的水果是</h3>
    <ul>
        <li id="id">苹果</li>
        <li>鸭梨</li>
        <li>香蕉</li>
    </ul>

DOM元素的获取

在传统的方法中我们可以通过JavaScript的getElementsByTagName或者getElementByid来获取元素的节点像这样得到的元素就是DOM元素下面就是实例

    <script type="text/javascript">
        var domObject = document.getElementById("id"); //获取DOM对象
        var ObjectHtml = domObject.innerHTML;
        alert(ObjectHtml);
    </script>

jQuery对象的获取

jQuery对象就是jQuery通过包装DOM形成的对象，如果一个对象是jQuery对象才可以使用jQuery对象的方法。例如

$("#id").html() 这样就可以获取标签为ID中的内容

在jQuery对象是无法使用DOM的方法的反之亦然

我们用#id的方式取得的是jQuery对象但是并不是DOM对象这一点需要十分的注意。

jQuery对象与DOM的获取与书写的格式

如果获取的是jQuery对象我们需要在变量之前加上$符号

例如 var $variable=jquery对象

如果获取的是DOM对象那么 var variable=DOM对象

jQuery对象与DOM对象之间的转换

1.jQuery对象是一个类似数组的对象，可以通过index方法获得

 

    var $id = $("#id");
    var id = $id[0];

    alert(id.innerHTML)

2.jQuery还提供了get方法来帮助我们转换

    var $id = $("#id");
    var id = $id.get(0);
    alert(id.innerHTML)

这样我们就可以通过DOM的方法获取id标签中HTML的内容

DOM对象转换成jQuery对象

   var id = document.getElementById("id");
    var $id = $(id);
    alert($id.html())

我们平时用的jQuery对象都是通过$()函数制作出来的，$()函数就是jQuery对象的制造器