jQuery库简介及下载引入

朱雀 2022-05-24 01:55 242阅读 0赞

使用jQuery之前要学习HTML基础、CSS样式以及JavaScript

jQuery是一个JavaScript函数库，对JavaScript进行封装，使JavaScript更加简洁。jQuery库可以通过一行简单的标记被添加到网页中。使用jQuery不用担心浏览器的兼容问题

jQuery库包含的功能有：

HTML元素选取，HTML元素操作（修改，删除、隐藏），CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM遍历和修改，AJAX（不刷新页面的同时来修改页面的内容），Utilities（工具类）。

引入jQuery

给网页中添加jQuery有两种方法

1.从jquary.com下载jQuery库

打开jQuery的官网jquary.com，点击下载，选择合适的版本进行下载，下载完成后将下载的js文件复制到你的所创建的工程当中，并通过<script>标签进行引用，具体步骤如下：

a，下载

b，引入

![70][]

![70 1][]

![70 2][]

2.从CDN中载入jQuery

百度和新浪的服务器存有jQuery，例如：https://libs.baidu.com/jquary/3.3.1/jquary.min.js

jQuery的基本语法

$(selector).action()

美元符号定义jQuery，选择符（selector）查找HTML元素，jQuery的action()执行对元素的操作。

例如如下代码通过jQuery实现点击p元素隐藏内容的效果

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <p>hello</p>
        <p>welcome</p>
        <p>jQuary</p>
    </body>
    </html>

/**
     * Created by dell on 2018/5/14.
     */
    $(document).ready(function() {
        $("p").click(function () {
            $(this).hide();
        })
    });

注意：使用<script>标签引入jquery库的js文件时一定要放在引入自己定义的js文件的语句之前，否则jQuery库文件是不起作用的。

[70]: /images/20220524/2567db11f40241d7adc19d48d48fc883.png
[70 1]: /images/20220524/c8f50a7a3590457097d32ad1eb816733.png
[70 2]: /images/20220524/8f6f6f4d968743f5ae03d341fab50728.png