jQuery の学習 3: 要素の属性と特性の操作_jquery

まず例を見てみましょう:

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

http://www.jb51.net 次に、a タグの属性 ID を取得する必要があります。以下の方法があります:

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

jQuery("#easy").click(function() {
alert(document.getElementById("easy").id); //1
アラート(this.id); //2
alert(jQuery(this).attr("id")); //3
});

メソッド 1 はオリジナルの JavaScript メソッドを使用し、メソッド 2 はこれを使用します。これはポインタに相当し、dom オブジェクトを返します。この場合、a タグ オブジェクトが返されます。したがって、this.id は ID を直接取得できます。メソッド 3 では、dom オブジェクトを jQuery オブジェクトに変換し、jQuery でカプセル化されたメソッド attr() を使用して a タグの ID を取得します。

jQuery で JavaScript を使用すると非常に便利な場合があることがわかります。以下では、jQuery が要素属性を操作する方法を要約することに重点を置きます。

◦attr(name) 要素の属性値を取得します
◦attr(properties) 要素の属性を名前/値の形式で設定します
◦attr(key,value) 要素
の属性値を設定します ◦removeAttr(name) は要素

の属性値を削除します

次の例は、各メソッドの具体的な使用法を示しています。

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

スクリプト ホーム
Baidu

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

jQuery("#test a").click(function() {
//IDを取得
jQuery(this).attr("id"); //this.idと同じ

//img タグの src を指定された画像のタイトルに Baidu に設定します。
var v = { src: "http://www.baidu.com/img/bdlogo.gif"、タイトル: "Baidu" };
jQuery("#show").attr(v);

//img のタイトルを baidu に設定します。上記との違いは、一度に 1 つの属性のみを設定できることです。
jQuery("#show").attr("タイトル", "baidu");

//img の title 属性を削除します
jQuery("#show").removeAttr("title");
});

jQuery の attr() メソッドは、要素の属性値を取得するだけでなく、要素の属性値を設定することもできることに気づいたかもしれません。はい、jQuery には似たようなメソッドがたくさんありますので、ここでまとめておくと将来的には使いやすくなります。

メソッドは次のとおりです:

◦html() 要素ノードの HTML コンテンツを取得または設定します
◦text() 要素ノード
のテキストコンテンツを取得または設定します。 ◦height() 要素の高さを取得または設定します
◦ width() 要素
の幅を取得または設定します ◦ val() 入力ボックスの値を取得または設定します

html() を例として挙げますが、残りも同様です:

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

baidu

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

// HTML を取得、結果は baidu
jQuery("#showhtml").html();
// html を設定すると、結果は baidu が大好きです
jQuery("#showhtml").html("百度が大好き");

これらは、jQuery で要素の属性を操作するための基本的な方法のいくつかです。この概要を読めば、誰もが jQuery の使用に習熟できると思います。

以下は他のネチズンからの追加です:

jQuery で提供されるメソッドは以下のとおりです:

要素属性の操作: each(iterator) は、パッケージング セット内のすべての要素を走査し、要素ごとに渡されたイテレーター関数を呼び出します。パラメーター反復子は、一致するセット内の要素ごとに 1 回呼び出される関数です。関数に渡される引数は、ラップされたセット内の現在の要素のインデックス (0 から始まる) に設定され、関数の this 属性を通じてアクセスできます。

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

$('img').each(function(n){
this.alt='これは、ID が' this.id の image[' n '] です;
})

属性値の取得: attr(name) は、パッケージング セット内の最初の要素の指定された属性に割り当てられた値を取得します。パラメータ名は属性の名前であり、属性の値が取得されます。そのような属性がない場合は、未定義の値が返されます。

$("#myImage").attr("custom") 取得される値は何らかの値です。

属性値の設定: attr(name,value) は、パッケージング セット内のすべての要素の name 属性に渡された値を設定します。 name は設定される属性の名前で、value は属性の値を指定します。

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

$('*').attr('タイトル',関数(インデックス) {
return '私は要素' ' インデックス '、名前は ' (this.id?this.id:'unset');
});

この関数は、ページ上のすべての要素の title 属性を文字列に設定します。 DOM 内の要素の添え字と、特定の各要素の id 属性値で構成される文字列。

attr() は、ラッパー セット内のすべての要素に複数の属性を一度に設定するための迅速かつ簡単な方法でもあります。 attr(属性)。

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

$('input').attr(
{value:'',title:'値を入力してください'}
);

この関数は、すべての 要素の値を空の文字列に設定し、タイトルを文字列に設定します。値を入力してください。