当前位置：首页 > Web开发 > 正文

jQuery属性操作

2024-03-31 Web开发

标签：

1.添加/修改/获取属性 attr()

attr()方法其实是原生getAtrribute()和setAttribte()的结合体，语法上更加简洁。
它支持同时操作多个属性，只要将多个属性包装成对象传入即可

注意：它操作的是标签内的属性

<body> <div id="test">hello world</div> </body> <script> $(function(){ var $div = $("div") // 添加class属性 $div.attr("class","center") // 添加自定义属性 $div.attr("xxx","abc") // 修改id属性的值 $di.attr("id","box") // 获取属性值 console.log($div.attr("id")) //box }) </script>

运行结果：

<div id="test" class="center" xxx="abc">hello world</div>

同时操作多个属性

<body> <div id="test">hello world</div> </body> <script> $(function(){ var $div = $("div") // 同时操作多个属性 $div.attr({ "id":"box", "class":"center", "xxx":"abc" }) }) </script>

运行结果与上面的一致：

<div id="box" class="center" xxx="abc">hello world</div> 2.移除属性 removeAttr()

可以移除一个或多个属性，每个属性用空格隔开

<body> <div id="box" class="center" xxx="abc">hello world</div> </body> <script> $(function(){ var $div = $("div") // 移除一个属性 $div.removeAttr("xxx") // 移除多个属性 $div.removeAttr("id class") }) </script>

运行结果：

<div>hello world</div> 3.prop()

prop()可以读取/修改/添加元素的属性，相当于原生js的点语法

注意：严格的说，attr()操作标签属性，而prop()操作js内存中元素的属性，在操作元素原生的属性（id,class,title）时，他们作用时一样的，或者说他们数据共通。
但是在操作多选，复选框的 checked 属性时，还是有区别的。因为标签的 checked 只是在初始化时有用，其他时候只是摆设。真正生效的是内存中的元素属性，所以此时只能用prop()

基本用法：

运行结果：

<div id="box" class="center" title="this is a title">hello world</div>

通过prop()设置的自定义属性既不在div标签中，也没有挂载到$div对象中。其实它挂载到了原生Dom中了

var div = document.querySelector("div") console.log(div.yyy,div.color) // def red 4.removeProp() 移除属性

只是将属性值设为 undefined

// 移除xxx自定义属性 $div.removeProp("xxx") console.log($div.prop("xxx"))//undefined // 移除title属性 $div.removeProp("title")

运行结果：

<div id="box" class="center" title="undefined">hello world</div>

jQuery属性操作

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/8597.html

上一篇：2019.10.2怎么查看那些ip访问了你的网站
下一篇：学习网站噻

jQuery属性操作

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