ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery レッスン 3 要素の属性と Content_jquery を変更するコード

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

WBOY
リリース: 2016-05-16 18:32:32
オリジナル
1120 人が閲覧しました

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

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



jQuery オペレーション




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


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




コードをコピーします。


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


🎜>
2

Hello JQuery


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




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

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

3. フォーム要素の値の操作
フォーム要素の値の操作は非常に一般的ですが、簡単ではありません。 jQuery には、操作を簡素化するための val メソッドが用意されています。パラメータのない val() メソッドは、現在の要素の値を返します。 val(values) メソッドは、現在の要素の値を value に設定するために使用されます。values が配列の場合、select 要素内の値と一致させるために使用されます。値に含まれるものが選択されます。
ソース:php.cn
前の記事:javascript は、リスニング ハンドラー関数が false_javascript を返した場合でもフォームが送信される問題を解決します。 次の記事:IEとFireFox_javascriptスキルのJS共通機能の違いまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート