Javascript 要素の属性値。 jQuery を使用して要素の属性を操作します。 入力されたデータフォームの正確性の検証

レッスンでは、cob について説明します。ドキュメント オブジェクト モデル (JavaScript DOM) - 動的 HTML の基礎、オブジェクトにアクセスするためのメソッド、および JavaScript を処理するためのメソッドについて説明します。

• 一般に 物体- これは、メイン モジュールの無意味な値を変更し、それらの名前の背後にある値を保存して削除できるようにする、データのストレージ タイプです。

以前、JavaScript の理解についてはすでに学びました。

• Javascript は DOM と同じ理解を持っています ドキュメント オブジェクト モデル- Web 側 (html 側) のオブジェクト モデル。
• ドキュメント タグ、またはドキュメント ノードのように見えるのは、オブジェクト全体です。

図を見てみましょう JavaScript のオブジェクト階層、およびそれら、deієrarchіїは、このトピックドキュメントオブジェクトの分析で見つかりました。

script 要素には次の属性があります。

おしり:

JavaScript での文書オブジェクトの権限と属性

ドキュメント オブジェクトは Web ページです。

重要：他のオブジェクトを操作するときのように、JavaScript でこれらのオブジェクト メソッドを強化するには、 ドット表記:

とぼと。 オブジェクト自体は開始で書かれており、スペースのないドット i によって、その力、属性 chi メソッドが示されます。

例を見てみましょう：

おしり: let html-document є タグ

新しいためのtaの予定 CSS スタイル(navit 2 つのスタイル、もう 1 つは設定に必要です):

必須：

1. オブジェクトの新しい力を設定し、それに価値を与え、それに価値をもたらします。
2. オブジェクトの属性の値を入力します。
3. オブジェクト属性の値を変更します。

ではどうやって javascript を動かす、その後、オブジェクトを推測して、それが力であるか、それが何らかの意味を持っているかを設定できます。 オブジェクトへのアクセスを取得する穂軸のエール (オブジェクトへのアクセスについては、このレッスンで以下に報告します):

// オブジェクト ID へのアクセスが必要 var element = document.getElementById("MyElem"); element.myProperty = 5; // 電力アラートを割り当てます(element.myProperty); // ダイアログボックスに表示

次のタスクは、オブジェクトの属性に関連付けられます。 オブジェクト属性- Tse タグの属性。 トブト。 ビューには 2 つの値があります: 値が small の class 属性と id 属性です。 クラス属性のすぐ後ろ。

次に、JavaScript を dodamo して、オブジェクトの属性の値を確認します。 コードは有罪ですが 後主なタグ:

// オブジェクト ID へのアクセスが必要 var element = document.getElementById("MyElem"); alert(element.getAttribute("クラス")); // ダイアログボックスに表示

І 残りのタスク: 属性の値を変更します。 スタイルの準備がある方 "大きい". class 属性の値をスタイルに変更します。

// オブジェクト ID へのアクセスが必要 var element = document.getElementById("MyElem"); element.setAttribute("class","big");

その結果、私たちの要素はより大きくなり、青色で人気が高まります (class big)。

それでは、属性を使用した適用方法のプレゼンテーションを見てみましょう。

JavaScript の属性メソッド

属性を追加、表示、および変更できます。 どの特別な方法について:

• 属性の追加 (新しい値の設定):

getAttribute(属性)

• この属性の存在を再確認します:

removeAttribute(attr)

属性を操作するさまざまな方法

おしり:値属性の値を入力してください テキストブロック.

• єテキストブロックに来てください：

varelem = document.getElementById("MyElem"); var x = "値";

• 属性の値を取得するいくつかの方法を見てみましょう (値を表示するには、alert() メソッドを使用します)。

elem.getAttribute("値" )

elem.getAttribute("値")

2.ドット表記：

elem.attributes.value

elem.attributes.value

3.括弧表記：


属性値の設定次の方法でもデキルコーマを起こすことができます：

var x = "キー"; // キー - 属性名、val - 属性値 // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" キー"] = "val" // 4.elem.setAttribute(x, "val")

body 要素の権限

ドキュメント オブジェクトを介して、ドキュメントの本文 (body タグ) に非常に強力に移動できます。

