jquery从零开始-1.3jQuery实战案例

接上一节 jquery从零开始-1.2 使用 jQuery

jQuery 是在 JavaScript 基础上进行封装的，因而 jQuery 代码本质上也是 JavaScript 代码。自然 jQuery 代码与 JavaScript 代码可以相互混合使用。客户不需要去区分每一行代码究竟是 jQuery 代码， 还是 JavaScript 代码。
但是， jQuery 与 JavaScript 是两个不同的概念，在用法上存在差异。 jQuery 对象和 DOM 对象是可以相互转换的，由于它们所操作的对象都是 DOM 元素，只不过 jQuery 对象包含了多个 DOM 元素，而 DOM 对象本身就是一个 DOM 元素。简单地说， jQuery 对象 是 DOM 元素的集合，也称为伪类数组，而 DOM 对象就是一个 DOM 元素。

1. 把jQuery 对象转换为 DOM 对象

jQuery 对象不能使用 DOM 对象的方法，假如需要就应该先把jQuery 对象转换为 DOM 对象。 转换 的方法有两种。

(1).借助数组下标来读取jQuery 对象集合中的某个 DOM 元素对象。

【示例 3】 在本示例中，使用 jQuery 匹配文档中所有的 Ii 元素，返回一个 jQuery 对象，而后通过 数组下标的方式读取 jQuery 集合中第一个 DOM 元素。 此时返回的是 DOM 对象， 而后调用 DOM 属性 innerHTML， 读取该元素包含的文本信息。

<ul>    <li>故人西辞黄鹤楼 </li>    <li>烟花三月下扬州 </li>    <li>孤帆远影碧空尽</li>    <li>唯见长江天际流 </li></ul><script>    $(function () {        var $li = $("li");        var li = $li [0];        alert(li);    })</script> 

(2）借助 jQuery 对象方法，如 get()方法，为 get()方法传递一个下标值，就可从 jQuery对象中取出 一个 DOM 对象元素。

【示例 4】 在本示例中，使用 jQuery 匹配文档中所有的 li 元素，返回一个 jQuery 对象，而后通过 jQuery 的 get()方法读取 jQuery 集合中第一个 DOM 元素。 此时返回的是 DOM 对象，而后调用 DOM 属 性 innerHTML， 读取该元素包含的文本信息。

<ul>    <li>故人西辞黄鹤楼 </li>    <li>烟花三月下扬州 </li>    <li>孤帆远影碧空尽</li>    <li>唯见长江天际流 </li></ul><script>    $(function () {        var $li = $("li");        var li = $li.get(0);        alert(li);    })</script>

2. 把 DOM 对象转换为 jQue叩对象

对于 DOM 对象来说，直接把它传递给$()函数就可， jQuery 会自动把它包装为 jQuery 对象。而后即可以自由调用 jQuery 定义的方法。

【示例 5】 针对示例 4，可以这样来设计： 使用 DOM 的方法获取所有 li 元素， 而后使用 jQuery() 构造函数把它封装为 jQuery 对象，这样即可以方便调用 jQuery 的方法。

<ul>    <li>故人西辞黄鹤楼 </li>    <li>烟花三月下扬州 </li>    <li>孤帆远影碧空尽</li>    <li>唯见长江天际流 </li></ul><script>    var li = document.getElementsByTagName("li"); //获取所有 li 元素    var $li= $(li[0]); //把第一个 li 元素封装为 jQuery 对象    alert( $li.html()) ;</script>

实际上， 也可以把 DOM 元素数组传递给$()函数， jQuery 对象会自动把所有 DOM 元素包装在 一个 jQuery 对象中。

【示例 6】 针对示例 5， 还可以进行如下的设计。

<ul>    <li>故人西辞黄鹤楼 </li>    <li>烟花三月下扬州 </li>    <li>孤帆远影碧空尽</li>    <li>唯见长江天际流 </li></ul><script>    var li = document.getElementsByTagName("li"); //获取所有 li 元素    var $li= $(li); //把第一个 li 元素封装为 jQuery 对象    alert( $li.html()) ;</script>

顺便推荐一下自己的博客，http://www.htmlfuns.cn,里面有知识体系适合从没接触过html的童鞋使用，不论是html5还是javascript，又或者者是最新的vue都可以先从最基础的开始学起。看完整套体系后你即可以写出自己的网页啦。并且有很规范的分类，程序员之间可以分享学习笔记、技术进行交流。