首页 前端知识 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
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!