たとえば、 body タグには次の 2 つの機能があります。 顧客のウィンドウの幅と高さ:

document.body.clientHeight - クライアント ウィンドウの高さ
document.body.clientWidth - クライアント ウィンドウの幅


さらに重要なことは、すでに認識しているように、特別なメソッドの助けを借りてドキュメントオブジェクトを介して、ページのすべての要素、つまりタグへのアクセスが提供されることです。

重要：サイド タグへのこのような移行により、スクリプトは body を閉じる前に要素ツリーにいるという罪を犯します! スクリプトが終了するまで、すべての要素は画面上のブラウザーによってマークされます。

js8_1 マネージャー. ブラウザのウィンドウの拡大に関する情報を見てください。たとえば、 「ブラウザ ウィンドウのサイズを 600 x 400 に変更」

JavaScript でのドキュメント要素へのアクセス

オブジェクトへのアクセスまたはオブジェクトの検索のために、いくつかのオプションが転送されました。

1. IDで検索(または getElementById メソッド)、特定の要素を回転させます
2. タグ名を検索する(または getElementsByTagName メソッド)、要素の配列を回転させます
3. name 属性のクエリ(または getElementsByName メソッド)、要素の配列を回転させます
4. バトキフスキーの要素を通して(すべてのグッズを削除します)

レポートのオプションからスキンを見てみましょう。

1. id 属性による要素へのアクセス

構文： document.getElementById(id)

getElementById() メソッドは、データ アクセスのために取得できる要素自体を回転させます。

おしり:横には、属性 id="cake" を持つテキスト フィールドがあります。

...

必要



✍ ソリューション:

alert(document.getElementById("cake").value); // 「ケーキの近く」を回す

オブジェクトに獣を実現することで、それらを自分でビコネートすることができます 変化を通して:

var a=document.getElementById("ケーキ"); アラート (値); // value 属性の値を表示するので、. テキスト「ケーキで」

重要：スクリプトは、タグの後に有罪 buti obov'yazkovo です!

構文：
document.getElementsByTagName(名前);

おしり:横には、value 属性を持つテキスト フィールド (input タグ) があります。

...

必要: value 属性の値を入力します

getElementsByTagName メソッドは、すべての入力要素 (つまり、. 要素の配列へ入力)、この要素が横に 1 つになるように移動します。 最初の要素など、特定の要素に戻るには、インデックスを指定する必要があります (配列はインデックス 0 から始まります)。

✍ ソリューション:

インデックスの後の特定の要素に逆戻り:

var a =document.getElementsByTagName("入力"); アラート (値); // 「ケーキの近く」を回す

構文：
document.getElementsByName(名前);

getElementsByName("...") メソッドは オブジェクトの配列、 name 属性がメソッドのパラメーターとして指定された値より大きい。 側面にはそのような要素が 1 つしかないため、メソッドは配列をまったく同じように (1 つの要素のみで) 回転させます。

おしり:ドキュメントで許容されます є 要素:

var element = document.getElementsByName("MyElem"); アラート (要素.値);

で このお尻要素1ですが、配列のゼロ要素へのzdіysnyuєtsya。

重要： このメソッドは、name 属性が仕様に渡されるこれらの要素でのみ機能します。: すべてのタグ form 、 input 、 a 、 select 、 textarea およびその他のより一般的なタグ。

document.getElementsByName メソッドは、タイプ div、p などの他の要素には適用できません。

JavaScript ボタンへのアクセス追加のパワーchildNodesのvydbuvaєtsya。 object-batkovіを置く力。

document.getElementById (親) .childNodes ;

document.getElementById(parent).childNodes;

コンテナに配置された画像のお尻、deタグ-divタグを見てみましょう。 このように、div タグはこれらのイメージの親であり、img タグ自体は明らかに div タグのキャップです。

に表示されるようになりました モーダルヴィクノ大文字から配列内の要素の意味 tobto. 画像タグ:

var myDiv=document.getElementById("div_for_img"); // コンテナに移動します dad var childMas=myDiv.childNodes; // ヘッダーの配列 for (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

フィールドの配列の要素を反復するには、ループを手動で選択する必要があることに注意してください。 トブト。 私たちのアプリケーションにはサイクルがあります:

For (var a in childMas)( alert(childMas[a].src); )

その他の見方 例：

