jQuery1 初识jQuery

最新推荐文章于 2021-11-06 15:56:58 发布

ZT黄

最新推荐文章于 2021-11-06 15:56:58 发布

阅读量94

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44055272/article/details/90085448

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1 什么是jQuery

1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）
2.jQuery可以做什么
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。（write less，do more）
jQuery库包含以下功能：
HTML 元素选取，HTML 元素操作，CSS 操作，HTML 事件函数，JavaScript 特效和动画，HTML DOM 遍历和修改，AJAX，Utilities。
提示：除此之外，Jquery还提供了大量的插件。

2 搭建jQuery环境

2.1 本地导入库

这个src表示jQuery文件所在的路径。

    <script src="../jquery-3.4.0.min.js"></script>

2.2 CDN导入库

通过sccript标签导入，你可以随便找一个CDN导入，不过最好是国内的这样比较快

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

3 jQuery文件的基本结构

3.1注意事项：

1.在开头导入jQuery库。
2.在页面里所有的元素加载完成后执行jQuery代码，$(document).ready（函数内容）
3.通过$(变量)获得jQuery对象对对象进行操作。
下面的代码可以使得点击按钮后p标签内容消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="../jquery-3.4.0.min.js"></script>-->
    <!--本地导入-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--CDN导入 Content Delivery Network-->
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

4 jQuery对象与原生js DOM对象比较和转化

4.1 两种对象创建。

1.jQuery通过$创建对象
2.DOM通过doucment.getElementById等其他方法创建DOM对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.4.0.min.js"></script>
    <!--本地导入-->
    <script>
        $(document).ready(function(){
            $("button").click(function (){
                // jQuery对象
                $("#test1").css("color","red");
                // DOM对象
                test2=document.getElementById("test2");
                test2.style.color="green";
            })
        });
    </script>
</head>
<body>
<p id="test1">这是待测试的1</p>
<p id="test2">这是待测试的2</p>
<button>点我变白色</button>
</body>

4.2 两种对象区别

1.通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
2.通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

4.3 两种对象的相互转换

1.jQuey对象转换为DOM对象，通过下标或者get方法获得单个DOM对象。
2.DOM对象转化为jQuery对象。$（）函数。
注意：命名规则，一般jQuery对象以$开头，其他对象以普通字符开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.4.0.min.js"></script>
    <!--本地导入-->
    <script>
        $(document).ready(function(){
            $("button").click(function (){
                // jQuery转化为DOM
                var $test1=$("#test1");
                var test1=$test1[0];
                // 或者$test1.get(0)
                test1.style.color="red";

                // DOM转化为jQuery
                var test2=document.getElementById("test2");
                var $test2=$(test2);
                $test2.css("color","green");

            })
        });
    </script>
</head>
<body>
<p id="test1">这是待测试的1</p>
<p id="test2">这是待测试的2</p>
<button>点我色</button>
</body>
</html>