11月15日：jquery属性操作的三个方法

黑布林景琛

已于 2022-11-17 11:28:23 修改

阅读量221

点赞数

文章标签： javascript 前端开发语言

于 2022-11-15 09:59:08 首次发布

本文链接：https://blog.csdn.net/qq_53457276/article/details/127860234

版权

jQuery的属性操作的三个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery属性操作</title>
    <script src="./jq/jq.js"></script>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <input type="checkbox" name="" checked>
    <div div="1" data-index="2">抖音</div>
    <span>123</span>
    <script>
        $(function (){
            //1.element.prop(“属性名”)获取元素固有的属性值(实际开发常用)
            console.log($("a").prop("href"));
            $("input").change(function(){
                console.log($(this).prop("checked"));
            });
            //2.attr获取元素自定义属性(实际开发常用)
            //console.log($("div").prop("div"));//不能通过element.prop()来获得用户自定义属性
            console.log($("div").attr("div"));
            $("div").attr("div",4);//可以通过attr来更改自定义属性的值
            //h5中的data自定义属性也可以通过attr来获取
            console.log($("div").attr("data-index"));
            //3.data()数据缓存，这个里面的数据是存放在缓存之中的(实际开发不   常用)
            $("span").data("id",1);
            //console.log($("span").data("id",1));
            console.log($("span").data("id"));
            //这个方法获取data-index h5自定义属性 第一个不用写data- 而且里面是数字型
            console.log($("div").data("index"));
        })
    </script>

</body>
</html>

内容文本值操作的三个方法：

html()：改变所有<a>元素里的内容，与text的区别是可以在<a>标签中继续添加标签

实例：

        $("button").click(function(){

                $("p").html("Hello <b>world</b>!");

        });

定义和用法

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。

text()：设置所有<a>元素中的文本内容

案例：$("button").click(function(){

$("p").text("Hello world!");

});

定义和用法

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html() 方法。

val()：设置<input>字段的值

获取定义好的值

输出页面输入的值

jQuery中三个元素操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jq.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","blue","green"];
            $("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());  //parseInt是将文本中的字符型转换为数字型
            });
            console.log(sum);
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.each用法</title>
    <script src="jq/jq.js"></script>
</head>
<body>
<script>
  //2、$.each()方法遍历元素 主要用于遍历数据，处理数据
  // $.each($("div"),function (i,ele){
  //     console.log(i);     //打印出索引值
  //     console.log(ele);   //打印出dom元素对象
  // });
  // $.each(arr,function (i,ele){
  //     console.log(i);
  //     console.log(ele);
  // });
  $.each({
    name: "angus",
    age: 22
  },function (i,ele){
    console.log(i);        //打印出name 和 age
    console.log(ele);      //打印出angus 和 22
  });
</script>
</body>
</html>

创建元素

var li = $("<li>我是后来创建的li</li>");

添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部添加</title>
    <script src="jq/jq.js"></script>
</head>
<body>
    <div class="tab">
        <div>中国</div>
        <div>中国1</div>
        <div>中国12</div>
        <div>中国123</div>
    </div>
        <script>
            $(function (){
               // append()：在被选元素的结尾插入内容
                $(".tab").append("<div>伟大的母亲</div>");    //在子节点之中进行添加
                // prepend()：在被选元素的开头插入内容
                $(".tab").prepend("<div>伟大的母亲</div>");     //在子节点之中进行添加
            })
        </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部添加元素</title>
    <script src="jq/jq.js"></script>
</head>
<body>
    <div>1</div>
    <button id="btn1">之前插入</button>
    <button id="btn2">之后插入</button>
    <script>
        $(function (){
            //before()：在被选元素之前插入内容
            $("#btn1").click(function (){
                $("div").before("<b>之前</b>")    //在父节点之外进行添加
            });
            //after()：在被选元素之后插入内容
            $("#btn2").click(function (){
                $("div").after("<b>之后</b>")    //在父节点之外进行添加
            });
        })
    </script>
</body>
</html>

// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀 //跟<ul>有关的所有标签全部删除
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 //清空<ul>中的所有元素，但是会保留<ul>框架
//$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子    //同empty();