二、jQuery的元素操作

m0_63634307

已于 2024-07-20 19:38:29 修改

阅读量135

点赞数 3

分类专栏：笔记文章标签： jquery 前端 javascript

于 2024-07-19 20:08:07 首次发布

本文链接：https://blog.csdn.net/m0_63634307/article/details/140558366

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（一）属性操作

1.1设置或获取元素固有属性值 prop()

获取元素固有属性即获取元素本身自带属性。

<body>
    <a href="https://www.baidu.com/" title="百度">百度</a>
<script>

        // 1.获取元素的固有属性 用 prop
        // 修改元素的固有属性prop("属性","值")
        console.log($("a").prop("href"));
        $("a").prop("href", "#")
</script>
</body>

1.2获取元素自定义的属性用attr

如<a>元素里href,<input>元素里type

<body>
<div index="1" class="aaa" data-index="2"></div>   
<script>
        // 获取元素自定义的属性用attr
        // 修改元素的自定义属性arrt("属性","值")
        console.log($("div").attr("index"));
        $("div").attr("index", "4")
        //获取h5自定义属性
        console.log($("div").attr("data-index"));
</script>
</body>

输出

1.3数据缓存 data()

<body>
<div index="1" class="aaa" data-index="2"></div>   
<script>
        // 把元素（span）当成变量看，把数据存储在元素里
        $("span").data("uname", "xiaoming")
        console.log($("span").data("uname"));
        // 用data获取h5自定义属性 不用写data- 而且返回值时数字类型
        console.log($("div").data("index"));
 </script>
</body>

输出

1.4获取到元素及内容 html()

例如$("div").html()获取div下级元素及内容

1.5修改获取到元素内容

$("div").html("<p>aaa</p>")

修改前

修改后

1.6获取文本值

例$("div").text("456")如图

1.7获取表单值 val（）

例$("input").val("123")如图

（二）jQuery元素操作-遍历

2.1遍历元素

针对同一类元素做不同的操作，需要用到遍历

语法1：$("div").each(function (index, dom) {}

<script>
        var arr = ["red", "green", "blue"]

        // 针对同一类元素做不同的操作，需要用到遍历
        $("div").each(function (index, dom) {
            // 回调函数的第一个参数一定是索引
            // 第二个参数一定是dom元素对象
            console.log(index, dom);
            $(dom).css("color", arr[index])
        })
</script>

输出

语法2：$("div").each(object,function (index, element) {}

主要用于数据处理，如数组，对象

element 遍历内容

<script>
// $.each() 方法可以遍历元素，也可以遍历数据
        $.each({
            name: "a",
            age: 18
        }, function (i, e) {
            console.log(i, e); //第一个输出是属性名 第二个输出是属性值
        })
</script>

输出