什么是jquery

官网:https://jquery.com/

jquery的核心思想 write less do more 写的少做的多

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

jquery下载

打开官网：点击download会出现如下页面，你点击进去就是jquery代码直接ctrl+a全选ctrl+c复制创建一个js文件把他粘贴进去

jquery官网cdn jquery官网是什么_html

打开jquery文件往下翻你会发现如下内容

jquery官网cdn jquery官网是什么_加载_02

你会发现jquery是一个对象，先不管他是干什么的。把jquery翻到最后

jquery官网cdn jquery官网是什么_加载_03

可以从上面看出如果是全局的把jquery对象挂载到window赋值给一个$符和jquery。我们要用它的时候直接使用$符号或者jquery对象就可以了

jquery的使用

（1）引包

此时我们创建一个html引入jquery，在控制台查看

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

jquery官网cdn jquery官网是什么_html_04

(2)jquery 的入口函数和 $ 符号

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

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

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

写法一：

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

写法二：（写法一的简洁版）

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

写法三：

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

jquery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
  • jquery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
  • jquery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

实例：我想通过jquery改变一个div的样式，我该怎么做？？

通过js来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="box" id="box"></div>
<script>
    var isGreen = true;
    //通过getElementById方法获取div
    var oDiv = document.getElementById('box');
    //onclick点击事件，function回掉函数
    oDiv.onclick = function () {
        if (isGreen) {
            oDiv.style.backgroundColor='red';
            isGreen = false;
        }else {
            oDiv.style.backgroundColor='orange';
            isGreen = true;
        }
    }
</script>
</body>
</html>

通过jquery来写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    //入口函数
    // console.log($);
    // console.log($(document))
    //当文档加载时候 调用此方法
    // $(document).ready(function () {});等价于下面的方法
    var stu = true;
    $(function () {
        $('#box').click(function () {
            if (stu){
                $('#box').css('background-color', 'green');
                stu = false
            }else {
                $('#box').css('background-color', 'red');
                stu = true
            }

        })
    });
</script>
</body>
</html>

 

作者：杨灏