在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法。
在开始操作前,我们需要先在html中添加如下代码,后面所有的操作都是基于该DOM结构进行的。
属性操作
获取和设置属性
在前面我们提到过一个方法attr(),通过给该方法添加一个参数(属性名称),可以获取相应信息。
$(function(){
var txt = $("ul li:eq(1)").attr("title");
console.log(txt);
})
当给该方法传递多个参数时,可以用来设置相关属性。
$(function(){
$("ul li:eq(1)").attr("title","最喜欢的水果");
$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});
})
删除属性
在jQuery中,使用removeAttr()方法删除某个元素的特点属性。
$(function(){
$("p").removeAttr("title");
})
样式操作
获取和设置样式
因为class也是和title一样,也属于元素的属性,所以,我们可以使用attr()来获取和设置元素的class。
使用attr()方法设置样式时,新的样式覆盖了之前的样式。
添加样式
有的时候,我们希望为某个元素添加样式,但是又不覆盖之前原有的样式,很明显,attr()并不能满足我们的要求,这个时候,我们需要用到一个新的方法addClass(),该方法是在不改变原有样式的基础上,在后面添加新的样式。
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").addClass("blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
移除样式
在上面,我们知道可以用removeAttr()方法删除元素的属性,自然,这个方法可以用来删除元素的样式。
$(function(){
$("ul li:eq(0)").removeAttr("class");
})
除了删除属性的方法外,jQuery中,还有一个专门用来删除元素样式的方法:removeClass(),参数为需要删除的类名,该方法可以同时删除一个或多个样式,多个类名中间用空格间隔即可,当该方法不带参数时,表明要删除该元素的所有方法。
$(function(){
$("ul li:eq(0)").removeClass("red");
})
判断是否含有某个样式
hasClass()方法可以用来判断元素中是否含有某个class,如果有,返回true,否则,返回false。
$(function(){
var txt1 = $("ul li:eq(0)").hasClass("red");
var txt2 = $("ul li:eq(1)").hasClass("red");
console.log(txt1);
console.log(txt2);
})