jQuery-CSSセレクターメソッド

jQueryライブラリは、World Wide Web Consortiumのサイトで概説されているように、カスケードスタイルシート（CSS）仕様1から3に含まれるほぼすべてのセレクターをサポートします。

JQueryライブラリを使用すると、開発者は、ブラウザーでJavaScriptが有効になっている限り、ブラウザーとそのバージョンを気にすることなくWebサイトを拡張できます。

ほとんどのJQueryCSSメソッドはjQueryオブジェクトのコンテンツを変更せず、DOM要素にCSSプロパティを適用するために使用されます。

CSSプロパティを適用する

これは、JQueryメソッドを使用してCSSプロパティを適用するのは非常に簡単です css( PropertyName, PropertyValue )。

メソッドの構文は次のとおりです-

selector.css( PropertyName, PropertyValue );

ここでは、PropertyNameをjavascript文字列として渡すことができ、その値に基づいて、PropertyValueは文字列または整数になります。

例

以下は、2番目のリスト項目にフォントの色を追加する例です。

<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>

これにより、次の結果が生成されます-

複数のCSSプロパティを適用する

1つのJQueryメソッドを使用して複数のCSSプロパティを適用できます CSS( {key1:val1, key2:val2....)。1回の呼び出しで必要な数のプロパティを適用できます。

メソッドの構文は次のとおりです-

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

ここでは、上記のように、キーをプロパティとして、valを値として渡すことができます。

例

以下は、2番目のリスト項目にフォントの色と背景色を追加する例です。

<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>

これにより、次の結果が生成されます-

要素の幅と高さを設定する

ザ・ width( val ) そして height( val ) メソッドを使用して、任意の要素の幅と高さをそれぞれ設定できます。

例

以下は、最初の分割要素の幅を設定する簡単な例ですが、残りの要素はスタイルシートによって設定された幅を持っています

<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>

これにより、次の結果が生成されます-

JQueryCSSメソッド

次の表に、CSSプロパティを操作するために使用できるすべてのメソッドを示します-

シニア番号	方法と説明
1	css（名前）最初に一致した要素のスタイルプロパティを返します。
2	css（名前、値）一致するすべての要素の値に単一のスタイルプロパティを設定します。
3	css（プロパティ）一致するすべての要素のスタイルプロパティとしてキー/値オブジェクトを設定します。
4	height（val）一致するすべての要素のCSSの高さを設定します。
5	高さ（）最初に一致した要素の現在計算されたピクセル、高さを取得します。
6	innerHeight（）最初に一致した要素の内側の高さ（境界線を除き、パディングを含む）を取得します。
7	innerWidth（）最初に一致した要素の内側の幅（境界線を除き、パディングを含む）を取得します。
8	オフセット（）ドキュメントを基準にして、最初に一致した要素の現在のオフセットをピクセル単位で取得します。
9	offsetParent（）最初に一致した要素の親が配置されたjQueryコレクションを返します。
10	アウターハイト（[マージン]）最初に一致した要素の外側の高さ（デフォルトでは境界線とパディングを含む）を取得します。
11	アウター幅（[マージン]）最初に一致した要素の外側の幅（デフォルトでは境界線とパディングを含む）を取得します。
12	ポジション（）オフセットされた親を基準にした要素の上部と左側の位置を取得します。
13	scrollLeft（val）値が渡されると、一致したすべての要素で左スクロールオフセットがその値に設定されます。
14	scrollLeft（）最初に一致した要素の左スクロールオフセットを取得します。
15	scrollTop（val）値が渡されると、一致したすべての要素でスクロールトップオフセットがその値に設定されます。
16	scrollTop（）最初に一致した要素のスクロールトップオフセットを取得します。
17	width（val）一致するすべての要素のCSS幅を設定します。
18	width（）最初に一致した要素の現在計算されたピクセル幅を取得します。

シニア番号	方法と説明
1	css（名前）最初に一致した要素のスタイルプロパティを返します。
2	css（名前、値）一致するすべての要素の値に単一のスタイルプロパティを設定します。
3	css（プロパティ）一致するすべての要素のスタイルプロパティとしてキー/値オブジェクトを設定します。
4	height（val）一致するすべての要素のCSSの高さを設定します。
5	高さ（）最初に一致した要素の現在計算されたピクセル、高さを取得します。
6	innerHeight（）最初に一致した要素の内側の高さ（境界線を除き、パディングを含む）を取得します。
7	innerWidth（）最初に一致した要素の内側の幅（境界線を除き、パディングを含む）を取得します。
8	オフセット（）ドキュメントを基準にして、最初に一致した要素の現在のオフセットをピクセル単位で取得します。
9	offsetParent（）最初に一致した要素の親が配置されたjQueryコレクションを返します。
10	アウターハイト（[マージン]）最初に一致した要素の外側の高さ（デフォルトでは境界線とパディングを含む）を取得します。
11	アウター幅（[マージン]）最初に一致した要素の外側の幅（デフォルトでは境界線とパディングを含む）を取得します。
12	ポジション（）オフセットされた親を基準にした要素の上部と左側の位置を取得します。
13	scrollLeft（val）値が渡されると、一致したすべての要素で左スクロールオフセットがその値に設定されます。
14	scrollLeft（）最初に一致した要素の左スクロールオフセットを取得します。
15	scrollTop（val）値が渡されると、一致したすべての要素でスクロールトップオフセットがその値に設定されます。
16	scrollTop（）最初に一致した要素のスクロールトップオフセットを取得します。
17	width（val）一致するすべての要素のCSS幅を設定します。
18	width（）最初に一致した要素の現在計算されたピクセル幅を取得します。