アクセス：

... // 要素にアクセスするための不要な古いメソッド: alert(document.forms.name); // f alert(document.forms.elements.type); // テキストアラート(document.forms.elements.options.id); // o2 alert(document.f.b.type); // ボタンアラート(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // 要素にアクセスするための簡略メソッド alert(document.getElementById("t").type); // テキストアラート(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 四 ...

おしり: HTML ドキュメントの場合は、ボタンとテキスト フィールドを作成します。 スクリプトの助けを借りて、ボタンの背景 (ボタンの style.backgroundColor の力) を変更して表示します。 「ヴィータユ！」テキストフィールド（属性値）。

HTML コード:

document.getElementById("t1").value = "(!LANG:(!LANG:こんにちは!""; document.getElementById("b1").style.backgroundColor = "red";!}!}

オプション 2:

document.getElementById("t1").setAttribute("値","こんにちは!"); document.getElementById("b1").style.backgroundColor = "赤";

タスク Js8_2。サムネイル画像に合わせてテキスト フィールド タグを作成します。 特定の (指定された小さな) id 属性値を指定します。 スクリプトのヘルプとして、すべての数値フィールド (数値を渡す) に値「0」を追加します。

入力されたデータフォームの正確性の検証

チーはフィールドを空のままにしませんでしたか?

ダニムは信用できない。 coristuvachiがデータの導入の時間を認めたことを認めるのは不合理です。 ですから、ちょうごがjavascriptに勝つ必要があります。

見直すために テキスト フィールドが空です（たとえば、アンケートに正しいデータを入力した後）、価値のあるポイントに向かいます。 力の意味については、空の行（「」）があるため、このコリストヴァッハについて何か言う必要があります。

if(document.getElementById("name").value=="")

さらに、スクリプトなしで実行できます。 テキスト フィールドの入力タグは、パターン属性を持つことができます。 特定のテキスト フィールド フォームのデータを再チェックする過程で、この値が定期的にどのように表示されるか。 属性とは パターンの場合、テキスト フィールドが正しく入力されるまで、フォームは適用されません。
たとえば、再検証のために、chi はフィールドを空のままにしませんでした。

テキスト置換数値: isNaN 関数

どの分野が転送されているか 数値の入力、およびテキストを入力するには、isNaN関数を選択する必要があります（英語から. 「カイは数じゃないの？」)、入力するデータの種類を確認し、数値データではなくテキスト データを入力すると true になるようにします。

税込 true に設定されている場合は、スピーカーにフォーマットが正しいことを伝える必要があるため、. 番号。

if(isNaN(document.getElementById("minutes").value))( 数値データの入力を求めるプロンプト);

記入する要素を含むページが与えられた場合:


HTML コード スニペット:

必須：
2 つのテキスト フィールドへの入力が正しいことを確認するために、フラグメントの空白をコードに追加し、以下に展開します。 イムヤ(id="名前") ビリン(id="分")。 空のフィールドが空 ("") の場合、正しい形式で数値フィールド (isNaN) が埋められることを Vykoristovyte が再確認します。

* ヘルプのテキスト フィールドのパターン属性の追加ヘルプも Vikonati タスク。

スクリプト スニペット:

コードで、彼らは以前に渡された折り畳みの心を刺激するために勝ちます。

あなたにとっての新しい理解は、ボタンの要約として機能をクリックすることです：
onclick="placeOrder();"
ボタンをクリックすると、placeOrder() 関数が呼び出されます。

指定された要素の属性の値を設定します。 その属性が既に存在する場合、値が更新されます。 指定された名前と値を持つ新しい属性が追加されます。

構文

パラメーター

ブール属性は、実際の値に関係なく、要素に存在する場合に true と見なされます。これは機能しますが、標準ではありません)。

特別な値を文字列にキャストする必要はありません.null を指定する必要はありません.そのため、属性を実行することを選択し、removeAttribute() を呼び出します.

戻り値

例外

例

次の例では、 setAttribute() を使用して に属性を設定します。

HTML

JavaScript

これは、次の 2 つのことを示しています。

