顽皮的雪狐七七
顽皮的雪狐七七

js、jquery的属性操作方法总结

目录

  • 属性分为三种：
  • js原生属性操作方法
    • 获取属性
    • 设置属性
    • 删除属性
    • 自定义数据属性 dataset
      • 获得自定义属性的值
      • 设置自定义属性的值
      • 删除自定义属性
      • 判断是否有此属性
      • dataset的问题
        • 兼容问题
        • 值类型问题
    • dataset与attribute的比较
  • jquery属性方法操作
    • 获取和设置属性 attr()
      • 获取属性
      • 设置属性
    • 删除属性 removeAttr()
    • 获取和设置特性 prop()
      • 获取属性
      • 设置属性
    • 删除属性 removeProp()
    • 特别说明（prop必看）
      • 输出比较表(未完)
    • 获取和设置自定义属性 data()
      • 获取自定义属性
      • 设置自定义属性
        • 设置单个属性值
        • 设置多个属性值
    • 删除自定义属性 removeData()
  • 总结
    • 取属性出来有没有被强制转化为字符串
    • 没有此属性，返回值是什么？
    • attr()与data()
    • 元素集(未完)
    • attr的input中的checked属性问题

属性分为三种：

  1. html标签特性，例如普通的class，input中的name等
  2. 用户自定义属性，div中设置的cmd、time属性等
  3. 用户自定义data-属性，这个是DOMStringMap的一个实例。区别于上面的。

js原生属性操作方法

  • 获取属性 getAttribute()
  • 设置属性 setAttribute()
  • 删除属性 removeArrtibute()
  • 自定义数据属性 dataset
  • dataset与attribute的比较

获取属性

方法

domObj.getAttribute(attribute);

  • dom元素调用方法
  • 参数是属性名
  • 该方法是js原生方法去获得DOM属性值
  • 返回的值不管之前是什么，都返回string字符串格式

栗子

    var domObj = document.getElementById("example");
    var id = domObj.getAttribute("id");  //"example"
    typeof id //"string"

设置属性

方法

domObj.setAttribute(attribute,value);

  • dom元素调用方法
  • 参数1是属性名
  • 参数2是设置的值
  • 如果有此属性，直接更改覆盖原属性值
  • 如果无此属性，创建属性，并设置属性值

栗子

    var domObj = document.getElementById("example");
    domObj.getAttribute("title");  //null  不存在属性便会返回null
    domObj.setAttribute("title","good");
    domObj.getAttribute("title"); //"good"

删除属性

方法

domObj.removeAttribute(attribute);

  • dom元素调用方法
  • 参数1是属性名
  • 如果传多个参数或者不传参数会报错，只能一个属性一个属性的删除

栗子

    var domObj = document.getElementById("example");
    domObj.removeAttribute("class");
    domObj.getAttribute("class"); //null

自定义数据属性 dataset

HTML5新增的用户自定义属性，并规定形式为"data-"，目的是为元素提供与渲染无关的信息，或者提供语义信息。 很多时候，我们会把一些信息定义到dom元素中，以供使用。
形式如下：

而定义了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值，也可以进行设置。

dataset属性的值是DOMStringMap的一个实例，其中有映射关系，

规则如下:

  • data-name在dataset对象中属性是name。
  • data-id-name在dataset对象中属性是idName
  • data自定义属性设置之后还是会==返回string字符串格式==

获得自定义属性的值

var example = document.getElementById("example");
var id = example.dataset.id;  //12
var type = example.dataset.typeName;  //normal

设置自定义属性的值

var example = document.getElementById("example");
example.dataset.id = 12345;  //12345
example.dataset.typeName = 'special';  //special

删除自定义属性

var example = document.getElementById("example");
//删除属性和值
delete example.dataset.typeName;   //true
example.dataset.typeName   //undefined
//只删除值
example.dataset.typeName = "";

判断是否有此属性

var example = document.getElementById("example");
if(example.dataset.id){
    alert("hello");
}

dataset的问题

1. 兼容问题
js、jquery的属性操作方法总结_第1张图片
兼容问题

一些浏览器如IE11-,andriod 2.3-,ios10-是没有dataset这个对象的，所以如果要兼容低版本的浏览器，需要加上兼容代码：

if(example.dataset){
    example.dataset.idName='12';
}else{
    example.setAttribute('data-id-name','12');
}
2. 值类型问题

dataset和attribute设置的数值就算是true、123、[1,2,3]，在读取的时候仍然是==字符串类型==

var example = document.getElementById("example");

example.dataset.idName = 123;
typeof example.dataset.idName;  //"string"

example.dataset.idName = true;
typeof example.dataset.idName; //"string"

example.setAttribute("time",123456);
example.setAttribute("ok",true);

