jQurey

I love studying!!!

于 2024-09-08 23:22:37 发布

阅读量647

点赞数 16

文章标签： jquery

本文链接：https://blog.csdn.net/m0_73759720/article/details/141904826

版权

一、概念及使用

1. 概念

jQuery 提供了强大的选择器函数，可以快速获取页面的标签，jQuery 提供了大量的DOM操作的API(封装了许多可以直接操作DOM的方法)、jQuery 提供了比较丰富的动画函数、让实现业务的编码写的更快。

2. 使用方法

进入https://jquery.com/官网下载

3. 使用步骤

3.1 下载jquery文件

3.2 引入jquery文件

3.3 编写jquery代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
    <script>
        // 加载页面完成时触发事件
        window.onload = function () {

        }
    </script>
</head>

<body>
    <h3>hell</h3>
    <!-- 引入jquery文件 -->
    <script src="../js/jquery-3.7.1.js"></script>


    <script>

        // 编写代码

        $("h3").css("color", "red")

        $(function () {
            // 设置字体颜色变成红色
            $("h3").css("color", "red")
        })
        // 
        // jQuery 本质也是javascript
    </script>
</body>

</html>

二、DOM操作

jQuery提供选择标签的方法、jQuery提供设置标签样式、文本、属性、类名的方法等、jQuery提供渲染html文本，删除标签，添加标签的方法等。

1. 选择器函数

2. 获取子元素

3. 获取父元素

4. 获取指定标签

5. 获取前一个元素

6. 获取后一个元素

7. 兄弟标签

8. 设置文本

9. 设置属性

10. 设置类名

11. 渲染标签

12. 清空标签

13. 删除标签

三、事件

四、动画

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <style>
        .title {
            width: 800px;
            height: 40px;
            background-color: #f0f0f0;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .title button {
            height: 40px;
            width: 200px;
        }

        [class^='box'] {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            padding: 20px;
        }
    </style>
</head>
<body>

    <div class="title">
        <button class="btn1">显示(show)</button>
        <button class="btn2">隐藏(hide)</button>
        <button class="btn3">切换（开关）</button>
    </div>
    <div class="box1">box1</div>

    <div class="title">
        <button class="btn4">淡入(fadeIn)</button>
        <button class="btn5">淡出(fadeOut)</button>
    </div>
    <div class="box2">box2</div>

    <div class="title">
        <button class="btn6">下拉(slideDown)</button>
        <button class="btn7">卷起(slideUp)</button>
    </div>
    <div class="box3">box3</div>

    <div class="title">
        <button class="btn8">自定义动画(animate)</button>
        <button class="btn9">还原</button>
    </div>
    <div class="box4">box4</div>


    <script src="./libs/jq/jquery-3.7.1.js"></script>
    <script>

        // 1) show 和 hide 的动画主要是改变元素的宽度和高度和display属性。

        $(".btn1").on("click", function(){
            $(".box1").show(1000)
        })
        $(".btn2").on("click", function(){
            $(".box1").hide(1000)
        })
        $(".btn3").on("click", function(){
            $(".box1").toggle(1000)
        })

        // 2） fadeIn 和 fadeOut  主要改变元素的透明度和display属性。

        $(".btn4").on("click",function(){
            $(".btn2").fadeIn(1000)
        })
        $(".btn5").on("click",function(){
            $(".btn2").fadeOut(1000)
        })

        // 3） slideDown 和 slideUp  主要改变元素的高度和display属性。

        $(".btn6").on("click",function(){
            $(".box3").slideDown(1000)
        })
        $(".btn7").on("click",function(){
            $(".box3").slideUp(1000)
        })

        // 4） animate  可以自定义动画（和我们之前封装的animate极其相似）。
        $(".btn8").on("click",function(){
            $(".box4").stop().animate({
                width: "100px",
                height:"100px",
                borderRadius: "30px",
                marginLeft: "200px"
            },1000)
        })

        $(".btn9").on("click", function () {
            $(".box4").stop().animate({
                width: "200px",
                height:"200px",
                borderRadius: "0px",
                marginLeft: "0px"
            },1000)
        })



    </script>
</body>
</html>