jquery安装和使用

最新推荐文章于 2024-05-12 22:40:26 发布

I_am_shy

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量372

点赞数 11

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/i_am_shy/article/details/136532970

版权

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

总之jQuery可以简化js代码同时拥有很高的兼容性

jQuery安装

jQuery有两种使用方法：可以在网页中插入网络服务器中的对应文件使用，也可以去官网下载文件，

这里列举几个国内的jQuery文件地址

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

// 字节
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js">
</script>

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery官网下载 jQuery

也可以用npm命令

npm install jquery

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

// 简化写法效果和以上一致，保证代码在页面加载完成后执行
$(function(){
     // 开始写 jQuery 代码...
})

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

标签------$("div")
类------$(".box")
名------$("#box")
...

第一个jquery效果---隐藏

<style>
   .box{
            width: 200px;
            height: 200px;
            background-color: #666;
            margin: 20px;
            float: left;
    }
</style>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>


js部分
// jQuery的选择器和css的选择器用法类似，类(.box)，名(#box)，标签(div)...
$(document).ready(function () {
    $(".box").hide(3000);//隐藏元素，参数隐藏时间
});

运行结果如下：

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #666;
            margin: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script src="js.js"></script>
</html>


---js部分---

$(document).ready(function () {
    $(".box").hide(3000);//隐藏元素，参数隐藏时间
});