typeof example.getAttribute("time"); //"string"
typeof example.getAttribute("ok"); //"string"

dataset与attribute的比较

  • dataset在运行速度上面没有attribute快，但是就其数量时间几乎可以忽略不计，而他可以让我们省去很多attribute带来的麻烦，具有较强的可读性，尤其在添加一些不可见的数据以便进行其他处理，使用自定义属性比较好。但是如果需要兼容低版本，dataset是有兼容问题的。
  • dataset设置的属性，getAttribute是可以访问的，：
example.dataset.idName = 'hello';
example.getAttribute("data-id-name"); //"hello"

jquery属性方法操作

  • 获取和设置属性 attr()
  • 删除属性 removeAttr()
  • 获取和设置特性 prop()
  • 删除特性 removeProp()
  • 获取和设置自定义属性 data()

获取和设置属性 attr()

获取属性

方法

$div.attr(attribute);

  • 传一个参数是获取元素属性的值
  • 参数是“属性名”
  • 用attr获取的属性值，无论设置的时候是什么，都返回string字符串类型

栗子

var $div = $("#example");
var titleValue = $div.attr("title"); //获取title属性值
//如果读取的是data-属性
var dataTitleValue = $div.attr("data-title"); //获取data-title属性值

设置属性

方法

设置单个属性值

$div.attr(attribute,value);

  • 传两个参数是设置元素属性的值
  • 参数1是要设置的属性名
  • 参数2是要设置的属性值

设置多个属性值

$div.attr({attribute1:value,attribute2:value});

  • 传一个json对象，里面的属性分别是键/值

栗子

var $div = $("#example");
$div.attr({"title":"good","time":10,"ok",false});
var titleValue = $div.attr("title");
//"good"
typeof titleValue;
//"string"
var timeValue = $div.attr("time");
//"10"
typeof timeValue;
//"string"
var okValue = $div.attr("ok");
//"false"
typeof okValue;
//"string"


//设置data-属性值
var dataTitleValue = $div.attr("data-title","ohhh");
//"ohhh"

删除属性 removeAttr()

方法1

$div.removeAttr(attribute);

  • 传一个参数是删除特定属性
  • 参数是“属性名”

方法2

$div.removeAttr(attribute1 attribute2);

  • 传一个参数并用空格隔开可以删除多个属性
  • 参数是“属性名1 属性名2 ...”

栗子

var $div = $("#example");
//


//if:
$div.removeAttr("title");
//

var titleValue = $div.attr("title");
//undefined

//else if
$div.removeAttr("title class");
//


//删除自定义属性值
$div.removeAttr("data-title");
//

与attr("title","")的区别

removeAttr("title")是删除整个“title”属性，而attr("title","")是删除“title”属性的值：

//

removeAttr("title");
//

attr("title","")
//

获取和设置特性 prop()

获取属性

方法

$div.prop(property);

  • 传一个参数是获取元素属性的值
  • 参数是“属性名”
  • 用attr获取的属性值，无论设置的时候是什么，都==返回string字符串类型==

栗子

var $div = $("#example");
var titleValue = $div.prop("title"); //获取title属性值

设置属性

方法

设置单个属性值

$div.prop(property,value);

  • 传两个参数是设置元素属性的值
  • 参数1是要设置的属性名
  • 参数2是要设置的属性值

设置多个属性值 (zepto不支持)

$div.prop({property1:value1,property2:value2});

  • 传一个json对象，里面的属性分别是键/值

栗子

var $div = $("#example");
$div.prop("title","good");
var titleValue = $div.prop("title");
//"good"

删除属性 removeProp()

方法1

$div.removeProp(property);

  • 传一个参数是删除特定属性
  • 参数是“属性名”
  • 删除之后此属性值为undefined;

栗子

var $div = $("#example");
$div.removeProp("title");
var titleValue = $div.prop("title");
//"undefined"

特别说明（prop必看）

prop()方法主要针对于html的固有属性，所以就会有在读取属性值的时候，很多时候是读不到的。那我们可以用prop读的范围有哪些？

标签 property
html lang,id,class,style,title,tabIndex
div id,class,style,title,tabIndex
input id,class.style,title,tabIndex

例如：

属性 attr prop 说明
div-->class can can 固有属性
div-->name can undefined 自定义属性
div-->data-time can undefined 自定义data属性
input -->type can can 固有属性
input-->time can undefined 自定义属性
input-->data-type can undefined 自定义data属性

输出比较表(未完)

element 属性 example attr prop
全局属性 id
hello hello
全局属性 class
hello hello
全局属性 ==style==
color:red; CSSStyleDeclaration对象
全局属性 title
hello hello
全局属性(基本作用于中,以下标签无效,
,,,
,