21-JQuery

最新推荐文章于 2024-06-14 11:01:38 发布

金霖海

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量84

点赞数

分类专栏：前端2 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_33396183/article/details/132490392

版权

前端2 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

JQuery

1 JQuery基础

1.1 概念

Jquery是一个第三方的JavaScript函数库，里面包含了大量写好的函数，可以让开发人员更快捷的操作dom。
JQuery目前版本是4.x，国内一般用的是3.5.1

1.2 使用

在页面中引入jquery文件,即可使用jquery的语法

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

api大全：https://jquery.cuishifeng.cn/

2 选择器-事件-CSS

案例1-选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 控制按钮 -->
    <button type="button" id="btn1">选择 id为 one 的元素</button>
    <button type="button" id="btn2">选择 class 为 two 的所有元素</button>
    <button type="button" id="btn3">选择 元素名是 div 的元素</button>

    <br /><br />

    <!-- 测试的元素 -->
    <div id="one">id为one的div</div>
    <div class="two">class为two的div</div>
    <span id="mover">这是span元素.</span>

    <!-- 引入jquery语法库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        //选择到第一个按钮
       $("#btn1").click(function(){
            $("#one").css("background-color","red")
       })
      
        
        //选择到第二个按钮
        $("#btn2").click(function(){
            $(".two").css("background-color","green")
        })

        //选择到第三个按钮
        $("#btn3").click(function(){
            $("div").css("background-color","blue")
        })
    </script>

</body>
</html>

知识点

id选择器/类选择器/元素选择器

点击事件

css样式

3 DOM操作

案例1 html()-text()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <!-- 控制按钮 -->
    <button id="btn1">向div中插入一个超链接</button>
    <button id="btn2">获取div中的超链接</button>
    <button id="btn3">向div中插入文本</button>
    <button id="btn4">获取div中的文本</button>
    
    <!-- 测试的元素 -->
    <div id="box"></div>
    <!-- 引入jquery语法库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>

        //拿到div元素
        const odiv = $("#box")

        $("#btn1").click(function(){
            odiv.html("<a href='https://www.baidu.com'>百度一下</a>")
        })

        $("#btn2").click(function(){
            const e = odiv.html()
            console.log(e);
        })

        $("#btn3").click(function(){
            odiv.text("夏满忙夏暑相连")
        })

        $("#btn4").click(function(){
            const e = odiv.text()
            console.log(e);
        })

    </script>

</body>
</html>

知识点

html(): 类似于innerHTML: 设置或获取标签内部的HTML代码

text()：类似于innerText：设置或获取标签的内部文本内容

案例2 class操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            display: flex;
        }
        ul li{
            margin-right: 20px;
        }
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>电影</li>
        <li>影院</li>
        <li>我的</li>
    </ul>
    <!-- 引入jquery语法库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $("li").click(function(){
            //1.移除所有li的class
            $("li").removeClass()
            //2.给被点击的li添加class
            $(this).addClass("active");
        })
    </script>
</body>
</html>

知识点

addClass() 给标签添加一个class

removeClass() 删除标签的某个class

toggleClass() 实现标签的class切换。即有则删除class，没有则添加class

案例4 属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">显示图片</button>
    <button id="btn2">不显示图片</button>
    <img >
     <!-- 引入jquery语法库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        const oimg = $("img")
        $("#btn1").click(function(){
            oimg.attr("src","./images/dhxy.jpg")
        })


        $("#btn2").click(function(){
            oimg.removeAttr("src")
        })
    </script>
</body>
</html>

知识点

attr() 获取或设置标签的某个属性

removeAttr() 删除标签的某个属性

案例5 表单数据操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <form action="" method="">
        账号<input type="text" ><br>
        密码<input type="password" ><br>
        性别<input type="radio" name="sex" value="man">男<input type="radio" name="sex" value="women">女<br>
        爱好<input type="checkbox" name="hobby" value="lanqiu">篮球<input type="checkbox" name="hobby" value="zuqiu">足球<br>
        籍贯
            <select name="address">
                <option value="hb">湖北</option>
                <option value="hn">湖南</option>
            </select><br>
        <button id="regBtn" type="button">注册</button>
        <button type="reset">重置</button>
    </form>
     <!-- 引入jquery语法库 -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        //给注册按钮绑定事件
        $("#regBtn").click(function(){
            //1.获取文本输入框数据
            const username = $("input[type='text']").val()
            console.log(username);
            //2.获取密码输入框数据
            const password = $("input[type='password']").val()
            console.log(password);
            //3.获取单选按钮的数据
            const sex = $("input[type='radio']:checked").val()
            console.log(sex);
            //4.获取复选框的数据
            const hobbys = $("input[type='checkbox']:checked")
            for (let index = 0; index < hobbys.length; index++) {
                console.log(hobbys[index].value);
            }
            //5.获取下拉列表的数据
            const address = $("select").val()
            console.log(address);

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