使用jQuery操作元素的属性与样式

2023-06-20 18:25•linux•阅读 1860

DOM如果要设置元素的CSS样式类，要使用的是className而不是class:比如img1.className="className";

操作DOM属性：

在jQuery中没有包装操作"DOM属性"的函数，因为使用javascript获取和设置DOM属性都很简单，

在jQuery中提供了each()函数用于遍历jQuery包装集,其中的this指针是一个DOM对象，所以我们

可以应用这一点配合原生javascript来操作元素的Dom属性,$("img").each(function(index){});

操作元素属性：

我们可以使用javascript中的getAttribute和setAttribute来操作元素的属性,

jQuery中提供了attr()包装集和数，能够同时操作包装集中所有元素的属性：

attr(name)取得第一个匹配元素的属性值,$("img").attr("src");

attr(properties)将一个"名/值"形式的对象设置为所有匹配的元素属性：

$("img").attr({src:"test.jpg",alt:"test"});注意，如果你要设置对象的class属性，你必须使用

className,或者你可以直接使用addClass;

removeAttr(name);从每一个匹配的元素中删除一个属性,$("img").removeAttr("src");

修改元素样式：

addClass(classname);添加样式，

removeClass([classname]);删除样式,

toggleClass(class)如果存在(不存在)就删除(添加)一个类,$("p").toggleClass("selected");

toggleClass(class,switch)当switch是true时添加类，当switch是false时删除类,示例：

每三次点击切换高亮样式：

var count = 0;

$("p").click(function(){

$(this).toggleClass("highlight",count++%3==0);

});

如果我们要获取某个样式的具体属性的值，jQuery也为其提供了相应的方法：

css(name)访问第一个匹配元素的样式属性，示例：$("p").css("color");