Jquery中的data()方法att()prop()方法的区分

Posted 2020-09-06

　　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 属性。