jQuery获取更改标签内容、操作标签属性:html()、text()、val()、attr()、prop()

1、jQuery操作标签里的内容

  • 三种方式:html()、text()、val();
  • html():获取标签里所有的内容,包括子标签及后代标签的内容,返回结果是标签+内容;
  • text():获取标签里所有的内容,包括子标签及后代标签的内容,返回结果仅仅是内容;
  • val():获取输入框里的值;

  • html():不传参数是获取标签里的内容
<body>
    <div id="box">11111
        <div>22222
            <p>33333</p>
        </div>
    </div>
    <script>
        console.log($("#box").html())
    </script>
</body>

结果:

 

  •  html(参数):传参数是设置标签里的内容
<body>
    <ul>

    </ul>
    <script>
        var arr = ["aaa","bbb","ccc"]
        var listr = arr.map(item => `<li>${item}</li>`).join("")
        console.log($("ul").html(listr))
    </script>
</body>

结果:

  • text(): 不传参数是获取;
<body>
    <div id="box">11111
        <div>22222
            <p>33333</p>
        </div>
    </div>
    <script>
        console.log($("#box").text())
    </script>
</body>

结果:

  • text(参数):它也能传参数,但是不会解析了,会把字符串也插在页面上 
<body>
    <ul>

    </ul>
    <script>
        var arr = ["aaa","bbb","ccc"]
        var listr = arr.map(item => `<li>${item}</li>`).join("")
        console.log($("ul").text(listr))
    </script>
</body>

结果:

  • val ():获取input框里的内容:
<body>
    <input type="text">
    <script>
        console.log($("input").val())
    </script>
</body>
  • 因为我们没绑事件,所以直接打印是没啥用的,我们在控制台上演示看一下:

 

2、jquery操作标签身上的属性

  • 标签身上的属性包括:原生属性、自定义属性;
  • 原生属性,比如:id、class、value等;
  • 自定义属性是为了需要我们给标签加的,比如:index=”1“;
  • 操作标签身上的属性有两种方法:
  • attr():可以操作自定义属性,也可以操作原生属性;
  • prop():可以操作原生属性,不能操作自定义属性;

  •  attr:获取和设置原生属性
<body>
    <div id="box" index="1">11111</div>
    <script>
        console.log($("#box").attr("id"))//获取原生属性
        console.log($("#box").attr("id","box2"))//设置原生属性
    </script>
</body>

结果:

  •   attr:获取和设置自定义属性
<body>
    <div id="box" index="1">11111</div>
    <script>
        console.log($("#box").attr("index"))//获取自定义属性
        console.log($("#box").attr("index","2"))//设置自定义属性
    </script>
</body>

结果:

  •   attr()移除原生和自定义属性:
console.log($("#box").removeAttr("index"))//移除自定义属性
console.log($("#box").removeAttr("id"))//移除原生属性

attr可以移除自定义和原生属性,但是不常用,也没啥意义,有更好的办法;

  • prop():操作原生属性:
<body>
    <div id="box" index="1">11111</div>
    <script>
        console.log($("#box").prop("id"))//获取原生属性
        console.log($("#box").prop("id","box2"))//设置原生属性
    </script>
</body>

结果:

面试题:

说一说attr()和prop()的区别:

arr能获取和设置原生属性、自定义属性,也能移除原生和自定义属性;但是prop只能获取和设置原生属性,不能操作标签身上自定义属性,如果它操作自定义属性了,那这个变化是发生在这个对象身上的(不过我们不需要它那样做),prop也不能移除原生属性,自定义属性(但如果移除了自定义属性也是在对象身上移除的,并不能移除标签身上的属性);所以为了各有分工,prop就来操作原生属性,attr操作自定义属性。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery可以使用attr()方法来设置标签属性。例如,可以使用以下代码来设置一个标签的class属性为"active":$('#content').attr('class', 'active')。同样,可以使用attr()方法来设置id、name和href等属性。另外,如果要设置标签的文本,可以使用html()方法:$('#id').html('标签的文本')。如果需要设置input标签的值,可以使用val()方法:$('#input').val('xxxxxxx')。 除了设置属性,还可以使用css()方法来设置标签的样式属性,比如宽度、高度和文本对齐等。例如,可以使用以下代码来设置一个div标签的背景颜色为黄色,字体大小为200%:$("div").css({"background-color":"yellow","font-size":"200%"})。还可以使用css()方法传入一个包含多个样式属性的对象来设置多个样式属性。例如:var css = { background-color: '#EEE', height: '500px', margin: '10px', padding: '2px 5px' }; $("div").css(css)。 此外,官方建议对于具有true和false两种取值的属性,如checked、selected和disabled等,使用prop()方法来操作,而其他属性则建议使用attr()方法来操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Jquery 创建标签属性](https://blog.csdn.net/weixin_45815569/article/details/120997156)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [jquery怎么给元素设置属性](https://blog.csdn.net/m0_66722601/article/details/128284698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值