jQuery - 捕获内容和属性

前言: 

        jQuery拥有可以操作HTML元素和属性的强大方法


1.用过jQuery来获得内容的三个方法:

  • text() : 设置或者返回所选元素的文本内容
  • html():   设置或返回所选元素的内容(包括HTML标记)

包括HTML标记   是 text() 和 html() 两个方法的最大区别

  • val() : 设置或者返回表单字段的值

案例:

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

        //设置元素内容
        $("div").html("哈哈");

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

        $("div").text("23");

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

页面中显示的结果:  


2.通过jQuery来获得元素属性 

2.1 设置或获取元素固有属性  prop()方法

 所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href 比如<input>元素里的type属性

2.1.1 获取属性语法: 

    prop("属性") 

 2.1.2 设置属性语法:

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

案例:

<script>
    $(function(){
    //element.prop("属性名") 获取元素固有的属性值
     console.log($("a").prop("href"));
    
    //设置属性值
    $("a").prop("title","请问你是谁?");

})
</script>

2.2.设置或获取元素自定义属性值  attr() 方法 

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

2.2.1获取属性语法:

attr("属性") 

2.2.2 设置属性语法:

attr("属性","属性值");

案例: 

 <div index="1" data-index="2">我是div</div> 


  //元素自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index",4);
            console.log($("div").attr("data-index"));
发布了130 篇原创文章 · 获赞 33 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/qq_30631063/article/details/103186543