526互联

python网站创建015：jQuery的标签操作

发布时间 2023-12-25 21:58:49作者: 博无止境

当我们找到标签之后，就要学习jQuery对这个标签都能做哪些操作？

 

1、样式操作：也就是操作标签的css样式

添加样式：addClass

删除样式：removeClass

判断是否有该样式：hasClass

有则移除，无则添加：toggleClass

<!DOCTYPE html>
<html>
<head>
    <title>初识：JavaScript</title>
    <meta charset="UTF-8">

    <style>
        .test_style{
            background: red;
        }
    </style>
</head>

<body>
    <div id="v1">
        <div id ='v2'>
            <h1 id="info1"></h1>
        </div>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 添加test_style样式
        $(".v1").addClass('.test_style');
        // 删除test_style样式
        $(".v1").removeClass('.test_style');
        // 判断当前标签是否有test_style样式
        $(".v1").hasClass('.test_style');
        // 有test_style样式的话给你移除， 没有的话给你添加上
        $(".v1").toggleClass('.test_style');
    </script>
</body>
</html>

 

练习：在之前使用DOM和BOM时写了一个关于菜单的展开和收缩功能，如下，这是使用DOM和BOM来完成的

<!DOCTYPE html>
<html>
<head>
    <title>初识：JavaScript</title>
    <meta charset="UTF-8">

    <style>
        .group{
            /*宽度*/
            width: 300px;
            /*边框的边距和颜色*/
            border: 1px solid #ddd;
        }
        .group .father_menu{
            /*背景颜色*/
            background-color: gold;
            /*内边距*/
            padding: 8px 5px;
        }
        .group .son_menu a{
            /*将（子菜单）变成块级标签，让它各占一行*/
            display: block;
        }
        .hied{
            /*给（子菜单）加上这个样式， 标签就隐藏，去掉就显示*/
            display: none;
        }
    </style>
</head>

<body>
    <!--首先定义一个菜单模块-->
    <div class="group">
        <!--然后定义一个（父级菜单）-->
        <div class="father_menu" onclick="clickMe(this);">父级菜单</div>
        <!--然后定义模块，这个模块下定义两个（子菜单）-->
        <div class="son_menu">
            <a href="https://www.baidu.com">子菜单1</a>
            <a href="https://www.baidu.com">子菜单2</a>
        </div>
    </div>

    <script>
        function clickMe(ths){
        //获取到（父级菜单）
            var tag = ths.nextElementSibling;
            console.log(tag.className)
        //     tag.className获取（父级菜单）的类名，因为点击（父级菜单）时， 类名会发生变化,可以通过F12查看
            if (tag.className == "son_menu"){
                // classList意思操作样式，add添加
                tag.classList.add("hied")
            } else {
                // classList意思操作样式，remove删除
                tag.classList.remove("hied")
            }
        }
    </script>
</body>
</html>

效果：

 

 

接下来要使用jQuery看怎么实现：

 

 

 

 

练习二：如下，假如有这么一个双层菜单， 我点击一个展开， 第二个就自动关闭，点击第二个展开，第一个就自动关闭，如何实现？

 

 

 

2、 值和文本的操作

标签（值）操作：.val()

<!--定义输入框-->
<input type="test" id="v1"/>

// 获取输入值
$("#v1").val()
// 设置输入值
$("#v1").val('xxx')

 

标签（文本）操作：.text()

<div id='v2'>xxxx</div>

// 获取文本
$("#v2").text()
// 设置文本
$("#v2").test('xxx')

 

创造标签：意思是创建了a标签， 并往a标签里面设置xxxx内容

$('<a>').text('xxxx');

 

练习：如下， 假如现在要设置个聊天室功能， 输入内容点击（发送），就将输入的内容显示在下面的聊天框中，如何实现？

 思路：

1. 给（发送）按钮添加一个绑定事件

2. 获取输入框的输入内容

3. 优化：如果输入的内容为空，则弹框提示

4. 创建一个新的div，并将输入内容写入新div中

5. 将新的div加入到我们想要的位置中

<!DOCTYPE html>
<html>
<head>
    <title>初识：JavaScript</title>
    <meta charset="UTF-8">

</head>

<body>
    <div>
        <input type="text" placeholder="请输入内容" id="input_area">
        <input type="button" value="发送" id = "click_but">
    </div>

    <div id="chat">
        <div id="info_area" style="width: 800px; background-color: #dddddd; border: 1px solid #333333;height: 500px"></div>
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 1. 给（发送）按钮添加一个绑定事件
        $('#click_but').click(function (){
            // 2、获取输入框的输入内容
            var texts = $("#input_area").val();
            ///3、优化：如果输入的内容为空，则弹框提示，弹窗提示“输入的内容不能为空”
            if (texts.length < 1){
                // 设置弹窗
                alert('输入内容不能为空');
                // 因为是个函数， 所以需要return
                return;
            }

            // 4. 创建一个新的div，并将输入内容写入新div中
            var New_div = $('<div>').text(texts);
            // 5. 将新的div加入到我们想要的位置中。append：意思是在id=info_area的内部，添加一个标签
            $('#info_area').append(New_div);
        })
    </script>
</body>
</html>

 

效果：