• 上記の setAttribute() の最初の呼び出しは、name 属性の値を「helloButton」に変更することを示しています。
• disabled などのブール属性値を設定するには、任意の値を指定できます。 空の文字列には、属性のいずれかの名前 є 推奨値が含まれます。 すべての問題は、属性が存在する場合、 実際の値に関係なく、その値は true と見なされます。 この値の属性エントリの存在は重要ではありません。 disabled 属性の値を空の文字列 ("") に設定することで、disabled を true に設定し、ボタンを無効にします。

要素の属性を扱う DOM メソッド:

仕様

• DOM レベル 2 コア: setAttribute (DOM レベル 1 コアで導入)

ブラウザの互換性

こちら側のテーブルのコンパクトさは、構造化データから生成されます。 データについて知りたい場合は、https://github.com/mdn/browser-compat-data をクリックしてプル リクエストを送信してください。

GitHub で互換性データを更新する

伝説

ヤモリのメモ

setAttribute() を使用して、特定の属性、特に XUL の値を変更できますが、属性がデフォルト値を指定するため、一貫性がありません。 現在の値を獲得または変更するには、権力を獲得するのはあなたの責任です。 たとえば、 Element.setAttribute() の代わりに Element.value をタグ付けします。

この記事では、DOM の権限と属性を理解しており、悪臭がどのように見えるか、それらを正しく処理する方法を確認できます。 属性を操作するためのメソッドが JavaScript にどのように備わっているかを見てみましょう。

DOM オーソリティのような属性はどのように見えますか?

属性はすべて HTML エンティティであり、これを使用して個々のデータを HTML コード要素に追加できます。

ブラウザが最初の行を要求すると、送信 HTML コードが取得されます。 このワインの後、このコードが展開され、同じ DOM 置換基になります。 プロセスの時間未満 要素の HTML 属性は DOM 権限に基づいて書き換えられます.

たとえば、ブラウザは、攻撃的な HTML コードの文字列を読み取るときに、この要素に対して攻撃的な DOM 権限を作成します: id、className、src、および alt。

Zvernennya から Tsikh 当局へ JavaScript コードオブジェクトの権威に関してはvykonuєtsya。 ここでのオブジェクトはノード (要素) DOM です。

たとえば、ホバーされた要素の DOM オーソリティの値を取得し、その値をコンソールに表示します。

// 要素を取得します var brandImg = document.querySelector("#brand"); // 要素の DOM パワーの値をコンソールに記録します console.log(brandImg.id); // "ブランド" console.log(brandImg.className); // "ブランド" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // 「サイトのロゴ」

実際、DOM 権限名は属性名と一致しません。 これらの 1 つが class 属性です。 この属性は、 className の DOM パワーを設定します。 この違いは、class が JavaScript キーワードであり、予約されており、オーバーライドできないという事実によるものです。 rozrobniks を通じて、className が選択された別の名前として一貫性を保つために、標準は vikoristovuvaty でした。

この理由のもう 1 つの側面は、ドキュメントの出力コードに与えられた HTML 属性の変換が、DOM オーソリティで 1 対 1 で行われる必要がないことです。

要素に非標準の HTML 属性がある場合、DOM を検証する機関は作成されません。

もう 1 つの理由は、特定の HTML 属性と同様の DOM 機能の意味が異なる可能性があることです。 トブト。 属性には 1 つの意味があり、同じ基準で作成された DOM 権限には別の意味があります。.

これらの属性の 1 つがチェックされます。

のchecked HTML属性の値 この特定のタイプに- Tse 空の行。 エール、この DOM 属性を true に設定する力。 なぜなら true を設定するための標準の規則に従って、HTML コードのどの属性をなぞるだけで十分です。

チェックボックス タイプの input 要素の HTML コードで checked 属性を指定しない場合、DOM の新しい要素ではすべてが checked 乗数に設定されます。それ以外の場合は false になります。

くそー、JavaScript を使用すると、属性を操作できます。 どの DOM API に対して特別なメソッドがありますか。 本当に自分で練習する必要がある場合にのみ、それらを打ち負かすことをお勧めします。

要素の DOM パワーを変更すると、デフォルト属性も変更されることを知る必要があるときはいつでも。 ブラウザーでのプロセス全体が 1 つずつ固定されているわけではありません。

DOM パワーと属性の間の主なパワー:

