jQuery DOM 操作は、commands_jquery に基づいてページを変更します

あれ、広告っぽい？あはは、確かにその通りです。jQuery は、これらの複雑な DOM 操作を簡単にするための豊富な DOM 操作メソッドを提供します。
前回 jQuery について書いてからかなり時間が経ったようですが、このセクションを書く必要があります。
操作属性:
前に述べたとおりです。 () メソッドと .removeClass() メソッドは実際に DOM 属性 className を変更します。
そういえば、なぜ要素のクラス名を直接 class と呼ばずに className としているのか、もう一度触れておきますが、class は js の予約語だからです。うーん。
class に加えて、id、rel、href などの他の DOM 要素の属性があります。これらの属性はどのように操作すればよいでしょうか。
心配しないでください。jQuery には .attr() メソッドと .removeAttr() メソッドが用意されています。
さらに、これら 2 つのメソッドを使用して .class() メソッドを置き換えることもできます - 何か問題を起こしたければ、(笑)。 。
次に、赤い文字を緑に変更しましょう。また、私は GOOGLE が好きですが、Baidu が好きな人もいますので、好きな方を選びましょう。

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

ここにはハイパーリンクがあります。ハイパーリンクは < ;a href='http:/www.baidu.com' target='_blank' class='link'>Baidu

このボタンをクリックしますBaidu を GOOGLE に変更するには、もう一度クリックして Baidu に戻します


ここには単語の色が赤です、私は赤です
< ;br/>
このボタンをクリックすると、赤が緑になります

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

