jQuery レッスン 3 要素の属性と Content_jquery を変更するコード

1. 操作属性
上記は、必要な要素をフィルタリングする方法を説明しています。要素を取得したら、それを操作する必要があります。一般的な要件は、取得した要素のセットを反復処理し、各要素に対して操作を実行することです。 jQuery が提供する関数は
each(iterator) です。ここで、iterator は要素の数を示す整数をパラメータとして受け取る関数です。簡単な例を見てみましょう。

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

上記の例では、属性にアクセスするためにネイティブ JavaScript メソッドが使用されています。jQuery は、属性にアクセスするためのより一般的なメソッド attr: を提供します。

attr(name)、name が文字列の場合、最初の要素の属性の name の値を取得します。name がオブジェクトの場合、オブジェクトの属性がパッケージング セットのすべての要素に属性としてコピーされます。要素 。

attr(name,value)、name が文字列の場合、属性 name の値を value に設定します。value が関数の場合、パッケージング セット内の各要素に対してこの関数を呼び出して設定します。name の値が設定されます。関数の戻り値に。

簡単な例を見てください。HTML コードでは引き続き上記が使用されています。

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

$(function() {

$('body').children().attr('title', function (n) {
return"これは " n " 番目の要素です"
});
$('img').attr('alt', 'yingZixin が撮影した写真'); 🎜>alert($ ('h1').attr('title'));



結果は次のようになります。 🎜>


属性を削除するには、removeAttr(name) メソッドを使用します。

属性の中には特別な属性クラスがあることに注意してください。 class 属性は非常に一般的に使用されており、JavaScript のキーワードにもなっています。 class 属性にアクセスするには、class の代わりに className を使用します。例:
$('img').attr('className', 'photo'); クラスは他の属性とは異なります。たとえば、class='big Strong ' のように、要素はスペースで区切って複数のクラスを持つことができます。 , クラスは特別で一般的に使用されるため、jQuery にはクラス属性を処理するための特別なメソッドがあります。
addClass(names)、クラスを追加します。removeClass(names)、クラスを削除します。toggleClass(names)、要素にクラスがある場合は削除し、そうでない場合は追加します。 名前は文字列であり、スペースで区切られた複数のクラス名で構成できます。 addClass とremoveClass は例を示さずに簡単に使用できます。toggleClass は特にシンプルで実用的です。以下の例を見てみましょう。




コードをコピーします。


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

border:実線 2px 赤;

🎜>

2

Hello JQuery


最終的な結果は次のとおりです。




append メソッドの逆方向のパラメーターを追加する appendTo(target) もあります。呼び出し元に追加し、appendTo 呼び出し元はパラメータを内部的に追加します。 append と appendTo に似たメソッドのペアがいくつかあります:
prepend、prependTo:append メソッド ターゲット要素内に他の要素がある場合、追加された要素は元の要素の最後にあり、prepend は前に。

before、insertBefore: 宛先要素内ではなく、前に挿入します。 after、insertAfter: 宛先要素の後に挿入します。
要素を削除するには、remove メソッドまたは empty メソッドを使用できます。削除は、選択された要素をページから削除し、これらの要素を戻り値として返します。これらの要素は、append などのメソッドを使用してさらに操作したり、ページ上で再表示したりすることはできません。要素。

3. フォーム要素の値の操作
フォーム要素の値の操作は非常に一般的ですが、簡単ではありません。 jQuery には、操作を簡素化するための val メソッドが用意されています。パラメータのない val() メソッドは、現在の要素の値を返します。 val(values) メソッドは、現在の要素の値を value に設定するために使用されます。values が配列の場合、select 要素内の値と一致させるために使用されます。値に含まれるものが選択されます。