jquery 돔 학습

韦小宝원래의: 2017-12-04 09:13:461599검색

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() 메서드:
메소드 ind는 현재 요소 집합에 있는 각 요소의 자손을 반복합니다. 요건을 충족하기만 하면 아들이든 손자이든 상관없습니다.
다른 트리 순회 방법과 달리 선택기 expression은 .find()의 필수 매개변수입니다. 모든 하위 요소를 검색해야 하는 경우 와일드카드 선택기 '*'를 전달할 수 있습니다.
자기 자신을 포함하지 않고 하위 항목 간의 순회만 찾습니다.
선택기 컨텍스트는 .find() 메서드로 구현됩니다. 따라서 $('.item-ii').find('li')는 $('li', '.item-ii')(find와 동일합니다. 클래스 이름이 item-ii인 태그 아래의 li 태그).
parent는 상위 클래스를 찾습니다.parent()

parents() 메서드: closest() 메서드 close() 메서드는 요소와 일치하는 선택기를 허용합니다. String요소 자체에서 시작하여 DOM 트리 위로 이동합니다. 단계별 상위 요소는 일치하는 첫 번째 조상 요소와 일치하고 반환합니다.

예: div 요소에서 위쪽의 모든 li 요소를 찾으려면 다음과 같이 표현할 수 있습니다.

$("div").closet("li&#39;)

next() 메서드다음 형제 찾기 Element

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

re 이전 () 메소드를 찾는 이전 형제 자매 요소를 찾아냅니다. 위 내용은 jquery dom이 배우는 내용입니다. 그게 전부입니다. 모든 사람에게 도움이 되기를 바랍니다!

jquery 돔 학습

관련 기사