前端HTML调用jQuery库，鼠标点击删除元素、替换元素、遍历t元素、遍历添加元素、遍历填充背景色（前端：HTML搭配jQuery系列教程五）

最新推荐文章于 2021-11-12 22:43:41 发布

Kkh_8686

最新推荐文章于 2021-11-12 22:43:41 发布

阅读量355

点赞数 1

分类专栏： web端 flask 服务器文章标签： jquery html5 html javascript

本文链接：https://blog.csdn.net/K_AAbb/article/details/116905574

版权

web端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

服务器

14 篇文章 0 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

鼠标点击删除元素、替换元素、遍历元素、遍历添加元素、遍历填充背景色

说明：在jQuery中，想要删除、调换元素，我们有以下3种方法：

remove() //该语法是删除元素
detach() //该语法是调换两个元素
empty() //改语法是对元素删除，然后填充为空

1、在jQuery中，我们可以使用remove()方法来将某个元素及其内部所有内容删除。

语法：

// An highlighted block
$().remove()

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

运行效果：

未点击删除键前：

在这里插入图片描述

点击一次删除键：

在这里插入图片描述

点击三次删除键：

在这里插入图片描述

分析：

$(“li:nth-child(4)”).remove()表示删除ul元素下的第4个li元素。记住，在jQuery中，除了:nth-child()和:nth-of-type()这两个的下标是从1开始的，其他所有选择器或jQuery方法的下标都是从0开始。

2、在jQuery中，我们可以使用replaceWith()方法来将某个元素替换成其它元素。

语法：

// 将A替换成B
$(A).replaceWith(B)

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("strong").replaceWith('<a href="http://www.baidu.com" target="_blank">百度帅哥</a>');
            });
        })
    </script>
</head>
<body>
    <strong>谢霆锋</strong><br/>
    <input id="btn" type="button" value="替换" />
</body>
</html>

运行效果：

鼠标点击前：
鼠标点击前：

3、在jQuery中，我们可以使用each()方法轻松实现元素的遍历操作。

语法

$().each(function(index, element){
    ……
})

语法说明：

each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。

index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。

element是一个可选参数，它表示当前元素，可以使用(this)代替。也就是说，(element)等价于$(this)。

如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。

上面语法是固定形式，如果小伙伴们的JavaScript基础太差实在没法理解的话，在实际开发中直接搬过去就能用了。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("li").each(function (index) {
                    var txt = "第" + (index + 1) + "个li元素";
                    $(this).text(txt);
                });
            });
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <input id="btn" type="button" value="添加内容" />
</body>
</html>

运行效果
点击前：

点击后：

4、在jQuery中，我们可以使用each()方法遍历为每个li添加内容。

语法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //定义数组
            var arr = ["黄飞鸿", "苏乞丐", "叶问", "李小龙", "还有谁？"];
            $("#btn").click(function () {
                //将数组元素一一赋值给对应索引号的li元素
                $("li").each(function (index) {
                    var txt = arr[index];
                    $(this).text(txt);
                });
            });
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <input id="btn" type="button" value="添加内容" />
</body>
</html>

运行效果
点击前：

点击后：

5、在jQuery中，我们可以使用each()方法遍历为每个li填充背景颜色。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../static/js/jquery-3.5.1.js" ></script>
    <script>
        $(function(){
            //定义颜色数组
            var colors=["red","orange","yellow","green","blue"];
            //为元素添加背景颜色
            $("#btn").click(function(){
                $("li").each(function(index){
                    $(this).css("background-color",colors[index]);
                });
            });
        })
    </script>
</head>
<body>
    <ul>
        <li>黄飞鸿</li>
        <li>苏乞丐</li>
        <li>叶问</li>
        <li>李小龙</li>
        <li>李云龙</li>
    </ul>
    <input id="btn" type="button" value="添加背景" />
</body>
</html>

运行效果：
点击前：

点击后：

Kkh_8686

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端HTML调用jQuery库，鼠标点击删除元素、替换元素、遍历t元素、遍历添加元素、遍历填充背景色（前端：HTML搭配jQuery系列教程五）

鼠标点击删除元素、替换元素、遍历元素、遍历添加元素、遍历填充背景色说明：在jQuery中，想要删除、调换元素，我们有以下3种方法：remove() //该语法是删除元素detach() //该语法是调换两个元素empty() //改语法是对元素删除，然后填充为空1、在jQuery中，我们可以使用remove()方法来将某个元素及其内部所有内容删除。语法：// An highlighted block$().remove()代码：<!DOCTYPE htm
复制链接

扫一扫

专栏目录