jQuery-属性

DOM要素に関して操作できる最も基本的なコンポーネントのいくつかは、それらの要素に割り当てられたプロパティと属性です。

これらの属性のほとんどは、JavaScriptを介してDOMノードプロパティとして使用できます。より一般的なプロパティのいくつかは-

クラス名
タグ名
id
href
タイトル
rel
src

画像要素の次のHTMLマークアップを考慮してください-

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass"
   title = "This is an image"/>

この要素のマークアップでは、タグ名はimgであり、id、src、alt、class、およびtitleのマークアップは要素の属性を表し、それぞれが名前と値で構成されています。

jQueryは、要素の属性を簡単に操作する手段を提供し、要素にアクセスできるようにして、プロパティを変更することもできます。

属性値を取得

attr（）*メソッドを使用して、一致したセットの最初の要素から属性の値をフェッチするか、一致したすべての要素に属性値を設定できます。

例

以下は、<em>タグのtitle属性をフェッチし、<div id = "divid">値を同じ値に設定する簡単な例です-

<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() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>

   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

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

属性値を設定

attr（name、value）*メソッドを使用すると、渡された値を使用して、ラップされたセット内のすべての要素に名前付き属性を設定できます。

例

以下は、画像タグの src 属性を正しい場所に設定する簡単な例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.finddevguides.com"/>
      <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() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>

   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image"/>
      </div>
   </body>
</html>

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

スタイルを適用する

addClass（classes）*メソッドを使用して、定義されたスタイルシートを一致したすべての要素に適用できます。スペースで区切られた複数のクラスを指定できます。

例

以下は、para <p>タグの class 属性を設定する簡単な例です-

<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() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>

      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>
   </head>

   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

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

属性メソッド

次の表に、属性とプロパティを操作するために使用できるいくつかの便利なメソッドを示します-

Sr.No.	Methods & Description
1	attr( properties ) キー/値オブジェクトを、一致するすべての要素のプロパティとして設定します。
2	attr( key, fn ) 一致したすべての要素について、単一のプロパティを計算値に設定します。
3	removeAttr( name ) 一致した各要素から属性を削除します。
4	hasClass( class ) 指定されたクラスが、一致した要素のセットの少なくとも1つに存在する場合、trueを返します。
5	removeClass( class ) 一致した要素のセットからすべてまたは指定されたクラスを削除します。
6	toggleClass( class ) 指定されたクラスが存在しない場合は追加し、存在する場合は指定されたクラスを削除します。
7	html( ) 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
8	html( val ) 一致したすべての要素のHTMLコンテンツを設定します。
9	text( ) 一致したすべての要素の結合されたテキストコンテンツを取得します。
10	text( val ) 一致したすべての要素のテキストコンテンツを設定します。
11	val( ) 最初に一致した要素の入力値を取得します。
12	val( val ) <input>で呼び出された場合はすべての一致した要素のvalue属性を設定しますが、渡された<option>値で<select>で呼び出された場合、チェックボックスまたはラジオボックスで呼び出された場合、渡されたオプションが選択されます一致するすべてのチェックボックスとラジオボックスがチェックされます。

例

上記の構文と例と同様に、次の例では、さまざまな状況でさまざまな属性メソッドを使用する方法について理解できます

ここに異なる状況での属性メソッドの完全なリストがあります-

Sr.No.	Selector & Description
1	$("#myID").attr("custom") これは、ID myIDと一致する最初の要素の属性_custom_の値を返します。
2	$("img").attr("alt", "Sample Image") これにより、すべての画像の alt 属性が新しい値「Sample Image」に設定されます。
3	$("input").attr(\{ value: "", title: "Please enter a value" }); すべての<input>要素の値を空の文字列に設定し、jQuery Exampleを文字列_値を入力してください_を入力します。
4	$("a[href^=https://]").attr("target","_blank") _https://_で始まるhref属性を持つすべてのリンクを選択し、そのターゲット属性を__blank_に設定します。
5	$("a").removeAttr("target") これにより、すべてのリンクの_target_属性が削除されます。
6	$("form").submit(function() \{$(":submit",this).attr("disabled", "disabled");}); これにより、[送信]ボタンをクリックするときに、無効な属性の値が「無効」に変更されます。
7	$("p:last").hasClass("selected") これは、最後の<p>タグにclassselectedが関連付けられている場合にtrueを返します。
8	$("p").text() 一致したすべての<p>要素の結合されたテキストコンテンツを含む文字列を返します。
9	$("p").text("<i>Hello World</i>") これにより、一致する<p>要素のテキストコンテンツとして「<I> Hello World </I>」が設定されます。
10	$("p")l() これは、一致するすべての段落のHTMLコンテンツを返します。
11	$("div")l("Hello World") これにより、一致するすべての<div>のHTMLコンテンツが_Hello World_に設定されます。
12	$("input:checkbox:checked").val() チェックされたチェックボックスから最初の値を取得します。
13	$("input:radio[name=bar]:checked").val() ラジオボタンのセットから最初の値を取得します。
14	$("button").val("Hello") 一致したすべての要素<button>の値属性を設定します。
15	$("input").val("on") これにより、値が「on」になっているすべてのラジオボタンまたはチェックボックスボタンがチェックされます。
16	$("select").val("Orange") これにより、オプションオレンジ、マンゴー、バナナのドロップダウンボックスでオレンジオプションが選択されます。
17	$("select").val("Orange", "Mango") これにより、ドロップダウンボックスでオレンジとマンゴーのオプションが選択され、オレンジ、マンゴー、バナナのオプションが選択されます。

Jquery-attributes

目次

jQuery-属性

属性値を取得

例

属性値を設定

例

スタイルを適用する

例

属性メソッド

例