菜单 搜索
首页 前端知识 python网站创建015：jQuery的各种操作

python网站创建015：jQuery的各种操作

2024-02-09 20:02:48 前端知识 前端哥 916 420 我要收藏

当我们找到标签之后，就要学习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>

效果：

 3、属性操作

修改标签属性：attr， 所有属性的修改都是使用attr

    <a id="v1" href="https://www.baidu.com" name="x1">百度</a>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 找到标签, href是(属性名)， 后面跟着修改后的(属性值)
        var data = $('#v1').attr('href','https://www.bilibili.com');
        console.log(data);
    </script>

4、 prop属性

全选框、取消全选框案例：假如有下面这么一个选择项表格，对于(全选)、(反选)、(取消全选)这三个按钮的功能， 使用jQuery怎么实现？

<body>
    <!--定义一个全选按钮-->
    <input type="button" value="全选" id="btnAll">
    <input type="button" value="取消全选" id="btnAll2">
    <input type="button" value="反选" id="btnAll3">

    <table border="1">
        <thead>
        <tr>
            <th>选择</th>
            <th>ID</th>
            <th>姓名</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td>小明</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td>小红</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>3</td>
            <td>小蓝</td>
        </tr>
        </tbody>
    </table>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
    </script>
</body>

(全选)按钮的实现方法：

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 首先给(全选)按钮绑定点击事件
        $('#btnAll1').click(function (){
            // 点击了干嘛呢？ 找到所有<input type="checkbox"/> 的勾选框
            var data = $('table input[type="checkbox"]');
            // 使用jQuery中prop的功能， 让checked=true就是选择， =False就是取消选择
            data.prop('checked',true);
        })
    </script>

效果：

 (取消全选)按钮实现方法，其实就是按照上面的方法， 让 checked = False 即刻

 效果：

 (反选)按钮实现方法：

// 反选：1.首先给(反选)按钮绑定点击事件
$('#btnAll3').click(function (){
    // 2. 因为有多个勾选框，所以用到循环(each)， 循环的是勾选框， 所以得找到勾选框
    var data = $('table input[type="checkbox"]');
    // 3. 然后使用(each)对其循环
    data.each(function (){
        // 4. 进入循环后， 首先获取目前(勾选框)的值
        var data = $(this).prop('checked');
        // 5. 然后使用非值， 对其进行反选操作
        $(this).prop('checked',!data);
    })
})

效果：

5、 文档操作

添加标签、删除标签：

<body>
    <div id="xxx">

    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 创建div。
        var tag = $("xxx").text("标签文本")

        // 在内部的(最底部)添加
        tag.append(tag)
        // 在内部的(最上面)添加
        tag.prepend(tag)

        // 在外部的(上面)添加
        tag.before(tag)
        // 在外部的(下面)添加
        tag.after(tag)
        
        // 删除标签
        tag.remove()
        
    </script>
</body>

清空标签文本内容：注意，input框内容不能清空

<body>
    <div id="xxx">
        文本内容......
    </div>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 将“文本内容......” 清空
        $("#xxx").empty();
    </script>
</body>

input框清空方法：

$("#input_id").val("")

6、 事件委托：给动态标签做绑定事件用

假如有下面这么一个界面， 需求是点击(名字)就删除， 在输入框输入文本点击(添加)，可以将输入的内容添加到下面， 如何实现？

这里要注意的是， 点击(添加)按钮添加的动态标签，必须使用on事件委托来绑定，否则新创建的li是无法删除的

<body>

    <input type="text" id="xxx">
    <input type="button" value="添加" id="btnAdd">

    <ul id="data_list">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
    </ul>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 1、给(添加)按钮绑定事件，输入内容点击(添加)后，将内容添加到ul里面
        $("#btnAdd").click(function (){
           // 创建li标签，内容取的是(输入框)的
            var tag = $("<li>").text($("#xxx").val())
            $("#data_list").append(tag);
        });

        // 2、代码意思是给#data_list下面所有li绑定click事件，点击就是执行后面的 function函数
        $("#data_list").on("click","li",function (){
            $(this).remove();
        });
    </script>
</body>

7、 框架预加载：当网站的内容、图片比较多， 加载慢， 而你不想等加载完就操作网站，你可以用以下方法

就拿下面这个(事件委托)代码来说：把函数写在外面，这样会造成需要等界面数据加载完之后， 才能操作界面

<body>

    <input type="text" id="xxx">
    <input type="button" value="添加" id="btnAdd">

    <ul id="data_list">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
    </ul>

    <script src="../file/jquery-3.7.1.min.js"></script>
    <script>
        // 1、给(添加)按钮绑定事件，输入内容点击(添加)后，将内容添加到ul里面
        $("#btnAdd").click(function (){
           // 创建li标签，内容取的是(输入框)的
            var tag = $("<li>").text($("#xxx").val())
            $("#data_list").append(tag);
        });

        // 2、代码意思是给#data_list下面所有li绑定click事件，点击就是执行后面的 function函数
        $("#data_list").on("click","li",function (){
            $(this).remove();
        });
    </script>
</body>

那如何改进这种问题呢？ 如何让框架加载完之后就可以操作呢？很简单， 在需要函数外边再加一个function就行了

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1636.html
标签
python
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

css3之animation 提交按钮简单的动画

2024-02-23 11:02:53

css3实现页面元素抖动效果

2024-02-23 11:02:53

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

纯CSS，利用before、after伪元素实现的几种链接hover效果一：旋转下划线加链接文字上闪效果

2024-02-23 11:02:46

【jQuery】如何在页面初始化时，默认选中指定值的单选按钮

2024-02-23 11:02:13

xhr、jQuery、axios、fetch、vue-resource简单了解和对比

2024-02-23 11:02:11

基于javaweb mysql的jsp servlet美食商城管理系统(java jsp bootstrap jquery mysql)

2024-02-23 11:02:04

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

【JS逆向】某麻将游戏数据生成JS加密逆向分析探索！

2024-02-22 10:02:34997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！