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

﹏ヽ暗。殇╰゛Y 2023-07-07 08:24 147阅读 0赞

接上一节 [ jquery从零开始-1.2 使用 jQuery][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， 读取该元素包含的文本信息。

<body>
    <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 对象转换为 jQuery对象**

对于 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>

# **老铁，要不点个赞再走可好？么么哒** #

1、点个赞呗，可以让更多的人看到这篇文章，顺便激励下我。

2、老铁们，关注我的原创微信公众号「FUNS社区」，还可访问[FUNS在线社区http://www.htmlfuns.cn][FUNS_http_www.htmlfuns.cn]，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1][]

**作者简介**

作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。

期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！

> **转载说明：未获得授权，禁止转载**

[jquery_-1.2 _ jQuery]: https://blog.csdn.net/zd8693476/article/details/104437113
[FUNS_http_www.htmlfuns.cn]: http://www.htmlfuns.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225111127939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225114905261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70