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

说明：在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>

运行效果：

  • 未点击删除键前：

jquery怎么往页面添加数据_javascript

  • 点击一次删除键：

jquery怎么往页面添加数据_html5_02

  • 点击三次删除键：

jquery怎么往页面添加数据_jquery_03

分析：

$(“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>