• 属性の値は行であり、DOM オーソリティの値は単一のデータ型です (バインディング行ではありません)。
• 属性名はレジストリに依存せず、DOM 権限はレジストリに依存しません。 トブト。 Id 、 ID などの HTML id 属性などの HTML コードを記述できます。 同じことが属性の名前と同じである必要があります。 JavaScript メソッド彼と一緒に働くこと。 DOM オーソリティにエールを。ID だけに目を向けることができ、別の方法で行うことはできません。

要素の DOM パワーを操作する

以前に割り当てられたように、JavaScript の要素の力を使った作業は、オブジェクトの力と同様に、より重要です。

しかし、歌唱要素の質を上げるためには、それを軸から外す必要があります。 たとえば、querySelector ユニバーサル メソッドを使用して JavaScript から DOM 要素を抽出したり、querySelectorAll ヘルパーなどを使用して DOM 要素のコレクションを抽出したりできます。

最初のお尻として、次の HTML 要素を見てみましょう。

新しい分析に基づいて、新しい DOM 権限、それらの変更、および新しい権限の追加を作成することができます。

DOM 権限の意味を読む:

// DOM パワー値 ID を取得します var alertId = alert.id; // "alert" // DOM 権限の値を取得 className var alertClass = alert. className; // "alert alert-info" // DOM 権限の値を取得します title var alertId = alert. title; // 「ヒント テキスト...」

DOM 権限の値を変更します。

// DOM パワー値を変更するには、新しい値を設定するだけです alert.title = "(!LANG:(!LANG:New ヒント テキスト"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}!}

DOM 権限の追加:

Alert.lang="en"; // lang 値の権限を設定します。これは "ru" alert.dir = "ltr"; // dir の累乗を "ltr" に設定します

ただし、たとえば、コンソールでは、クラスのすべての値が、たとえば横の p 要素に表示されます。

