jQuery的css方法和css类

jQuery的css方法和css类

1、jQuery css() 方法

(1)、jQuerycss()方法是什么 （使用 css(“属性”,“属性值”);）

css()方法设置或返回被选元素的一个或多个样式属性。

(2)、返回CSS属性 css()不仅可以返回元素本身的属性值，也可以返回通过js方法添加的属性值

css("propertyname");

$("p").css("background-color");

(3)、设置CSS属性

如需设置指定的CSS属性，请使用如下语法：

css("propertyname","value");

$("p").css("background-color","yellow");

(4)、设置多个CSS属性

如需设置多个CSS属性，请使用如下语法：参数为json对象

$("p").css({"background-color":"yellow","font-size":"200%"});

 补充：

//获取一个属性值

console.log($("#text").css("color"));

onsole.log($("#text").css(["line-height","color"]));

var text =$("#text").css(["line-height", "color"]);

//使用数组获取多个css的属性值时返回的是对象

console.log(text.color);

2、jQuerycss类

(1)、addClass(“类名”) addClass()不会覆盖元素原有的类名

向被选元素添加一个或多个类。

.important { font-weight:bold; font-size:xx-large; } 
.blue { color:blue; }
$("button").click(function(){ 
$("h1,p").addClass("blue");
$("div").addClass("important"); 
});

(2)、removeClass()；removeClass()不仅可以删除本身的类，还可以删除通过js添加的类

从被选元素删除一个或多个类

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

(3)、toggleClass() toggleClass()首先会对被选元素进行判断有没有添加了类，有就删除，没有就添加。

对被选元素进行添加/删除类的切换操作

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

(4)、eq()

方法返回带有被选元素的指定索引号的元素，索引号从0开头，所以第一个元素的索引号是0（不是1）。

$(selector).eq(index)

(5)、index()

index()方法返回指定元素相对于其他指定元素的index位置。

$("li").click(function(){
  alert($(this).index());
});

(6)、not()

Not()方法返回指定元素之外的元素。