在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ jQuery - CSS 選擇器方法
jQuery - CSS 選擇器方法
jQuery - DOM 遍歷
jQuery - DOM 操作
jQuery - Ajax
jQuery - 基礎(chǔ)知識
jQuery - 屬性
jQuery - 概述
jQuery - 選擇器
jQuery - 事件處理
jQuery - 影響

jQuery - CSS 選擇器方法

jQuery 庫支持幾乎所有的選擇器，包括層疊樣式表(CSS)。

使用 JQuery 庫開發(fā)人員可以加強他們的網(wǎng)站，只要瀏覽器啟用了 JavaScript，那么就不用擔心瀏覽器及其版本。

大部分的 JQuery CSS 方法不修改 JQuery 對象的內(nèi)容，它們用于將 CSS 屬性應(yīng)用到 DOM 元素中。

應(yīng)用 CSS 屬性

使用 jQuery 方法 css( PropertyName, PropertyValue )，那么應(yīng)用任何 CSS 屬性都將會非常簡單。

下面是該方法的語法 ——

selector.css( PropertyName, PropertyValue );

這里你可以將 PropertyName 作為一個 JavaScript 字符串來傳遞并且基于它的值，PropertyValue 也會是一個字符串或一個整數(shù)。

示例

下面的例子為第二個列表項添加字體顏色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結(jié)果：

http://wiki.jikexueyuan.com/project/jquery/images/css-jt-1.png" alt="" />

應(yīng)用多個 CSS 屬性

你可以使用一個 jQuery 方法 CSS( {key1:val1, key2:val2....) 應(yīng)用多個 CSS 屬性。你可以按你的喜好，在一個調(diào)用中應(yīng)用許多屬性。

下面是該方法的語法 ——

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

這里你可以把 key 作為屬性傳遞，并且把 val 作為值傳遞，如上所示。

示例

下面的例子中為第二個列表項添加字體顏色及背景顏色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結(jié)果：

http://wiki.jikexueyuan.com/project/jquery/images/css-jt-2.png" alt="" />

設(shè)置元素的寬和高

width( val ) 和 height( val ) 方法可以分別用于設(shè)置每個元素的寬和高。

示例

下面是一個簡單的例子，設(shè)置了第一個 division 元素的寬，而其他元素的寬是由樣式表設(shè)置的。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結(jié)果：

http://wiki.jikexueyuan.com/project/jquery/images/css-jt-3.png" alt="" />

jQuery CSS 方法

下表列出了所有的方法，你可以使用 CSS 屬性 ——

序號 方法 & 描述
1 css( name )

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

在所有匹配的元素中，將一個樣式屬性設(shè)置為一個值。
3 css( properties )

設(shè)置一個鍵/值對象作為所有匹配元素的樣式屬性。
4 height( val )

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

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

獲取第一個匹配元素的內(nèi)部高(不包括邊界，包括填充)。
7 innerWidth( )

獲取第一個匹配元素的內(nèi)部寬(不包括邊界，包括填充)。
8 offset( )

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

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

獲取第一個匹配元素的外部高(默認包括邊界和填充)。
11 outerWidth( [margin] )

獲取第一個匹配元素的外部寬(默認包括邊界和填充)。
12 position( )

獲取一個元素相對于其父元素偏移量的頂端和左端的位置。
13 scrollLeft( val )

當傳遞進一個值時，所有匹配元素的滾動左偏移值就會被設(shè)置為傳遞進的那個值。
14 scrollLeft( )

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

當傳遞進一個值時，所有匹配元素的滾動頂偏移值就會被設(shè)置為傳遞進的那個值。
16 scrollTop( )

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

為每個匹配元素設(shè)置 CSS 寬。
18 width( )

獲取當前可計算的第一個匹配元素的寬，以像素為單位。
上一篇：jQuery - DOM 遍歷下一篇：jQuery - 屬性