jQuery使用-02

最新推荐文章于 2021-08-11 22:32:17 发布

小梦新靓

最新推荐文章于 2021-08-11 22:32:17 发布

阅读量113

点赞数

分类专栏： jQuery web全栈学习

本文链接：https://blog.csdn.net/qq_43712187/article/details/111866054

版权

web全栈学习同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery认识

jQuery有两个大版本：

1.x：最新版为v1.11.3
2.x：最新版为v2.1.4(不再支持IE6,7,8)
3.x版本
它们的区别是：

（1）、第一个是未压缩版，第二个是压缩版。
（2）、平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。

二、jQuery学习开始

2.1、jQuery的入口函数和$符号

2.1.1、入口函数（重要）

原生js的入口函数指的是window.οnlοad=function(){};如下：

   //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

而 jQuery的入口函数，有以下几种写法：

2.1.2、jQuery的入口函数，有一下几种写法

写法一：

    //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

写法二(写法一的节简版)

   //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });

写法三：

     //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

2.1.2、jQuery入口函数与js入口函数的区别

（1）、区别一：书写的个书不同

JS的入口函数只能出现一次，出现多次会存在书简覆盖的问题。
jQuery的入口函数，可以出现任意多次，并不存在事件覆盖问题。
（2）、执行时机不同
js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档，外部的js，外部的css文件，图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

2.1.3、jQuery的$符号

jQuery使用$符号原因：书写简洁、相对于其他字符狱中不同，容易被记住
jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

   <script src="jquery-1.11.1.js"></script>
    <script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
    </script>

在这里插入图片描述

那怎么理解jQuery里面的 $ 符号呢？
答：$ 实际上表示的是一个函数名如下：

$(); // 调用上面我们自定义的函数$
    $(document）.ready(function(){}); // 调用入口函数
    $(function(){}); // 调用入口函数
    $(“#btnShow”) // 获取id属性为btnShow的元素
    $(“div”) // 获取所有的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

三、js中的DOM对象和jQuery对象比较（重点，难点）

3.1、二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象
id获取的也是数组
上图显示，由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
总结：总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

3.2、二者的相互转换

3.2.1、DOM 对象转为 jQuery对象：

$(js对象);

举例

    //转换。
    jqBox1 = $(myBox);
    jqBox2 = $(boxArr);
    jqBox3 = $(divArr);

DOM 对象转换成了 jquery 对象之后，上面的功能可以直接调用。不是jQuery获得不了

3.2.2、jQuery对象转为DOM对象

    jquery对象[index];      //方式1（推荐）
    jquery对象.get(index);  //方式2

3.2.3、jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

    //jquery对象转换成 DOM 对象之后
    jqBox3[0].style.backgroundColor = "black";
    jqBox3.get(4).style.backgroundColor = "pink";

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
    <li>生命壹号，永不止步</li>
</ul>
</body>
</html>

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用-02

文章目录一、jQuery认识二、jQuery学习开始2.1、jQuery的入口函数和$符号2.1.1、入口函数（重要）2.1.2、jQuery的入口函数，有一下几种写法2.1.2、jQuery入口函数与js入口函数的区别2.1.3、jQuery的$符号三、js中的DOM对象和jQuery对象比较（重点，难点）3.1、二者的区别3.2、二者的相互转换3.2.1、DOM 对象转为 jQuery对象：3.2.2、jQuery对象转为DOM对象3.2.3、jQuery对象转换成了 DOM 对象之后，可以直接调用
复制链接

扫一扫