第二章：jQuery基本操作

第二章：jQuery基本操作

​ 我们在第一章的时候，主要讲了jQuery的选择器，今天我们来讲一下操作函数。

一，jQuery操作CSS

1. 设置和获取样式值

​ jQuery使用css()为指定的元素设置样式值或获取样式值。

语法：

• css(“name”,“value”) ;//两个加引号
• css({“name”:“value”, “name”:“value”,“name”:“value”…}) ;//加引号，别忘了大括号。

示例：

$(this).css("border","5px solid #f5f5f5");
或
$(this).css({
   "border":"5px solid #f5f5f5","opacity":"0.5"});

2. 追加和移除样式

追加样式

语法：

• $(selector).addClass(class);
• $(selector).addClass(class 1 class 2 … class N);

示例：

.text{
    padding:10px;}
.content {
   background-color:#FFFF00; }
.border {
   border:1px dashed #333; }

$("h2").mouseover(function() {
   
     $("p").addClass("content border");
});//添加多个用空格隔开，只写class名不加‘.’

移除样式

语法：

• $(selector).removeClass(“class”) ;
• $(selector).removeClass("class1 class 2 … class N ") ;

示例：

$("h2").mouseout(function() {
   
        $("p").removeClass("text content");
});

切换样式

语法：

• toggleClass(class)：有该class则移除，没有则添加。

示例：

$("h2").click(function() {
   
    $("p").toggleClass("content  border");
});

判断是否含指定的样式

语法：

$(selector). hasClass(class);//判断是否包含指定的样式

示例：

$("h2").mouseover(function() {
   
    if(!$("p").hasClass("content ")){
   
	$("p").addClass("content ");
	}
});
//-------------------------华丽的分割线
$("h2")