極客書

jQuery CSS選擇器方法

jQuery庫支持層疊樣式表（Cascading Style Sheet，CSS）規範1到3中包含的幾乎所有選擇器，如全球資訊網聯盟網站所述。

使用JQuery庫開發人員可以增強他們的網站，而無需擔心瀏覽器及其版本，只要瀏覽器啓用了JavaScript。

大多數JQuery CSS方法不修改JQuery對象的內容，它們用於對DOM元素應用CSS屬性。

Apply CSS Properties

使用JQuery方法應用任何CSS屬性都非常簡單CSS（PropertyName，PropertyValue）。

這裡是方法的語法−

selector.css( PropertyName, PropertyValue );

在這裡，可以將PropertyName作爲javascript字符串傳遞，並且根據其值，PropertyValue可以是字符串或整數。

Example

下面是向第二個列表項添加字體顏色的示例。

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果&負;

Apply Multiple CSS Properties

您可以使用單個JQuery方法CSS（{key1:val1，key2:val2….）應用多個CSS屬性。您可以在一次調用中應用任意多個屬性。

這裡是方法的語法−

selector.css( {key1:val1, key2:val2....keyN:valN})

在這裡，您可以將key作爲property傳遞，將val作爲其值傳遞，如上所述。

Example

下面是一個向第二個列表項添加字體顏色和背景顏色的示例。

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果&負;

Setting Element Width & Height

可以使用寬度（val）和高度（val）方法分別設置任何元素的寬度和高度。

Example

下面是一個簡單的示例，它設置第一個除法元素的寬度，其中作爲其餘元素的寬度由樣式表設置

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

這將產生以下結果&負;

JQuery CSS Methods

下表列出了可用於播放CSS屬性的所有方法−

Sr.No. Method & Description
1 css( name )

返回第一個匹配元素的樣式屬性。
2 css( name, value )

將單個樣式屬性設置爲所有匹配元素的值。
3 css( properties )

將鍵/值對象設置爲所有匹配元素的樣式屬性。
4 height( val )

設置每個匹配元素的CSS高度。
5 height( )

獲取第一個匹配元素的當前計算像素高度。
6 innerHeight( )

獲取第一個匹配元素的內部高度（不包括邊框和填充）。
7 innerWidth( )

獲取第一個匹配元素的內部寬度（不包括邊框和填充）。
8 offset( )

獲取第一個匹配元素相對於文檔的當前偏移量（以像素爲單位）。
9 offsetParent( )

返回具有第一個匹配元素的定位父級的jQuery集合。
10 outerHeight( [margin] )

獲取第一個匹配元素的外部高度（默認情況下包括邊框和填充）。
11 outerWidth( [margin] )

獲取第一個匹配元素的外部寬度（默認情況下包括邊框和填充）。
12 position( )

獲取元素相對於其偏移父元素的頂部和左側位置。
13 scrollLeft( val )

當傳入一個值時，所有匹配元素的向左滾動偏移量都設置爲該值。
14 scrollLeft( )

獲取第一個匹配元素的向左滾動偏移量。
15 scrollTop( val )

當傳入一個值時，所有匹配元素的滾動頂部偏移都設置爲該值。
16 scrollTop( )

獲取第一個匹配元素的滾動頂部偏移量。
17 width( val )

設置每個匹配元素的CSS寬度。
18 width( )

獲取第一個匹配元素的當前計算像素寬度。