jQuery-属性

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

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

className
tagName
id
href
title
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.tutorialspoint.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 )メソッドを使用して、一致したすべての要素に定義済みのスタイルシートを適用できます。スペースで区切って複数のクラスを指定できます。

例

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

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

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

属性メソッド

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

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

例

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

これは、さまざまな状況での属性メソッドの完全なリストです-

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

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