Var paragraphs = document.querySelectorAll("p"); for (var i = 0、長さ = 段落。長さ ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

コンテンツ クラスを持つすべての要素を挿入できる例、値「ru」を持つ言語の権限:

Var contents = document.querySelectorAll(".content"); for (var i = 0, length = contents.length; i< length; i++) { contents[i].lang = "ru"; }

要素の属性とそれらを操作するためのメソッド

属性は HTML コードで順番に設定されます。 悪臭は熱く、権威のある歌唱ランクを持つ pov'yazan ですが、同じではありません。 ほとんどの場合、権限を持って練習する必要があり、必要に応じて属性の前に1回だけ練習する必要があります。

DOM 権限に基づく属性の値は、すでに割り当てられているため、常に連続しています。

属性に関連付けられた特定の操作用の JavaScript。いくつかのメソッドを次に示します。

• .hasAttribute("im'ya_attribute") – 要素内の指定された属性の存在を確認します。 変更されている属性が要素にある場合、このメソッドは true になり、そうでない場合は false になります。
• .getAttribute("attribute name") – 属性値を取得します。 要素が指定されていない場合、このメソッドは空の行 ("") または null を返します。
• .setAttribute("attribute_name", "attribute_value") – 要素に割り当てられた値から指定された属性を設定します。 要素に属性を割り当てた場合、このメソッドはその値を変更するだけです。
• .removeAttribute("im'ya_attribute") - 要素から属性値を削除します。

見てみましょう。

ドゥジェ 銃床 value 属性で。

属性の例

value 属性の値と value の DOM パワーを取得します。

// 要素 name.getAttribute("value") の value 属性の値を取得します。 // "Bob" // DOM パワー値取得値 name.value; // "Bob" // value 属性の値を変更し、新しい値を設定 name.setAttribute("value", "Tom"); // "Tom" // DOM パワー値 value name.value; を取得します。 // "トム"

正当な理由により、 value 属性を変更すると、ブラウザーは自動的に value の新しい DOM パワーに変更されます。

まず、DOM 権限の値を変更し、属性の値を変更してみましょう。

// 新しい DOM 権限値を設定 name.value = "(!LANG:(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}!}

この観点から、属性を変更する前に DOM 権限を変更すべきではないことは明らかです。 トブト。 ある意味で、値の DOM パワーを変更しても、デフォルト属性は変更されません。.

このフィールドにテキストを入力すると、同じように表示されます。 DOM 支配的な値はデフォルト値を変更し、たとえば setAttribute ヘルパー メソッドの後など、属性は逆に置き換えられます。

このお尻は、DOM 権限で作業する方がより正確であり、必要な場合にのみ属性に移動する必要があることを示しています。

要点に移動します。 value の最初の値を取得する必要がある場合は、HTML に入力すると、パワーを得ることができます。 value 属性のデフォルト値をオーバーライドする権限は、 defaultValue と呼ばれます。

Name.defaultValue; // トム

もう 1 つのアーク銃床ですが、href 属性が追加されました。

href 属性を持つストック

HTML に挿入されたメッセージの意味を理解する必要がある例。

href 属性と、href の DOM パワーが異なる意味を持つのは、その用途です。 href 属性 (コードに挿入したもの) と DOM 機関 - 新しい URL。 この違いは、ブラウザーがどのように href 値を完全な URL にキャストする責任があるかに応じて、標準によって決定されます。

属性にあるものを考慮する必要があるため、getAttribute メソッドがなければ、getAttribute メソッドなしではできません。

最後に、選択した属性を見てみましょう。

選択した属性のバット

選択したオプションの値を取得する方法を示す例:

マークなし 1 2 3 4 5

次の例は、select 要素でオプションの値を選択する方法を示しています。

マークなし 1 2 3 4 5

属性 (パワー属性) を操作する別の方法

JavaScript では、skin 要素には属性の力があり、それを利用して NamedNodeMap オブジェクトのようなすべての属性を取得できます。

ツェイウェイたとえば、要素のすべての属性を調べる必要がある場合は、zastosuvannya を知っているかもしれません。

コレクションの tsієї 属性へのアクセスは、そのインデックスまたはヘルパー メソッド item によって与えられます。 コレクションの属性の見直しは0から行います。

たとえば、現在の要素のすべての属性をコンソールに表示します。

私はジャバスクリプトが大好きです

クリミア、 そのような方法の助けを借りて、pratsyuvati s tsієyuコレクションも可能です:

• .getNamedItem("named_attribute") – 割り当てられた属性の値を取得します (属性が要素に割り当てられていないため、結果は null になります)。
• .setNamedItem("attribute_item") – 新しい属性を要素に追加するか、新しい属性の値を更新します。 属性を作成するには、document.createAttribute() メソッドを使用する必要があります。このメソッドには、属性名をパラメーターとして渡す必要があります。 その後、属性を作成した後、値の追加の累乗の値を指定する必要があります。
• .removeNamedItem("attribute_name") – 要素から属性値を削除します (属性削除ローテーションの結果として)。

getNamedItem、setNamedItem、removeNamedItem メソッドを介して属性と連携します。

私はジャバスクリプトが大好きです

マネジャー

• id 属性を設定できるように、ドキュメントのすべての要素をコンソールに入力します。
• 属性がないため、横のすべての画像に title 属性を追加します。 alt 属性の値と同じ属性の値を設定します。

チューニングするバインディングを作成できます バインディング、用心深く歌うことの意味の反響として 論理的な意味カイノット属性を追加する前。 tsey バット:

Ko.bindingHandlers.attrIf = ( update: 関数 (要素、valueAccessor、allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor())); var show = ko.utils.unwrapObservable(h._if); if (表示) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) ); リンク

@gbs に返信したいのですが、できません。 私の決定は、母親が2人同じであるということでした HTML要素: それらの 1 つを要素に追加するための、別のノックアウトなしの属性を持つもの。 私はtse zvichayne ochіkuvannyaについても知っていますが、より効果的な解決策はどうですか?

割り当てに関するこのレッスンでは、jQuery の要素の属性を読み取り、変更します。

属性は、論文の要素に割り当てられた名前/値のペアです。 属性を適用 ( href, 題名, ソース, クラス):

• 属性()属性の読み取り、追加、および変更用
• removeAttr()視覚属性用

このレッスンでは、 attr() および removeAttr() メソッドを使用してロボットを選択します。

別のレッスンで説明されているように、CSS クラスを操作するための特別な jQuery メソッドがあります。 jQuery でプロジェクトに取り組んでいる間、CSS クラスを操作しなければならないことがよくあります。class 属性はいくつかのクラス名を置き換えることができるため、他の属性と比べて作業が大幅に簡単になります。

