H5-JQuary属性操作

最新推荐文章于 2022-10-21 13:01:51 发布

天堂比不过家乡啦

最新推荐文章于 2022-10-21 13:01:51 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/lieuly/article/details/109054478

版权

本文详细介绍了HTML属性操作与DOM属性操作的区别，重点讲解了attr()和prop()的使用场景。attr()主要用于处理自定义DOM属性，而prop()适用于处理元素的固有属性，如checked、selected等。文章通过实例展示了如何进行值操作、样式操作和数据保存，并强调了何时使用attr()和prop()。

摘要由CSDN通过智能技术生成

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

属性 attr(attribute) prop(property)

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

什么时候使用attr()，什么时候使用prop()？

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

attr()设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})

prop() 方法设置或返回被选元素的属性和值。

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

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
设置多个属性和值：
$(selector).prop({property:value, property:value,...})

数据保存

var map = {
    id : $(this).attr("data-myid"),
    type : "radio",
    value : value,
    name : $(this).attr("name")
}

//表示定义一个空对象；
var a={};
new Object();
//表示定义一个空数组
new Array();
var a=[];