Jquery中的data()方法、att()、prop()方法的区分
Jquery中向我们提供了三种方法
data()
att()
prop()
来设置和获取对象的属性。但是设计这三种方法并不会重复无用的设计,那么他们三个的区分在哪里呢。
demo:
<div >我是一个DIV</div>
attr()方法:是JS中getAttribute()和setAttribute()方法的集成体
用法最为常规。
$('div').attr({age:30,address:"tianjin"});
var age = $('div').attr("age");
$('div').removeAttr("age address"); 如果要删除多个属性,中间用空格隔开。
通过attr()方法获得的属性,在HTML页面检查元素中都可以看到该属性。
prop()方法:比较安全和隐秘的方法
设置属性和获得属性与attr()方法一致的用法。
不同:
part1:通过prop()方法获得属性,在HTML页面检查元素中看不到该属性。该属性存在了内存当中。
part2:prop()在对radio,select,checkbox进行选中属性操作的时候,值为true/false
e.g.
$('radio').prop('checked',true);
$('radio').attr('checked',"checked");
data()方法:更为安全、隐秘的方法
在HTML界面,检查元素中,可以观察并且修改标签的属性值。
通过attr()方法设置的属性,可以修改HTML界面的标签属性值。但是在涉及到金融等要与数据库进行交互的地方,我们不能允许用户修改它的值。因此衍生出了data()方法。
方式:
<div data-name = "li">我是一个DIV</div>
通过在标签中设置 data-(...) 的方式来设置 data 属性。
注意: data- 后面的内容 只能为全大写或者全小写。推荐全小写。
$('radio').data(“name”); 来访问标签的data-name 属性。