JQuery基础例题详解（中）

最新推荐文章于 2022-04-10 16:58:41 发布

素心如月桠

最新推荐文章于 2022-04-10 16:58:41 发布

阅读量826

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_47010003/article/details/124064235

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

3. jQuery HTML

3.1 获取元素

$().html();//获取html元素
$().text();//获取文本内容
$().val();//获取表单元素的value值
$().attr(“属性”);//获取选中元素的属性的值

3.1.1 例题1：点击按钮获取元素内容通过div标签显示

在这里插入图片描述

<!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>
        #div_id2{
            width: 200px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <span id="span_id">飓</span>
    <div id="div_id1">Baby I Know</div>
    <input type="text" id="input_id" value="New and More" /><br />
    <button id="btn">点击显示</button>
    <div id="div_id2"></div>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var span = $("#span_id").html();
            var div = $("#div_id").text();
            var input = $("#input_id").val();
            $("#btn").click(function () {
                $("#div_id2").html(span+","+input)
            })
        })
    </script>
</body>

</html>

3.1.2 例题2：点击button按钮跳转到百度

在这里插入图片描述

通过attr获取a标签的href的属性值

<!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>
    <a href="https://www.baidu.com">百度</a>
    <button>点击跳转百度</button>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
           $("button").click(function(){
            var url = $("a").attr("href");
            window.location.href = url;
           })
        })
    </script>
</body>
</html>

3.2 添加元素

在这里插入图片描述

<!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>
        p{
            width: 500px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p id="append_id">append</p><br/>
    <p id="prepend_id">prepend</p><br/>
    <p id="after_id">after</p><br/>
    <p id="before_id">before</p><br/>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#append_id").append("<div style='background-color:#f00;'>测试append</div>");
            $("#prepend_id").prepend("<div style='background-color:#f00;'>测试append</div>");
            $("#after_id").after("<div style='background-color:#f00;'>测试append</div>");
            $("#before_id").before("<div style='background-color:#f00;'>测试append</div>");

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

3.3 删除元素

$().remove() //删除被选元素
$().empty() //从被选元素中删除子元素

3.4 给选定元素添加css

调用bootstrap.min.js

<link rel="stylesheet" href="bootstrap.css">

在这里插入图片描述

<!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">
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>
<body>
<button id="btn1">成功样式</button>
<button id="btn2">失败样式</button>
<button id="btn3">成功/失败样式切换</button>
<button id="btn4">删除css样式</button>
<hr/>
<button id="btn5">显示</button>

<div id="div_id"></div>
<script type="text/javascript">
    $(function () {
        $("#btn1").click(function () {
            $("#btn5").addClass("btn btn-success");
        });
        $("#btn2").click(function () {
            $("#btn5").addClass("btn btn-danger");
        });
        $("#btn3").click(function () {
            $("#btn5").toggleClass("btn btn-danger");
        });
        $("#btn4").click(function () {
            $("#btn5").removeClass("btn btn-success");
        })
        $("#div_id").css("border","solid 1px #f00").css("background-color","aqua").css("width","300px")
        .css("height","100px");
    })
</script>
</body>
</html>

3.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>
    <style>
        #d1 {
            width: 200px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var w = $("#d1").width();
            var iw = $("#d1").innerWidth();
            var ih = $("#d1").innerHeight();
            var ow = $("#d1").outerWidth();
            var oh = $("#d1").outerHeight();
            var ow2 = $("#d1").outerWidth(true);
            $("#d2").html("width:" + w + "===innerWidth:" + iw + "===innerHeight:" + ih + "===outerWidth(true):" + ow2);
        })
    </script>
</body>

</html>