jQuery操作要素のプロパティとスタイルをハンドルで教えます(1)
8506 ワード
一. DOM属性と要素属性の区別
imgラベル:
通常、開発者はid、src、altなどをこの要素の「属性」と呼ぶことに慣れています.私はそれを「要素属性」と呼びます.しかし、DOMオブジェクトに解析すると、実際のブラウザは最後にラベル要素を「DOMオブジェクト」に解析し、要素の「要素属性」を「DOM属性」に格納します..両者には違いがあります.要素のsrcは相対パスです.images/image.1.jpgですが、「DOMプロパティ」では絶対パスに変換されます.http://localhost/images/image.1.jpg.
上の要素属性classのように、DOM属性に変換するとclassNameに対応する「要素属性」と「DOM属性」の名前が異なる場合もある.
javascriptでは、DOMプロパティを直接取得または設定できます.
したがって、要素のCSSスタイルクラスを設定する場合は、「要素属性」ではなく「DOM属性」className」を使用します.
img1.className = "classB";
二 アクション「DOMプロパティ」
jQueryにはパッケージ操作「DOM属性」の関数はありません.javascriptを使用して「DOM属性」を取得して設定するのは簡単です.jQueryでは、jQueryパッケージセットを巡回するためのeach()関数が提供されています.このポインタはDOMオブジェクトなので、元のjavascriptと組み合わせて要素のDOM属性を操作することができます.
each関数の説明は次のとおりです.
each(callback)Returns:jQueryパッケージセット
パッケージセットの各要素に対してcallbackメソッドを実行する.callbackメソッドは、現在遍歴するインデックス値を0から表すパラメータを受け入れる.
三.操作「要素属性」
javascriptのgetAttributeとsetAttributeを使用して、要素の「要素属性」を操作できます.
jQueryでは、パッケージセットのすべての要素のプロパティを同時に操作できるattr()パッケージセット関数を提供します.
名前
説明
例を挙げる
attr( name )
最初の一致要素の属性値を取得します.この方法で、最初の一致要素から属性の値を簡単に取得できます.要素に対応する属性がない場合はundefinedを返します.
ドキュメント内の最初の画像のsrcプロパティ値:$("img").attr("src");
attr( properties )
「名前/値」形式のオブジェクトをすべての一致する要素の属性に設定します.これは、すべての一致する要素に多数の属性を一括して設定する最善の方法です.オブジェクトのclass属性を設定する場合は、属性名として「className」を使用する必要があります.または、.addClass(class)と.removeClass(class)を直接使用できます.
すべての画像に対してsrcとalt属性:$("img").attr({src:"test.jpg",alt:"Test Image"})を設定します.
attr( key, value )
一致するすべての要素に属性値を設定
すべての画像にsrcプロパティを設定します:$("img").attr("src","test.jpg");
attr( key, fn )
一致するすべての要素に計算される属性値を設定します.値は指定されません.この関数で計算される値を属性値として指定します.
src属性の値をtitle属性の値:$(“img”).attr(“title”,function(){return this.src});
removeAttr( name )
一致する各要素から属性を削除
ドキュメント内の画像のsrcプロパティを削除します:$("img").removeAttr("src");
idセレクタを使用すると、オブジェクトが1つしかないjQueryパッケージセットが返されます.この場合、attr(name)関数を使用して要素プロパティが得られます.
注意attr(name)関数は、最初の一致する要素の特定の要素属性値のみを返します.attr(key,name)は、すべてのパッケージセットの要素属性を設定します.
//すべてのimg要素のalt属性を変更する
$(「img」).attr(「alt」,「修正後のalt属性」)
attr(properties)は、複数の要素のプロパティを一度に変更できます.
また、removeAttr(name)を使用する要素属性を削除することができるが、対応するDOM属性は削除されず、DOM属性の値にのみ影響する.
たとえば、input要素のreadonly要素属性を削除すると、対応するDOM属性がfalseになります(すなわち、inputが編集可能になります):
四、CSSスタイルの修正
要素のスタイルを変更するには、要素CSSクラスを変更するか、要素のスタイルを直接変更することができます.
1つの要素は複数のcssクラスを適用することができるが、不幸なことにDOM属性では配列ではなくスペースで分割された文字列で格納されるため、元のjavascript時代に要素に複数の属性を追加または削除したい場合は、文字列を自分で操作する.
jQueryはこのすべてを異常に簡単にしました.私たちはもう退屈な仕事をする必要はありません.
1.CSSクラスの修正
次の表は、CSSクラスに関連するjQueryメソッドを変更する方法です.
名前
説明
≪インスタンス｜Instance｜emdw≫
addClass( classes )
一致する要素ごとに指定したクラス名を追加します.
一致する要素に'selected'クラス:$("p").addClass("selected");
hasClass( class )
パッケージセットに指定されたCSSクラスが少なくとも1つの要素が適用されているかどうかを判断します.
$("p").hasClass("selected");
removeClass( [classes] )
一致するすべての要素から、すべてまたは指定したクラスを削除します.
一致する要素から'selected'クラスを削除します:$("p").removeClass("selected");
toggleClass( class )
存在する(存在しない)場合は、クラスを削除(追加)します.
一致する要素の'selected'クラスを切り替えます:$("p").toggleClass("selected");
toggleClass( class, switch )
switchがtrueの場合はクラスを追加し、switchがfalseの場合はクラスを削除します.
3回のクリックごとにハイライトスタイルを切り替えます:var count=0;$("p").click(function($(this).toggleClass("highlight",count++%3=%0);});
上記の方法では、要素のCSSクラスを集合のように修正することができ、文字列を手動で解析する必要はありません.
注意addClass(class)とremoveClass([classes])のパラメータは、複数のcssクラスに一度に入力し、スペースで分割できます.たとえば、次のようにします.
removeClassメソッドのパラメータはオプションで、パラメータを入力しない場合はCSSクラスをすべて削除します.
2.CSSサンプルの修正
同様に、要素の特定のCSSスタイル、すなわち要素属性「style」を変更したい場合、jQueryも対応する方法を提供します.
名前
説明
≪インスタンス｜Instance｜emdw≫
css( name )
最初の一致する要素のスタイルプロパティにアクセスします.
最初の段落のcolorスタイル属性の値:$("p").css("color");
css( properties )
名前/値ペアオブジェクトをすべての一致する要素のスタイル属性に設定します.これは、すべての一致する要素に多くのスタイル属性を設定するのに最適です.
すべての段落のフォント色を赤に設定し、背景を青にします:$("p").css({color:#ff 0011",background:"blue"});
css( name, value )
一致するすべての要素で、スタイル属性の値を設定します.数値は自動的にピクセル値に変換されます.
すべての段落フォントを赤にします:$("p").css("color","red");
ヒント:cssスタイル属性の名前にハイフネーションがいくつあるかにかかわらず、DOMは「Camel記号」(アルパカ)で表されます.そこで、css属性background-colorはDOM属性backgroundColorに対応し、DOM属性marginTopWidthはcss属性margin-top-widthに対応するなど、javaの変数命名習慣に似ています.
DOM styleプロパティは、外部cssファイルで宣言されたスタイル情報を取得するために使用できません.できるだけjqueryの方法を使用しましょう.
imgラベル:
- <img src="images/image.1.jpg" mce_src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常、開発者はid、src、altなどをこの要素の「属性」と呼ぶことに慣れています.私はそれを「要素属性」と呼びます.しかし、DOMオブジェクトに解析すると、実際のブラウザは最後にラベル要素を「DOMオブジェクト」に解析し、要素の「要素属性」を「DOM属性」に格納します..両者には違いがあります.要素のsrcは相対パスです.images/image.1.jpgですが、「DOMプロパティ」では絶対パスに変換されます.http://localhost/images/image.1.jpg.
上の要素属性classのように、DOM属性に変換するとclassNameに対応する「要素属性」と「DOM属性」の名前が異なる場合もある.
javascriptでは、DOMプロパティを直接取得または設定できます.
- <script type="text/javascript">
- $(function() {
- var img1 = document.getElementById("hibiscus");
- alert(img1.alt);
- img1.alt = "Change the alt element attribute";
- alert(img1.alt);
- })
- </script>
したがって、要素のCSSスタイルクラスを設定する場合は、「要素属性」ではなく「DOM属性」className」を使用します.
img1.className = "classB";
二 アクション「DOMプロパティ」
jQueryにはパッケージ操作「DOM属性」の関数はありません.javascriptを使用して「DOM属性」を取得して設定するのは簡単です.jQueryでは、jQueryパッケージセットを巡回するためのeach()関数が提供されています.このポインタはDOMオブジェクトなので、元のjavascriptと組み合わせて要素のDOM属性を操作することができます.
each関数の説明は次のとおりです.
- $("img").each(function(index) {
- alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
- this.alt = "changed";
- alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
- });
each(callback)Returns:jQueryパッケージセット
パッケージセットの各要素に対してcallbackメソッドを実行する.callbackメソッドは、現在遍歴するインデックス値を0から表すパラメータを受け入れる.
三.操作「要素属性」
javascriptのgetAttributeとsetAttributeを使用して、要素の「要素属性」を操作できます.
jQueryでは、パッケージセットのすべての要素のプロパティを同時に操作できるattr()パッケージセット関数を提供します.
名前
説明
例を挙げる
attr( name )
最初の一致要素の属性値を取得します.この方法で、最初の一致要素から属性の値を簡単に取得できます.要素に対応する属性がない場合はundefinedを返します.
ドキュメント内の最初の画像のsrcプロパティ値:$("img").attr("src");
attr( properties )
「名前/値」形式のオブジェクトをすべての一致する要素の属性に設定します.これは、すべての一致する要素に多数の属性を一括して設定する最善の方法です.オブジェクトのclass属性を設定する場合は、属性名として「className」を使用する必要があります.または、.addClass(class)と.removeClass(class)を直接使用できます.
すべての画像に対してsrcとalt属性:$("img").attr({src:"test.jpg",alt:"Test Image"})を設定します.
attr( key, value )
一致するすべての要素に属性値を設定
すべての画像にsrcプロパティを設定します:$("img").attr("src","test.jpg");
attr( key, fn )
一致するすべての要素に計算される属性値を設定します.値は指定されません.この関数で計算される値を属性値として指定します.
src属性の値をtitle属性の値:$(“img”).attr(“title”,function(){return this.src});
removeAttr( name )
一致する各要素から属性を削除
ドキュメント内の画像のsrcプロパティを削除します:$("img").removeAttr("src");
idセレクタを使用すると、オブジェクトが1つしかないjQueryパッケージセットが返されます.この場合、attr(name)関数を使用して要素プロパティが得られます.
- function testAttr1(event) {
- alert($("#hibiscus").attr("class"));
- }
注意attr(name)関数は、最初の一致する要素の特定の要素属性値のみを返します.attr(key,name)は、すべてのパッケージセットの要素属性を設定します.
//すべてのimg要素のalt属性を変更する
$(「img」).attr(「alt」,「修正後のalt属性」)
attr(properties)は、複数の要素のプロパティを一度に変更できます.
- $("img").attr({title:" title", alt: " alt "});
また、removeAttr(name)を使用する要素属性を削除することができるが、対応するDOM属性は削除されず、DOM属性の値にのみ影響する.
たとえば、input要素のreadonly要素属性を削除すると、対応するDOM属性がfalseになります(すなわち、inputが編集可能になります):
- $("#inputTest").removeAttr("readonly");
四、CSSスタイルの修正
要素のスタイルを変更するには、要素CSSクラスを変更するか、要素のスタイルを直接変更することができます.
1つの要素は複数のcssクラスを適用することができるが、不幸なことにDOM属性では配列ではなくスペースで分割された文字列で格納されるため、元のjavascript時代に要素に複数の属性を追加または削除したい場合は、文字列を自分で操作する.
jQueryはこのすべてを異常に簡単にしました.私たちはもう退屈な仕事をする必要はありません.
1.CSSクラスの修正
次の表は、CSSクラスに関連するjQueryメソッドを変更する方法です.
名前
説明
≪インスタンス｜Instance｜emdw≫
addClass( classes )
一致する要素ごとに指定したクラス名を追加します.
一致する要素に'selected'クラス:$("p").addClass("selected");
hasClass( class )
パッケージセットに指定されたCSSクラスが少なくとも1つの要素が適用されているかどうかを判断します.
$("p").hasClass("selected");
removeClass( [classes] )
一致するすべての要素から、すべてまたは指定したクラスを削除します.
一致する要素から'selected'クラスを削除します:$("p").removeClass("selected");
toggleClass( class )
存在する(存在しない)場合は、クラスを削除(追加)します.
一致する要素の'selected'クラスを切り替えます:$("p").toggleClass("selected");
toggleClass( class, switch )
switchがtrueの場合はクラスを追加し、switchがfalseの場合はクラスを削除します.
3回のクリックごとにハイライトスタイルを切り替えます:var count=0;$("p").click(function($(this).toggleClass("highlight",count++%3=%0);});
上記の方法では、要素のCSSクラスを集合のように修正することができ、文字列を手動で解析する必要はありません.
注意addClass(class)とremoveClass([classes])のパラメータは、複数のcssクラスに一度に入力し、スペースで分割できます.たとえば、次のようにします.
- $("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });
removeClassメソッドのパラメータはオプションで、パラメータを入力しない場合はCSSクラスをすべて削除します.
- $("p").removeClass()
2.CSSサンプルの修正
同様に、要素の特定のCSSスタイル、すなわち要素属性「style」を変更したい場合、jQueryも対応する方法を提供します.
名前
説明
≪インスタンス｜Instance｜emdw≫
css( name )
最初の一致する要素のスタイルプロパティにアクセスします.
最初の段落のcolorスタイル属性の値:$("p").css("color");
css( properties )
名前/値ペアオブジェクトをすべての一致する要素のスタイル属性に設定します.これは、すべての一致する要素に多くのスタイル属性を設定するのに最適です.
すべての段落のフォント色を赤に設定し、背景を青にします:$("p").css({color:#ff 0011",background:"blue"});
css( name, value )
一致するすべての要素で、スタイル属性の値を設定します.数値は自動的にピクセル値に変換されます.
すべての段落フォントを赤にします:$("p").css("color","red");
ヒント:cssスタイル属性の名前にハイフネーションがいくつあるかにかかわらず、DOMは「Camel記号」(アルパカ)で表されます.そこで、css属性background-colorはDOM属性backgroundColorに対応し、DOM属性marginTopWidthはcss属性margin-top-widthに対応するなど、javaの変数命名習慣に似ています.
DOM styleプロパティは、外部cssファイルで宣言されたスタイル情報を取得するために使用できません.できるだけjqueryの方法を使用しましょう.