jQuery元素操作

最新推荐文章于 2024-11-05 22:07:06 发布

九阈

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量113

点赞数

分类专栏： # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_46048542/article/details/125571236

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

遍历元素

jQuery隐式迭代是对同一元索做了同样的操作。如果想要给同一元索做不同操作,就需要用到遍历。

遍历元素each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

语法1 :

$ ("div").each(function(index, domEle){ XXX; })

1、each()方法遍历匹配的每一个元索。主要用DOM处理。each每-一个
2.里面的回调函数有2个参数: index 是每个元索的索引号; demEle是每个DOM元索对象,不是jquery对象
3.所以要想使用jquery方法,需要给这个dom元索转换为jquery对象$(domEle)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            // $("div").css("color","red");
            //如果针对于同一类元素做不同操作，需要用到遍历元素(类似for,但是比for强大)
            //1.each()方法遍历元素
            var arr = ["red","green","blue"];
            $("div").each(function(i,domEle){
                //回调函数第一个参数一定是索引号 可以自己指定索引号名称
                console.log(i);
                //回调函数第二个参数一定是dom元素对象
                console.log(domEle);
                $(domEle).css("color",arr[i]);
            })
        })
    </script>
</body>
</html>

请添加图片描述

语法2 :

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

1.$.each0方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2.里面的函数有2个参数: index 是每个元索的索引号; element遍历内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            // $("div").css("color","red");
            //如果针对于同一类元素做不同操作，需要用到遍历元素(类似for,但是比for强大)
            //2.$.each()方法遍历元素,主要用于遍历数据，处理数据
            var arr = ["red","green","blue"];
            $.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>
</html>

请添加图片描述

创建元素

创建元素语法:

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

动态的创建了一个li

添加元素

1.内部添加

element.append("内容")

把内容放入匹配元索内部最后面,类似原生appendChild.

element.prepend("内容")

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

①内部添加元素,生成之后,它们是父子关系。

2.外部添加

element.after("内容'")

把内容放入目标元素后面

element.before("内容")

把内容放入目标元素前面

②外部添加元素,生成之后,他们是兄弟关系。

删除元素

element.remove()

删除匹配的元索(本身)

element.empty()

删除匹配的元素集合中所有的子节点

element.html("")

清空匹配的元索内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>
    <script>
        $(function(){
            //1.创建元素
            var li = $("<li>最后面</li>");
            var li2 = $("<li>最前面</li>");
            //2。添加元素
            //(1)内部添加
            $("ul").append(li);//内部添加并且放到内容的最后面
            $("ul").prepend(li2);//内部添加并且放到内容的最前面
            //(2)外部添加
            var div = $("<div>后来的div</div>");
            $(".test").after(div);
            //3.删除元素
            // $("ul").remove();//可以删除匹配的元素
            // $("ul").empty();//可以删除匹配的元素里面的子节点
            // $("ul").html("");//可以删除匹配的元素里面的子节点
        })
    </script>
</body>
</html>