1.css操作
html:
<div>1</div>
<div>2</div>
<div>2</div>
1.单个样式修改
css(“name样式名”,“value样式值”)
例:
$("div").css("color","red");
字变红
2.多个样式修改
多个样式修改时是以键值对的方式呈现的
css(obj)
例:
$("div").css({
backgroundColor:"blue",
color: "red",
fontSize:"50px",
});
背景色变蓝
字变红
字变大
3.获取一个样式值
css(“name样式名”)
例:
$("div").css("color");
会返回red
2.class操作
html:
<div>1</div>
<div class="two">2</div>
<div>3</div>
css:
.one{
color:red;
}
.two{
color:blue;
}
three:{
color:pink;
}
1.添加一个类
addClass(“name类名”)
例:
$("div").eq(0).addClass("one");
1变红
2.移除一个类
removeClass(“name类名”)
例:
$("div").eq(1).removeClass("two");
3.判断一个类是否存在
hasClass(“name类名”)
例:
console.log($("div").hasClass("four"));
返回值是false
4.判一个类是否存在,true添加,false移除
toggleClass(“name类名”)
例:
$("div").eq(0).toggleClass(''one");
$("div").eq(2).toggleClass(''three");
1变回黑色
3变粉红
3.属性操作
(注:这里的属性操作是指写在标签里的属性,而不是写在css样式表里的属性)
用法与css操作几乎一致
html:
<img src="1.png" alt="1" title="one">
1.设置单个属性
attr(“name属性名”,“value属性值”)
$("img").attr("alt", "2");
alt变成了2
2.设置多个属性
与css操作一样也是以键值对的方式呈现的
attr(obj)
例:
$("img").attr({
alt:"1",
title:"two",
})
alt又变回1;
title变成two