jQuery基础学习（4）(操作 CSS)

最新推荐文章于 2025-08-21 16:44:59 发布

原创最新推荐文章于 2025-08-21 16:44:59 发布 · 574 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css

jQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用 jQuery 进行 CSS 类操作，包括添加、移除和切换类，设置和获取样式属性等。同时涵盖了尺寸方法及 DOM 元素的遍历技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>
</html>

jQuery removeClass() 方法

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>

jQuery toggleClass() 方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
</html>

jQuery css() 方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>
</html>

设置 CSS 属性

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>

设置多个css属性

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>

$(document).ready(function(){
   $("#div2").css({
      background:"red",
      "backgroundColor":"green",
      backgroundColor:"yellow",
      "background-color":"blue"
   });
});

jQuery 尺寸方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

</body>
</html>

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>

</body>
</html>

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

jQuery width() 和 height()

返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

jQuery设置宽高

$("button").click(function(){
  $("#div1").width(500).height(500);
});

遍历父控件

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>

$(document).ready(function(){
  $("span").parent();
});

$(document).ready(function(){
  $("span").parents();
});

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

<script>
$(document).ready(function(){
  $("div").children().css({"color":"red","border":"2px solid red"});
});
</script>


//特定id
<script>
$(document).ready(function(){
 $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>


<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>

在 DOM 树中水平遍历

DOM 树进行水平遍历

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

$(document).ready(function(){
  $("h2").siblings().css({"color":"red","border":"2px solid red"});



$(document).ready(function(){  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

$(document).ready(function(){
  $("h2").next().css({"color":"red","border":"2px solid red"});
});

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。介于 <h2>与<h6> 元素之间的所有同胞元素：

$(document).ready(function(){
  $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});

jQuery prev(), prevAll() & prevUntil() 方法

效果相反

jQuery first() 方法

first() 方法返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){
  $("div p").last();
});

jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});

jQuery not() 方法

not() 方法返回不匹配标准的所有元素

$(document).ready(function(){
  $("p").not(".intro");
});