jquery domの学習

jquery对dom的操作是很重要的，在网站中需要用到jquery的地方最多的也就是对dom的操作了，所以学好jquery对dom的操作是多么重要的事。

append()：向每个匹配的元素内部追加内容
prepend()：向每个匹配的元素内部前置内容
appendTo()：把所有匹配的元素追加到另一个指定元素的集合中
prependTo()：把所有匹配的元素前置到另一个指定的元素集合中

.after(content) ：在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before(content)： 在匹配元素前面插入指定内容
insertAfter()：将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore()：将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

empty() ：顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
remove() ：remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
detach()：通过detach方法删除元素,只是页面不可见，但是这个节点还是保存在内存中,数据与事件都不会丢失
.clone()方法：深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target )：用集合的匹配元素替换每个目标元素
.wrap(wrappingElement)： 在集合中匹配的每个元素周围包裹一个HTML结构，$('p').wrap('dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68')
.unwrap(): はwrapメソッドの逆です。一致する要素のセットの親要素を削除し、それ自体 (存在する場合は兄弟要素も) を保持し、元の位置に戻します
.wrapAll(): セット内の一致する要素に外側のラップ HTML 構造を追加します
wrapInner(): コレクション内の一致する要素の内部にラップされた HTML 構造を追加します

children() メソッド: 一致する要素セット内の各要素のすべての子要素を返します
.find( ) メソッド:
method ind は、現在の要素セット内の各要素の子孫を反復処理します。条件を満たしていれば息子でも孫でも関係ありません。
他のツリー トラバーサル メソッドとは異なり、セレクター expression は .find() の必須パラメーターです。すべての子孫要素を取得する必要がある場合は、ワイルドカード セレクター '*' を渡すことができます。
find は子孫のみを検索し、それ自体は含まれません。
セレクター コンテキストは .find() メソッドによって実装されるため、$('.item-ii').find('li') は $('li', '.item-ii')(find と同等です) li タグはクラス名 item-ii) のタグの下にあります。
parent は親 class.parent() を検索します

parents() メソッド: closest() メソッド Closest() メソッドは要素に一致するセレクターを受け入れます String 要素自体から開始して DOM ツリーを上に移動しますステップバイステップ 上位要素が一致し、最初に一致した祖先要素が返されます

例: div 要素で、すべての li 要素を上方向に検索する場合は次のように表現できます

$("div").closet("li')

next() メソッド次の兄弟要素を検索します

$("li.item-2").css("border","3px solid red");

prev() メソッド前の兄弟要素を検索

$("li.item-2").prev().css("border","3px solid red");

siblings() メソッド兄弟要素を検索

$(".item-2").siblings().css("border","3px solid red");

add() メソッド

$('li').add('p')

each() メソッド

$("ul li").each(function(index, element) {  
     index 索引 0,1  
     element是对应的li节点 li,li  
     this 指向的是li  
})

上jquery dom が学ぶことは以上です。皆さんのお役に立てれば幸いです。

関連する推奨事項:

jQueryは、指定されたdivにHTMLページをロードします

jQueryは、クリックとマウスの感知イベントを実装します

Jqueryは、Clickイベントを新しく挿入されたノードにバインドします 効果のない解決策

以上がjquery domの学習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。