入力フィールドの値を操作する場合は、val() メソッドを使用することをお勧めします。これにより、value 属性の操作が簡単になります。または、選択した要素の値を読み取って設定することもできます。選択リストで。

属性値の読み取り

要素の属性値の読み取りは簡単です。 jQuery オブジェクトの attr() メソッドを呼び出して要素を取得し、読み取る属性の名前を渡す必要があります。 属性の値を変える方法:

// 要素の「href」属性の値を表示 # mylink alert($("a#mylink").attr("href"));

jQuery オブジェクトがいくつかの要素を取得する場合、attr() メソッドはセット内の最初の要素の属性値のみを読み取ります。

属性の値を設定します

attr() メソッドを微調整して、属性値を追加または変更することもできます。

• 属性のように わからない要素で、将来的に 寄付そして、あなたは与えられた価値を与えられます。
• 属性のように もう知っている、ヨガの意味は 更新しました値を設定します。

attr() メソッドを調整して属性を追加または変更するには、次の 3 つの方法があります。

1. 任意の要素 (または一連の要素) の属性を追加/変更できます。
2. 属性名と値のマップの追加設定のために、要素 (または要素) の属性番号を一度に追加/変更できます。
3. 追加の回転機能のために、デカール要素の単一の属性を動的に追加/変更できます。

1 つの属性を設定する

要素の属性を設定または変更するには、割り当てられた属性名と値から attr() メソッドを呼び出す必要があります。 例えば：

// #myLink 要素の "href" 属性の値を "http://www.example.com/" に変更 // ("href" 属性が存在しないため、自動的に作成されます) $( "a#myLink")。 attr("href", "http://www.example.com/");

デカール要素に同じ属性を設定することもできます:

選択したカードから属性のスプラットをインストールします

1 つの要素に対して複数の属性を一度に設定することも、追加のカードに対して複数の要素を設定することもできます。 名前と値のペアのリストは次のようになります。

(im'ya1: 値1、im'ya2: 値2、...)

stepping butt には、一度に img 要素に設定された 2 つの属性があります。

// img 要素に "src" および "alt" 属性を設定 #myPhoto $("img#myPhoto").attr(("src": "mypic.jpg", "alt": "My Photo"));

デカール要素の属性を設定することもできます:

// すべての img 要素に "src" および "alt" 属性を設定します $("img"). attr(( "src": "mypic.jpg", "alt": "My Photo"));

ゲート関数の属性を設定できます

または、属性値を attr() メソッドに渡すために、それをコールバック関数に渡すことができます。 このようにして、属性の値または他の力を持つ要素の位置に応じて、デカール要素の属性の値を動的に設定できます。

ロータリー関数は、次の 2 つの引数を取ることができます。

• フローで選択した要素のセットへの位置インデックス (ゼロから開始)
• フローで選択された要素の古い属性値

関数によってローテーションされる値はオーバーライドされ、属性の値が置き換えられます。

要素の現在の位置がその古い属性値である場合、関数はヘルプのために要素自体にアクセスできます。 キーワードこれ 。 このようにして、あらゆる種類の力にアクセスしたり、反転機能を持つ要素のメソッドにアクセスしたりすることができます。

アプリケーションには、画像の位置と src 属性の側のスキン画像に alt 属性を追加するための逆関数があります。

最初の画像のコードに従って、母親には "Baby 1: myphoto.jpg" という値の alt 属性があり、もう 1 つの画像には "Baby 2: yourphoto.jpg" という値の alt 属性があります。

可視属性

要素から属性を削除するには、removeAttr() メソッドを呼び出して、削除する属性の名前を渡す必要があります。 例えば：

// #myLink 要素から「title」属性を削除します $("a#myLink").removeAttr("title");

jQuery オブジェクトで removeAttr() メソッドを呼び出して、一連の要素を削除することもできます。 removeAttr() メソッドは、指定された要素から属性を削除します。

// セットから "title" 属性を削除します $("a").removeAttr("title");

概要

このチュートリアルでは、jQuery 要素の属性の威力を調べました。

• 属性値の読み取り
• 1 つの属性を設定する
• 一度に多数の異なる属性をインストールする
• の邪悪な機能 動的インストール一連の要素の属性の値
• 要素から属性を表示する