AI智能
改变未来

jQuery属性


attr

获取列表中第一个元素的a属性值
$(“div”).attr(“a”)

设置属性
$(“div”).attr(“b”,“10”);

设置一个属性不同属性值
$(“div”).attr(“c”,function(index,item){
return index+1;
})

设置多个不同属性
$(“div”).attr({
b:“1”,
c:function(index,item){
return index+1;
}
})
attr设置后可以直接获取

$(“div”).removeAttr(“a”); //移除某个属性值。

prop

$(“div”).prop(“a”,“10”);
(\”div\”).a=10;console.log((\”div\”).a=10;console.log((\”div\”).a=10;console.log((“div”).a); //以上这两种方法设置a属性后,通着本行获取的a都是undefined,因为每$一个对象都是新的对象,而不是原来设置过a的对象
所以,先赋值给某个变量:

var list=(\”div\”);list.a=10;console.log(list);//把(\”div\”);list.a=10;console.log(list); //把(\”div\”);list.a=10;console.log(list);//把(“div”)赋值给list,并给list列表增加一个a属性

(\”div\”).prop(\”b\”,10);设置了jQuery列表中所有DOM的对象属性增加bconsole.log((\”div\”).prop(\”b\”,10); 设置了jQuery列表中所有DOM的对象属性增加bconsole.log((\”div\”).prop(\”b\”,10);设置了jQuery列表中所有DOM的对象属性增加bconsole.log((“div”).prop(“b”)); 从列表中取第一个元素的DOM对象属性b的值

利用prop完成的类型多选框的功能。
var bool=false;
$(\”:checkbox\”).on(“click”,function(){
bool=!bool;
// 所有是多选框类型的兄弟元素 siblings
$(this).siblings(\”:checkbox\”).prop(“checked”,bool);
})

data

(\”div\”).data(\”abc\”,10);//设置在一个jQuery映射对象上console.log((\”div\”).data(\”abc\”,10);//设置在一个jQuery映射对象上console.log((\”div\”).data(\”abc\”,10);//设置在一个jQuery映射对象上console.log((“div”).data(“abc”));

三种属性的区别

attr 是设置在DOM标签上的属性
prop 是设置在DOM对象上的对象属性
data 是设置在jQuery映射对象上的属性,为了不污染DOM对象的属性

attr与prop的区别:
1.两者都是设置属性,但是又有所不同…

attr()实际上是对html元素上的属性进行设置或者获取,而prop()是对我们用js/jq获取到的DOM元素对象进行属性设置或者获取.
比如:常见的表单标签:

<input type=\'text\' class=\'username\' name=\'username\'>

以上的input标签有3个属性,type,class,name,在jq中我们可以通过attr()方法来获取/设置这些属性,而当我们试图用prop()方法来获取这些属性时,我们发现,只能获取到class的属性,而type和name的属性都为undefined!
因为class属性已经被附加到DOM对象上去了,而type与name并没有

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery属性