「jQuery in Action」という本の次の章（著者Bear BibeaultとYehuda Katz）。 まず第一に、章の発行の間に大きなギャップがあることを読者に謝罪します。 しかし、それでも私はそれをやった。もちろん、それは嬉しい。 あなたも無関心にならないことを願っています。 だから、私たちは続けています。

第3章jQueryページのアニメーション化。

3.1。 オブジェクトのプロパティと属性の操作。

3.1.1。 オブジェクトのプロパティを操作します。

選択したセットの要素をチェックまたは変更する最も簡単な方法により、each（）コマンドを使用できます。



$('img').each(function(n){

this.alt=' image['+n+'] id '+this.id;

});







この式は、指定された関数をページ上の各<img>要素に適用し、要素のシリアル番号とそのIDを使用してalt属性を変更します。

3.1.2、3.1.3属性の値の取得と変更。

後で見るように、jQueryの多くのメソッドは、メソッドに渡される属性とその数に応じて、読み取りと書き込みの両方に使用されます。



そのため、attr（）メソッドを使用して、属性の値の取得と設定の両方を行うことができます。 属性名のみがメソッドに渡される場合、その値が返されます。次に例を示します。



$(“#myImage”).attr(“alt”)







そのため、ID #myImageを持つ要素のaltを取得します。



など：



$(“#myImage”).attr(“alt”,” picture”)







ご想像のとおり、altを同じ要素の「My picture」に設定します。



新しい属性値の代わりに、このメソッドに関数を渡すことができることに注意してください。 例：



$('*').attr('title',function(index) {

return 'I am element '+index+' and my name is ' +

(this.id ? this.id : 'unset');

});







まだ私たちにとって難しいこの関数は、ページのセットのすべての要素を実行し、要素のインデックスとそのIDに従ってタイトル属性を変更します。



さらに、attr（）メソッドを使用すると、いくつかの属性を同時に変更できます。



$('input').attr({value: '', title: 'Please enter a value'});







したがって、すべての入力値をクリアし、タイトルを「値を入力してください」として設定できます。

3.1.4属性の削除。

DOM要素から属性を削除するために、jQueryには特別なremoveAttr（）メソッドがあります。 例：



$('img').removeAttr('alt');







これにより、選択したすべてのimg要素のalt属性が削除されます。

3.2要素のスタイルを操作します。

3.2.1クラス名の追加と削除。

クラス定義は、セットに含まれるすべての要素に渡されるクラス名を割り当てるaddClass（）メソッドを使用して非常に簡単になります。 例：



$('img').addClass('noBorder');







クラスを削除するには、removeClass（）コマンドを使用します。



$('img'). removeClass ('noBorder');







次のメソッドは非常に興味深いものです。toggleClass（）は、このクラスが定義されていない場合、セット内の要素にクラスを割り当て、逆に、クラスが割り当てられている場合、セット内の要素からクラスを削除します。



このメソッドをテーブルに適用すると非常に便利です。たとえば、塗りつぶされた行を白に、白の行を塗りつぶしに変更する必要がある場合です。 これは次のように行われます。



$('tr').toggleClass('striped');







ここで、stripedは塗りつぶされた行のクラス名です。

3.2.2スタイルの取得と設定。

スタイルを直接操作すると、大きなチャンスが得られます。



css（）メソッドはattr（）メソッドと同様に機能し、要素の個々のCSSプロパティを設定したり、名前/値のペアをメソッドに渡したり、いくつかのプロパティを変更したり、オブジェクトにそれらの新しい値を渡したりすることができます



さらに、このメソッドは、プロパティの値として渡された関数も完全に処理します。 たとえば、セット内の要素の幅を20ピクセル増やします。



$('div.expandable').css('width',function(){

return $(this).width() + 20 + “px”;

});







次の例は、パラメーターのグループをオブジェクトとしてメソッドに渡す可能性を示しています。



$('div.example').css({width: '100px', height: '200px'});







最後に、css（）メソッドを使用すると、メソッドに渡されたプロパティの値を取得できます。 たとえば、次のような要素の幅を見つけることができます。



$('div.examle').css('width');







JQueryには、一般的に使用されるプロパティ用の特別なコマンドがあります。 したがって、特別なメソッドheight（）およびwidth（）を使用して、オブジェクトの高さと幅を見つけたり変更したりできます。 したがって、メソッドに値を渡す場合、受け取ったメソッドに従ってこの値を設定し、単にメソッドを呼び出す場合、必要な値を取得します（この場合、転送された値はピクセル単位で設定されます）、つまり：



$('div.example').width(500)







ブロック幅を500ピクセルに設定します。 ちなみに、これはと同じです



$('div.example').css(“width”,”500px”)







これで、次のようにブロックの幅を確認できます。



$('div.example').width()

3.2.3スタイルを操作するためのさらに便利なコマンド。

要素が特定のクラスに属しているかどうかを確認する必要がある場合があります。 hasClass（）関数はこれを行うのに役立ちます：



$('p:first').hasClass('supriseMe')







セット内の要素が指定されたクラスに属する場合、関数はtrueを返します。

3.3要素のコンテンツの設定。

3.3.1 HTMLまたはテキストの置き換え。

最も単純なコマンドhtml（）は、パラメーターが設定されていない場合、最初の対応する要素のHTMLコードを返すか、選択されたすべての要素の内容でパラメーターとして渡されるHTMLフラグメントを設定します。



また、要素のテキストコンテンツのみを取得することもできます。 これにはtext（）コマンドがあります。



<ul id="theList">

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

</ul>







var text=$('#theList').text();







その結果、テキスト変数には文字列「OneTwoThreeFour」が含まれます。



前の関数と同様に、test（）関数がパラメーターとして必要なテキストになる場合、要素のテキストコンテンツを設定できます。 さらに、テキストに文字<または>が含まれている場合、それらは特殊文字に置き換えられます。



これらの2つのコマンドを使用して要素のコンテンツを設定すると、以前のコンテンツが削除されるため、これらのコマンドは慎重に使用してください。

3.3.2アイテムの移動とコピー。

既存のコンテンツの最後にコンテンツを追加するには、append（）コマンドを使用します。



この関数は、パラメーターとして渡された文字列またはHTMLフラグメントを、新規または既存のDOM要素またはネストされたjQuery要素のセットに追加します。 いくつかの例を見てみましょう。



$('p').append('<b>some text</b>');







この式は、ページ上のすべての<p>要素の既存のコンテンツの最後に渡された文字列から作成されたHTMLスニペットを追加します。



このコマンドをより包括的に使用すると、既存のDOM要素を他の要素の子として指定できます。 それは：



$("p.appendToMe").append($("a.appendMe"))







appendMeクラスのすべての参照を、ページクラスappendToMeのすべての<p>の子として割り当てることができます。 この場合、割り当てられた要素の最終位置は、ターゲット要素の数に依存します。 1つしかない場合、割り当てられた要素はページ上の元の位置から移動され、複数のターゲット要素がある場合、割り当てられた要素は元の場所に残り、そのコピーはターゲット要素に割り当てられます。



要素をある場所から別の場所に移動またはコピーするには、appendTo（）コマンドを使用することもできます。このコマンドは、ネストされたセットのすべての要素を、関数パラメーターとして指定されたターゲット要素のコンテンツの最後に移動します。 例を見て、前の関数との違いを確認します。



$(" a.appendMe").appendTo($("p.appendToMe "))







繰り返しますが、セレクターとDOM要素の両方がターゲットとして機能します。 前の関数と同様に、ターゲット要素が1つの場合、移動操作が実行され、複数のターゲットがある場合、コピーが実行されます。



次のコマンドの動作原理は、append（）およびappendTo（）の動作に似ています。

•prepend（）およびprependTo（）-ソース要素をターゲットではなく、ターゲットの前に挿入します。

•before（）およびinsertBefore（）-最初の子の前ではなく、ターゲット要素の前に要素を挿入します。

•after（）およびinsertAfter（）-最後の子の後ではなく、ターゲット要素の後に要素を挿入します。



次の例を考えてみましょう。



$('<p>!</p>').insertAfter('p img');







この式は、新しい段落を作成し、段落内の各図の後にそのコピーを挿入します。

3.3.3ネスト要素

よく参照するもう1つのタイプのDOM操作は、要素（または要素のグループ）を他の要素に埋め込むことです。 たとえば、特定のクラスのすべてのリンクを<div>内に配置します。 これはwrap（）コマンドを使用して実行できます。 このメソッドは、選択された要素のセットを、送信されたHTMLコードまたは転送された要素のクローン内に埋め込みます。



たとえば、helloクラスの<div>にサプライズクラスの各リンクをネストするには、次の手順を実行します。



$(“a.surprise”).wrap(“<div class='hello'></div>”);







ページ上の最初の<div>要素のコピーに各リンクを埋め込む場合：



$(“a.surprise”).wrap($(“div:first”)[0]);







選択したすべての要素を一度に1つではなく、何らかの共通のコンテナにまとめる必要がある場合はどうすればよいでしょうか？ wrapAll（）関数はこれに役立ちます。



必要なコンテナ内のすべての要素ではなく、そのコンテンツのみを配置する場合は、wrapInner（）関数を使用します。

3.3.4アイテムの削除

要素のセットをクリーニングまたは削除する場合、remove（）コマンドを使用して簡単に実行できます。このコマンドは、ページ上のDOMからネストされたセットのすべての要素を削除します。



他の多くのjQueryコマンドと同様に、このコマンドの結果も要素のセットであることに注意してください。 また、DOMから削除しても、同じappendTo（）またはinsertAfter（）などの関数など、他の関数でさらに使用できます。



コンテンツから要素をクリアするには、empty（）コマンドを使用できます。 セット内のすべてのDOM要素の内容を削除します。



置換操作にはremove（）およびafter（）を使用するのが一般的です。 これは同様の方法で行われます：



$('div.elementToReplace').after('<p> </p>').remove();







（）は元の<div>要素を返すため、単純に削除して、新しい段落<p>のみを残すことができます。



アイデアが気に入ったら、それを改良して次の関数を書くことができます：



$.fn.replaceWith = function(html) {

return this.after(html).remove();

}







次に、次のように前の操作を実行します。



$('div.elementToReplace').replaceWith('<p> </p>');







しかし、要素を移動せず、コピーのみしたい場合はどうすればいいですか？..

3.3.5クローニング要素

これを行うために、jQueryにはclone（）コマンドがあります。 彼女はセットのコピーを作成して返します。 すべての要素と子孫がコピーされます。 渡されたパラメーターがtrueの場合、すべてのハンドラーもコピーされます。



コピーで何かをするまで、要素のクローンは非効率的です。 それはすべて私たちの想像力にかかっています。 次に例を示します。



$('img').clone().appendTo('fieldset .photo');







この式は、すべての画像のコピーを作成し、それらを写真クラスのすべての<fieldset>要素に配置します。



別の例：



$('ul').clone().insertBefore('#here');







同様の操作を実行します。 ここでは、子孫<li>（もちろん、存在する場合）を含むすべての<ul>要素が複製されることに注意してください。



そして最後の例：



$('ul').clone().insertBefore('#here').end().hide();







この式は前の操作に似ていますが、コピーを挿入した後、end（）コマンドがソースセットを選択し、その後、hide（）コマンドで非表示になります。

3.4フォーム要素の操作

フォームで実行される主なアクションは、データの操作です。 val（）コマンドは、セットの最初の要素のvalue属性の内容を返します。 フォーム要素に複数の選択肢が含まれる場合、これらすべての選択肢からの値の配列が返されます。



このコマンドは非常に便利ですが、いくつかの制限があります。 セットの最初の要素がフォーム要素でない場合、エラーメッセージが表示されます。 また、このコマンドは、マークされたチェックボックスとチェックされていないチェックボックスまたはラジオバトン要素を区別しません。



ラジオバトンの場合、次のことができます。



$('[name=radioGroup]:checked').val()







この式は、radioGroupという名前の選択された唯一のラジオバトンの値を返します（ラジオバトンが選択されていない場合はundefinedを返します）。 この例はチェックボックスに適用できません。ここでは複数の選択された値が可能であり、すでに述べたように、val（）はセットの最初の要素のvalue属性の内容を返します。



コマンドにパラメーターを渡すと、そのパラメーターは、セットのすべての選択された要素の値の値として設定されます。 この場合も、多くの制限があります。 たとえば、複数の選択項目を持つアイテムに複数の値を設定することはできません。



val（）を使用するもう1つの方向は、チェックボックスとラジオバトンフラグを設定するか、<select>オプションを選択することです。 この場合、値の配列が送信され、それらのいずれかが要素の値と一致する場合、要素が選択（マーク）されます。 例：



$('input,select').val(['one','two','three']);







この式は、すべての<input>および<select>要素をチェックして、それらの値が渡された文字列（1、2、または3）のいずれかと一致するかどうかを確認します。 値が一致すると、チェックボックスまたはラジオバトンがマークされ、選択オプションが選択されます。



次の章は終わりました。 再び、私は健全な批判に喜んでいるでしょう。 ありがとう



私はあなたに私のブログでこの記事や他の記事をいつでも見つけることができることを思い出します、あなたはそこにファイルすることもできます ;-)