$(document).ready(function(){
$( ' #but_link').toggle(function(){
$('.link').attr('href','http://www.google.com');
$('.link ' ).text('GOOGLE');
$(this).attr('value','BAIDU になろう'),function(){
$('.link'); . attr('href','http://www.baidu.com');
$('.link').text('value) ' ,'GOOGLE')
});
$('#but_color').toggle(function(){
$('.font').attr('color','green ' );
$('.font').text('私は緑です、私は緑です');
$(this).attr('値','赤にしてください'); },function(){
$('.font').attr('color','red');
$('.font').text('私は赤い、私は赤い ' );
$(this).attr('value','turn it green')
})
});


この本の例のように、DOM オブジェクトが処理されます。DIV の下の各 A タグに一意の ID
を与えたい場合は、イテレーターに似た jQuery の .each() メソッドを使用できます。 PHP の foreach に少し似ています。

コードをコピーします

コードは次のとおりです: $(document) 。 ready(function() { $('div.chapter a').each(function(index) {

$(this).attr({

'id': 'wikilink-' インデックス ,
});
});


このインデックス パラメーターは、最初のリンクでは 0 になり、その後は各リンクで値が 0 になります。その値は、後続のリンクごとに 1 ずつ増加します。等々。
それでは、これらの例については後ほどお待ちください。デモについても一緒に説明します。しかし、残念なことに、私の海外スペースのアドレスはブロックされています。うーん。
$() ファクトリ関数の詳細な理解:
実際、このメモを最初に取り始めて以来、このファクトリ関数を使用しています。

この関数は、エフェクトやイベント
を追加したり、一致する要素セットに属性を追加したりするときに不可欠であるため、ある意味、jQuery ライブラリの中核となります。
ただし、要素の選択に加えて、$() 関数の括弧内には別の謎があります。この強力な機能により、$() 関数はページ
の外観を変更するだけでなく、ページの実際のコンテンツを変更します。この括弧のペア内に一連の HTML 要素を配置する限り、DOM 構造全体を簡単に変更できます。
たとえば、私が FAQ を書いたので、この本の例は非常に適切です。 。 。
FAQは必ず一問一答型(自問自答型)となっております。一部の回答は長すぎるため、その後ろにトップに戻る
を追加する必要があります。次のように記述できます




コードをコピー

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

$(document).ready(function){
$('トップに戻る'); ;a id="top">);


このようにして、各段落の後に「トップに戻る」というハイパーリンクが追加されます。 「トップ」アンカーも追加します。

え？見てないって言ったよね？ああ、分かった。 。この新しい要素をまだ DOM に挿入しておらず、作成したばかりであることを認めます。
新しい要素の挿入:
jQuery には、他の要素の前に要素を挿入するための 2 つのメソッド (.insertBefore() と .before()) が用意されています。
これら 2 つのメソッドは同じ効果がありますが、その違いは他のメソッドとどのように連結されるかによって異なります。
そして、賢明な方なら当然、他の要素の後に挿入するメソッドは .insertAfter() と .after() だと考えるでしょう。
「トップに戻る」の場合は、.insertAfter() メソッドを使用しました。その理由は、各回答の後にこのリンクを追加する必要があるためです。 。うーん。

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

$(document).ready(function) {

$('トップに戻る').insertAfter('div.chapter p');
$('');
});


.insertAfter() と同じタスクは、.after() メソッドを通じても実行できます。セレクター式は、このメソッドの後ではなく、前に配置する必要があります。

.after() メソッドを使用する場合、$(document).ready() のコードの最初の行は次のように書き換えることができます。
$('div.chapter p').after('< ; a href="#top">トップに戻る');
.insertAfter() を使用すると、さらにメソッドを接続して、作成した 要素を継続的に操作できます。
.after() を使用すると、他の連結メソッドの操作オブジェクトが $('div.chapter p') のセレクターに一致する要素になります。
では、要素に新しい要素を挿入したい場合はどうすればよいでしょうか?今言ったのは兄弟たらしめる要素です。そして、子要素を挿入するにはどうすればよいでしょうか?
心配しないでください。.prependTo() メソッドがあります。

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

$('').prependTo('body');

.prependTo() メソッドはストロークをターゲットとして挿入し、グループを追加します完全に機能します。トップに戻るリンク。

同様に、jQuery にも .prepend() というメソッドが用意されています。API によれば、その機能は次のとおりです。
一致する各要素にコンテンツを追加します。
この操作は、指定された要素に対して appendChild メソッドを実行して、要素をドキュメントに追加するのと似ています。
例:

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

こんにちは

-->$("p").append("こんにちは ");


ラッパー要素:
要素を他の要素でラップするための jQuery のメソッドは、適切な名前: .wrap() です。

テスト段落内で

タグを囲む場合。

div、

テスト段落

>次のように書くことができます
$("p").wrap(document.getElementById('content'));
要素のコピー:
ハイライトがついに出ました。 。うーん。要素をコピーします。 。
今年初めにクローンが実装されましたが、最近は叫ぶことも少ないようです。最も一般的なのは、人間のクローン作成の必要性です。考えてみると不思議です。 クローン作成後にあなたの妻を盗んだ場合はどうすればよいですか?
うーん。うわさ話はやめてください。 。 jQueryのクローン作成メソッドは.clone()です。うーん。挿入メソッドと比較すると、コピー アンド ペーストと同等です。
デフォルトでは、.clone() メソッドは一致する要素だけでなく、そのすべての子孫要素もコピーします。
本には、このメソッドはパラメーターも受け入れると記載されており、パラメーター値が false の場合、その子要素ではなく、一致する要素のみがコピーされます。
しかし、私の実験ではそうではありませんでした。 。うーん。




コードをコピー


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

コンテンツがある DIV です

$('#but_clone').click(function(){
$('#xxx').clone(false).insertAfter($('#xxx')) ;
});

本には clone(false) はサブタグの内容をコピーしないと書かれていますが、私の実験ではサブタグの内容はコピーされます。 。これが 1 つの違いです。
さらに、この本には、 clone() は要素のイベントをコピーしないと記載されています。これは私がテストした後でも可能です。 。うーん。 。まだ奇妙です。 。良い。

jQuery オブジェクトを複数回参照する必要がある場合、最良の方法は変数に保存することです。
このように、jQuery の $() ファクトリー関数の呼び出しを減らすことで、DOM トラバーサルの速度を向上させることができます。 。
まあ、この章は単に記録されているだけです。本の例に基づいて皆さんに説明できていないので、少し残念です。それはこの本をコピーすることになります。
食べる必要があるので断続的に。したがって、このセクションを書くのに長い時間がかかりましたが、全体的な効果には非常に満足しています。ふふ。
さて、本からこの段落をコピーしてください。うーん。これは、
DOM 操作メソッドの簡単な概要です:
一致する各要素に新しい要素を挿入するには、次を使用します:
.append()
.appendTo()
.prepend()
.prependTo()
一致した各要素と同じ位置に新しい要素を挿入するには、次を使用します:
.after()
.insertAfter()
.before()
.insertBefore()
一致した各要素の外側に新しい要素を挿入するには、
.wrap()
一致した各要素を新しい要素またはテキストに置き換えるには、
を使用します。
.text()
ドキュメントから一致する各要素を削除するには、次のコマンドを使用します。
.empty()
一致する各要素とその子孫要素を実際に削除せずに削除するには、次のコマンドを使用します。
.remove()

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jQuery </title>