js学习笔记——（16）jQuery属性操作、文本属性值、元素操作

最新推荐文章于 2024-04-30 00:45:00 发布

脸红流氓兔

最新推荐文章于 2024-04-30 00:45:00 发布

阅读量195

点赞数 3

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_41860287/article/details/105789327

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.jQuery属性操作

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

所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type

1.获取属性语法

prop(“属性”)

2.设置属性语法

prop("属性“, “属性值”)

1.2设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性，比如给div添加 index = 1；

1.获取属性语法

attr(“属性”)； //类似于原生getAttribute()

2.设置属性语法

attr(“属性”，“属性值”)；//类似于原生setAttribute

1.3数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

1.附加数据语法

data(“name”, “value”); //向被选元素附加数据

2.获取数据语法

data(“name”); //向被选元素获取数据

同时，还可以读取HTML5自定义属性，data-index,得到的是数字型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <a href="http://www.itcase.cn" title="">好好学习</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1.element.prop("属性名") 获取属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "好好学习");
            $("input").change(function() {
                    console.log($(this).prop("checked"));
                })
                // console.log($("div").prop("index"));
                //2.元素的自定义属性  我们通过 attr
            console.log($("div").attr("index", 4));
            console.log($("div").attr("data-index"));
            //3.数据缓存 data()  这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            //这个方法获取data-index h5自定义属性  第一个不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

</html>

2.jQuery内容文本值

主要针对元素的内容还有表单的值操作

1.普通元素内容html()（相当于原生innerHTML)

html(); //获取元素内容

html(“内容”); //设置元素的内容

2.普通元素文本内容text() (相当于原生innerText)

text(); //获取元素文本内容

text(“文本内容”)； //设置元素文本内容

3.表单的值val()（相当于原生value）

val(); //获取表单的值

val(“表单内容”)； //修改表单内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        //1.获取设置元素内容
        // console.log($("div").html());
        // $("div").html("123");

        //2.获取设置元素文本内容
        console.log($("div").text());
        $("div").text("123");

        //3.获取设置表单值  val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>
</html>

4.parents(“选择器”)，可以返回指定祖先元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">我不容易</div>
            </div>
        </div>
    </div>
    <script>
        console.log($(".four").parent().parent().parent());
        console.log($(".four").parents());
        console.log($(".four").parents(".one"));
    </script>
</body>

</html>

3.jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

3.1遍历元素

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

语法1：

在这里插入图片描述
1.each()方法遍历匹配的每一个元素，主要用DOM处理，each()每一个

2.里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象。

3.所以要想是使用jQuery方法，就需要给这个dom元素转换为jQuery对象$(domEle)

语法2：

在这里插入图片描述
1.$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象

2.里面的函数有2个参数：index是每个元素的索引号，element遍历内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $("div").css("color", "red");
            //如果针对于同一类元素做不同的操作 需要遍历元素 （类似于for，但是比for强大）
            //1.each()方法遍历元素
            var sum = 0;
            var arr = ["red", "green", "blue"];
            $("div").each(function(index, domEle) {
                //回调函数第一个参数一定是索引号  可以自己指定索引号名称
                console.log(index);
                //回调函数第二个参数一定是dom元素对象  
                console.log(domEle);
                // domEle.css("color"); //dom对象没有css方法
                $(domEle).css("color", arr[index]);
                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); //输出的是属性名
                console.log(ele); //输出的是属性值
            })
        })
    </script>
</body>

</html>

3.2创建元素

语法：

在这里插入图片描述
动态创建了一个li标签；

3.3添加元素

1.内部添加

在这里插入图片描述
把内容放入匹配元素内部最后面，类似原生appendChild

2.外部添加

在这里插入图片描述
①内部添加元素，生成后，他们是父子关系。
②外部添加元素，生成后，他们是兄弟关系。

3.4删除元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <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>
</body>

</html>