JQ——遍历（each遍历、数组遍历）、添加（append、appendTo）

1、each实现遍历操作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>each实现的遍历</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("button").click(function(){
                $("li").each(function(){
                alert($(this).text())
                    });
                });
            });
        </script>
    </head>
    <body>
        <button>点击按键，each实现遍历操作</button>
            <ul>
            <li>2020</li>
            <li>新年好！</li>
            <li>武汉加油！</li>
            </ul>
    </body>
</html>

2、遍历数组：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数组遍历</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function () {
                $.each([213,37,34,567,2020], function(index, value) {
                      alert(index + ‘: ‘ + value);
            });
        })
        </script>
    </head>
    <body>

    </body>
</html>

函数中，index代表角标，value代表遍历的每一个元素。

... ...

3、append实现添加操作（在被选元素的末尾添加）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>append实现添加操作</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
        $(function(){
            $("#button").click(function(){
                $("ul").append("<li>武汉加油！</li>");
            });
        });
        </script>
    </head>
    <body>
        <button id="button">append添加</button>
        <ul>
            <li>2020</li>
            <li>新年好！</li>
            <li>武汉加油！</li>
        </ul>
    </body>
</html>

4、appendTo实现添加操作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>appendTo实现添加操作</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
        $(function(){
            $("#button").click(function(){
                $("<li>武汉加油！</li>").appendTo("ul");
            });
        });
        </script>
    </head>
    <body>
        <button id="button">append添加</button>
        <ul>
            <li>2020</li>
            <li>新年好！</li>
            <li>武汉加油！</li>
        </ul>
    </body>
</html>

5、empty() 方法：移除被选元素内部的的所有子节点和内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>empty实现移除操作</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
        $(function(){
            $("#button").click(function(){
                $("ul").empty();
            });
        });
        </script>
    </head>
    <body>
        <button id="button">empty移除</button>
        <ul>
            <li>2020</li>
            <li>新年好！</li>
            <li>武汉加油！</li>
            <ol>新年快乐！</ol>
        </ul>
    </body>
</html>

点击按键前：

点击按键后：

ul内部的所有元素被移除，文字部分消失了。

6、remove() 方法：移除相匹配的元素所有的文本和子节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>remove实现移除操作</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
        $(function(){
            $("#button").click(function(){
                $("li").remove();
            });
        });
        </script>
    </head>
    <body>
        <button id="button">remove移除</button>
        <ul>
            <li>2020</li>
            <li>新年好！</li>
            <li>武汉加油！</li>
            <ol>新年快乐！</ol>
        </ul>
    </body>
</html>

点击按键前：

点击按键执行移除操作后：

只剩下ol元素内部的内容，li内部的内容已被移除。

原文地址：https://www.cnblogs.com/zhai1997/p/12234765.html

时间： 2024-10-27 04:51:11

JQ——遍历（each遍历、数组遍历）、添加（append、appendTo）的相关文章

微信小程序多层嵌套循环，二级数组遍历

小程序中的遍历循环类似于angularJS的遍历. 二级数组遍历有一个坑.二级遍历wx:for循环的时候,需要注意.(代码如下) JS代码: data: { groups: [ [ { title: '狼图腾', cover: '../../img/mineBG.png' }, { title: '狼图腾', cover: '../../img/mineBG.png' }, ], [ { title: '狼图腾', cover: '../../img/mineBG.png' }, ], [ {

JAVA遍历二位数组的方法

//使用方法对于二维数组进行遍历 package com; import java.util.Arrays; public class CompoundInterest { public static void main(String[] args) { // TODO Auto-generated method stub double[][] balances= new double[3][3]; for(int j = 0; j < balances[0].length; j++){ bal

JavaScript利用数组原型，添加方法实现遍历多维数组每一个元素

原型就是提供给我们为了让我们扩展更多功能的. 今天学习了用js模拟底层代码,实现数组多维的遍历.思想是在数组原型上添加一个方法. 1 // js中的数组forEach方法,传入回掉函数能够帮助我们遍历数组 2 var arr =[1,2,3,4,[1,2,[1,4]]]; 3 arr.forEach( 4 function(item , index , arr){ 5 alert(item); //1 2 3 4 1214 6 } 7 ); 8 //我们发现这个方法只提供给我们遍历一维数组的

08.18 javascript 06 数组数组的概念创建数组读取数组中的元素稀疏数组添加和删除数组的元素数组遍历多维数组数组的方法类数组对象作为数组的字符串

# 数组 ### 数组的概念 * 数组是值的有序集合 * 数组中的每个值称之为元素 * 每个元素可以是任意数据类型的值 * 每个元素都有索引(下标) * 元素的索引从0开始,按照顺序递增. 元素最大的索引 2^32-2 ### 创建数组 * 直接量 `[]` * 构造函方式 `new Array()` ### 读写数组中的元素 * 数组名[索引] ### 稀疏数组 * js数组的索引是连续的 * 没有连续的给元素赋值 , 没有赋值的元素会自动赋值 undefined ### 添加和删除数

js数组遍历

1.如何创建数组.2.数组的长度,数组元素的添加和删除(如何使用下标对数组的操作).3.遍历数组的方式(for循环,for-in遍历)4.二维数组(举例并遍历二维数组)5.操作数组的方法. push/pop.unshift/shift.splice reverse sort join slice concat 6.数组去重的方法(手写) 例:var arr=[3,2,4,3,6,2,2];为该数组去重. 7.如何给数组排序,如何逆序(反转数组).8.日期对象的创建.9.获取日期时间的方法.(如:

转：asp教程.net c#数组遍历、排序、删除元素、插入、随机元素数组遍历

asp教程.net c#数组遍历.排序.删除元素.插入.随机元素数组遍历 short[] sts={0,1,100,200};for(int i=0;i<sts.lenght;i++){ if(sts[i]>50) { ..... }} 数组随机元素 public hashtable noorder(int count) { arraylist mylist = new arraylist(); hashtable ha

转→js数组遍历千万不要使用for...in...

看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:http://m.blog.csdn.NET/blog/u014357977/38298263 正文↓ js数组遍历相信大家都不陌生,很多人会想到for循环和 for...in...循环,但是千万不要使用for...in...循环遍历数组,特别是如果你想写点有用的,能够移植的代码时.下面我们来看看这个

Effective JavaScript Item 49 对于数组遍历，优先使用for循环，而不是for..in循环

本系列作为Effective JavaScript的读书笔记. 对于下面这段代码,能看出最后的平均数是多少吗? var scores = [98, 74, 85, 77, 93, 100, 89]; var total = 0; for (var score in scores) { total += score; } var mean = total / scores.length; mean; // ? 通过计算,最后的结果应该是88. 但是不要忘了在for..in循环中,被遍历的永远是ke

PHP 数组遍历 foreach 语法结构

foreach 语法结构用于遍历数组. foreach() PHP foreach() 语法结构用于遍历操作或输出数组,foreach() 仅能用于遍历数组或对象,当试图将其用于其它数据类型或者一个未初始化的变量时会产生错误. 语法: foreach (array as $value) statement // 或者: foreach (array as $key => $value) statement 上述语法中,每次循环将当前单元的值赋给 $value 并且数组内部的指针向前移一步.在第二