jQuery_jqueryで使用するタグ要素属性の使用例

この記事の例では、jQuery で使用されるタグ要素属性の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ここで紹介する jQuery の使用には、要素の属性、CSS スタイル、DOM モデル、フォーム要素、イベント処理など、jQuery によるページの制御方法が主に含まれます。

タグ要素​​の属性

HTML のすべてのタグにはいくつかの属性があり、そのタグはページ内のさまざまな状態を示します。たとえば、次の タグ

コードをコピー コードは次のとおりです:

タグ は、ハイパーリンクであるタグの名前を表します。また、href タイトル ターゲット ID などの属性は、ページ内のこのハイパーリンクのさまざまな状態を示します。

この記事では、jQuery の観点からページ属性の制御方法をさらに詳しく説明します。

1.each() は要素

を走査します

each(callback) メソッドは、主にセレクター内の要素をトラバースするために使用されます。この関数は、要素のシリアル番号を参照するパラメーターを受け取ります。マークされた属性の場合、this キーワードを指定して each() メソッドを使用すると、セレクター内の各要素に対応する属性値を取得または設定できます。

each() メソッドを使用してすべての要素を走査します。

コードをコピーします コードは次のとおりです:

最初の段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の段落

上記のコードには 7 つの P 要素があります。まず、$("p") を使用してページ内のすべての p 要素のセットを取得し、次に each() メソッドを使用してすべてのピクチャを走査します。 this キーワードを使用して画像にアクセスし、画像の ID を取得して、画像の ID 属性を設定します。 each() メソッドの関数インデックスは要素のシリアル番号です。

2. 属性の値を取得します。 attr(name) メソッド

セレクター全体の要素を反復処理する場合を除きます。多くの場合、オブジェクトの特性の値を取得する必要がありますが、これは jQuery の attr(name) メソッドを使用して簡単に実現できます。このメソッドは、要素セット内の最初の属性値を取得します。一致するものがない場合は、unffined を返します。

コードをコピーします コードは次のとおりです:

script type="text/javascript">
$(function() {
var sTitle = $("p").attr("title");//最初のp要素のtitle属性値を取得します
$("#display").text(sTitle);
});

最初の段落

第 2 段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の段落

2 番目の p の title 属性値を取得したい場合は、位置セレクターを使用して取得できます。

コードをコピー コードは次のとおりです。

$(function() {
var sTitle = $("p:eq(1)").attr("title");//2番目のp要素のtitle属性値を取得します
$("#display").text(sTitle);
});

3. 属性の値を設定します。 attr(名前,値)

attr() メソッドは、要素の値を取得するだけでなく、属性の値を設定することもできます。一般的な式は
です。

コードをコピー コードは次のとおりです:

attr(name,value)

例: 次のコードは、ページ上のすべてのハイパーリンクを新しいウィンドウで開きます。

コードをコピーします コードは次のとおりです:

例:

コードをコピーします コードは次のとおりです:

最初のボタン 2番目のボタンボタン> 3番目のボタンボタン>

ポジションセレクターでは、最初のボタンをクリックすると、次の 2 つのボタンが同時に無効になります。

多くの場合、属性の値がさまざまな要素に基づいて定期的に変更されることを望みます。現時点では、attr(name,fn) を使用できます。2 番目のパラメーターは関数です。この関数は、要素のシリアル番号である 1 つのパラメータを受け取り、戻り値は文字列です。

コードをコピーします コードは次のとおりです: $(function() {

$("div").attr("id", function(index) {

//シリアル番号に関連するパラメータとしてidを設定
"div-id" インデックスを返します;
}).each(function() {
//各項目のspanタグを検索
$(this).find("span").html("(id='" this.id "')");
});
});

アイテム 0

アイテム 1

項目 2

戻り内容:

コードをコピー コードは次のとおりです:項目 0 (id='div-id0') アイテム 1 (id='div-id1')

項目 2 (id='div-id2')

上記のコードは、attr(name,fn) を通じて、ページ内のすべての

ブロックの id 属性値をシリアル番号関連のパラメーターに設定します。そして、 each() メソッドを通じて div ブロックをトラバースして、それぞれの タグの id 値を表示します。これは jQuery チェーンの威力を示しています。

上記の方法を使用する場合、一部の要素に対して同時に異なる属性を設定したい場合、属性を 1 つずつ設定する必要があります。 jQuery は非常に使いやすく、attr() にはリスト設定の attr(properties) メソッドも用意されています。複数のプロパティを設定できます。

コードをコピーします コードは次のとおりです: $(function() {

$("img").attr({

src: "06.jpg",
タイトル: 「名前 1」、
alt: "名前 2"
});
});








実行結果:

コードをコピー コードは次のとおりです:

4. 属性を削除します

要素の属性の値を設定する場合、removeAttr(name) メソッドを通じて属性値を削除できます。その後、要素はデフォルト設定に復元されます。たとえば、次のコードはすべてのボタンを無効にします。

コードをコピー コードは次のとおりです。

$(function() {
$("ボタン").removeAttr("無効")
});

RemoveAttr(name) 属性を削除することは、HTML タグ内の属性を削除しないことと同じです。これは、このマークの特徴が排除されたことを意味するものではありません。上記のコードを実行した後も、すべてのボタンを無効に設定できます。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。