jQuery 元素操作

最新推荐文章于 2022-09-13 14:08:17 发布

Psc-Trump

最新推荐文章于 2022-09-13 14:08:17 发布

阅读量142

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_41033308/article/details/108739118

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery 元素操作

1. 遍历元素

语法1：

$("div").each(function (index, demEle) { xxx; })

each()方法遍历匹配的每一个元素主要用DOM处理 each：每一个
里面的回调函数有2个参数 index是每个元素的索引号； demEle是每个DOM元素对象
所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

语法2：

$.each(object, function (index, element) { xxx; })

$.each()方法可用于遍历任何对象主要用于数据处理比如数组对象
里面的函数有2个参数； index是每个元素的索引号；element遍历内容

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

2.创建、添加、删除

1.创建

$("<li></li>");

2.1内部添加

element.append("内容")

把内容放入匹配元素内部最后面类似于原生appenChild

element.prepend("内容")

把内容放入匹配元素内部最前面

2.2 外部添加

element.after("内容") // 把内容放入目标元素后面

element.before("内容") // 把内容放入目标元素前面

注意：1.内部添加元素生成之后它们是父子关系

2. 外部添加元素生成之后它们是兄弟关系

3.删除元素

element.remove() //删除匹配的元素（本身）

element.empty() // 删除匹配的元素集合中所有的子节点

element.html("") // 清空匹配的元素内容

注意：1.remove 删除元素本身

2.empty() 和 html("")作业等价都可以删除元素里面的内容只不过html还可以设置内容

<script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素

            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面

            // (2) 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

        })
</script>

Psc-Trump

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 元素操作

jQuery 元素操作1. 遍历元素语法1：$("div").each(function (index, demEle) { xxx; })each()方法遍历匹配的每一个元素主要用DOM处理 each：每一个里面的回调函数有2个参数 index是每个元素的索引号； demEle是每个DOM元素对象所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 ...
复制链接

扫一扫

专栏目录