JQuery of DOM

JQuery of DOM

第一章:创建节点

#### 1.创建元素节点

$body = $('body');              //获取body
$('<div></div>')                //创建div元素节点

2.创建文本节点

与创建元素节点一样,可以直接把文本内容一并写上

$('<div>我是新创建的元素节点</div>')      //创建有文本内容的元素节点

3.创建属性节点

与创建元素节点一样

$('<div id="son" class = "father"></div>        //创建带有类名和id的元素节点

例:点击body 创建带有class 和 id 的div

$body = $('body');
$body.click(function(){
  var div = $('<div id="son" class="father">新建</div>');
  $body.append(div);
})

第二章.添加元素节点

1.父子之间添加至元素节点

选择器	功能
append(content)	向每个匹配的元素内部追加内容
appendTo(content)	把所匹配的元素从开始的位置移到另一个元素里

注:$(A).append(B)是把B添加到A中,并且是作为最后一个子元素

​ $(A).appendTo(B)是把A追加到B中,也是作为最后一个子元素

选择器	描述
prepend( )	向每个匹配的元素内前置内容
prependTo( )	把所有匹配的元素前置到另一个指定的元素集合中

注:$(A).prepend(B)是把B添加到A中,并且是作为第一个子元素

​ $(A).prependTo(B)是把A追加到B中,也是作为第一个子元素

2.兄弟之间插入元素节点

​

选择器	作用
.after(content)	在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before(content)	据参数设定,在匹配元素的前面插入内容

注:

1.都是用来对相对选中元素外部增加相邻的兄弟节点

2.都可以接收 HTML字符串,DOM元素,元素数组,JQuery对象

3.都支持多个参数传递,如:after(div1,div2...)

例1:
在class 名为test的元素后面插入p标签
$('.test').after('<p style="color:red>新插入的p标签</p>');

选择器	作用
insertBefore	在目标元素前面插入集合中每个匹配的元素
insertAfter	在目标元素后面插入集合中每个匹配的元素

例1:
将p标签插入class名为test的元素后面
$('<p style="color:red>新插入的p标签</p>').insetBefore($(".test"));

3.添加DOM包裹

1.wrap( )

wrap(wrappingElement) 或者 wrap(funciton)

在集合中匹配的每个元素周围包裹一个HTML结构

例1: 写法一
<p>p元素1</p>
<p>p元素2</p>

$('p').wrap('<div></div>')              //给每个p标签都添加一个父元素div包裹层

<div>
    <p>p元素1</p>
</div>
<div>
    <p>p元素2</p>
</div>

例2: 写法二
<p>p元素</p>
        
$('p').wrap(function(){             //给p标签添加一个父元素div包裹层,写法不同
    return '<div></div>';
})              

<div>
    <p>p元素</p>                  //效果相同
</div>

2. wrapAll( )

wrapAll(wrappingElement) 或者 wrapAll(funciton)

给集合中匹配的元素,他们的总体添加一个外面包裹HTML结构

如匹配到的p元素在不同的父级元素中,则会把所有的p标签都提出来并添加到匹配的第一个P元素的父级中

<p>p标签1</p>
<p>p标签2</p>

$('p').wrapAll('<div></div>')    给匹配到的所有p标签都添加一个共同的父级元素

<div>
 <p>p标签1</p>
 <p>p标签2</p>
</div>

3.wrapInner( )

wrapInner(wrappingElement) 或者 wrapInner(funciton)

给匹配到的所有元素的内部添加一个包裹层

例1:
<div>p元素</div>
<div>p元素</div>

$('div').wrapInner('<p></p>')

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注:若要删除包裹层请参照第三章的删除DOM包裹 unwrap( )

4.$( )集合对象中添加元素

1. add( )

$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？

jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

例1:
如在$('li')这个以及确定的集合对象中再添加p元素
<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
$('li').add('p');

第三章:删除元素节点

1. empty( )

移除了指定元素中的所有子节点

不仅移除了子元素(和其他后代元素),同样移除元素里的文本

例1:
<div class = "father"><p>王先生</p></div>
//使用empty() 
$('.father').empty()
//输出:
<div class = "father></div>

2. remove( )

移除元素自身包过元素内部的一切以及绑定的事件及与该元素相关的jQuery数据

例1:
$('button:first').on('click',funciton(){
  $('.test').remove();                          //点击第一个按钮,移除class名为test的元素
})
$('button:last').on('click',function(){
  $('p').filter("contains('3')").remove();      //点击第二个按钮,移除内容中有3的p标签
})

3. detach( )

会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

例1:
$('p').on('click',funciton(e){
    alert(e.target.innerHTML);      //将点击的那个p的内容弹出;
})

$('button:first').on('click',function(){
  if(!$('p').lenght) return;        //去重                
  //通过detach方法删除元素
  //只是页面不可见，但是这个节点还是保存在内存中
  //数据与事件都不会丢失
  p = $('p').datech();
})
$('button:last').on('click',function(){
  $('body').append(p);                      //把p添加到body中,证明事件还是存在的.
})

4.删除DOM包裹

.unwrap( )

作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

例1:
<div>
    <p>p元素</p>
</div>

$('p').unwrap();            //找到p元素,并调用unwrap() 方法,只删除父辈div

<p>p元素</p>

第四章: 元素节点替换

1. replaceWith(newContent)

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

target.replaceWith(newContent);

例1:
<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')   //将第二个p标签替换

2.replaceAll(target);

与replaceWith( ) 功能相似,但目标和源相反

newContent.replaceAll(target);

例1改:
$('<a style="color:red">替换第二段的内容</a>').replaceAll("p:eq(1)");

第五章:元素遍历

1. .children( )

jQuery是一个合集对象，所以通过children是匹配合集中每一个元素的所有第一级子元素(即仅父子关系)

例1:
$("#right-well").children().css("color","orange");      //匹配id为right-well下的所有子元素

例2:
class名为father的3个div 
<div class = "father">
    <p>p标签</p>
</div>
<div class = "father">
    <p>p标签</p>
</div>
<div class = "father">
    <p>p标签</p>
    <span>span标签</span>
</div>
$('father').children().css('color','red')               //所有的p标签以及span标签都会被匹配改变颜色

children(.selected)内还可以传参

如例2中,若在最后一步的children()中加入参数

$('father').children(':last').css('color','red')        //则只匹配到了所有集合中的最后一个元素,即只有span标签会变色

2. .find( )

通过find( )是匹配合集中每一个元素的所有的后代元素(即所有的儿子,孙子元素)

参数:必需. target.find("*") 所有的后代元素

​ target.find("HTML标签名") target中的所有HTML标签名的元素

​ target.find("HTML标签名:selected") target中的所有HTML标签名的并符合selected的元素;

例:

$('.father').find(*);                   class名为father的所有元素的所有后代元素
$('.father').find('li')                 class名为father的所有元素的所有li标签
$('.father').find('li:last')            class名为father的所有元素的最后一个li标签

3. .each( )

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。

每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)

注:

each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素,若不用到俩个参数index,element,可不用写
each回调方法中的this指向当前迭代的dom元素

例1:                 遍历.father下所有的li元素,给其添加样式    
$('.father').children('li').each(function(index,element){   //对所有的.father的子级为li的元素遍历
  $(this).on('mouseover',function(){                        //给所有li添加mouseover事件
    $(this).css('background','red');
  });
  $(this).on('mouseout',function(){                         //给所有li添加mouseout事件
    $(this).css('background','');
  });
});

例2:                 给所有偶数项的li元素添加样式
$('.father').children('li').each(function(index,element){   //对所有的.father的子级为li的元素遍历
  $(this).on('mouseover',function(){                        //给所有li添加mouseover事件
   if(index%2){                                             //再次index从0开始,所以index为奇数实际是li项数里的偶数         
      $(this).css('background','red');
   }
  });
});  

3.查找父级元素

方法名	参数	起始位置	遍历目标	返回值
parent( )	可选selected	父元素	父级元素	包含零个或一个或多个元素的jquery对象
parents( )	可选selected	父元素到文档根元素	所有父级,祖父级元素	包含零个或一个或多个元素的jquery对象
closest( )	可选selected	指定的目标	所有父级,祖父级元素	包含零个或一个元素的jquery对象,

1.parent( )

某个元素的父元素

参数,可选 target.parent() 匹配target集合中的所有元素的父元素

​ target.parent("selected") 匹配target集合中的所有元素的并满足selected要求的父元素

 $("#target1").parent().css("background-color","red");              //匹配id为target1的父元素

 $(".target1").parent(":last").css("background-color","red");       //匹配所有class名为target1的父级元素集合中的最后一个

2.parents( )

.parents( ) 方法,匹配的是所有元素的祖辈元素,查找模式从里向外,包括body html document

3.closest( )

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

若( )内无参数,则返回document(整个文档)

例：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')

4.查找兄弟元素

1.next( )

取得一个包含匹配的元素集合中每一个元素紧邻的下一个同辈元素的元素集合

$('li.test').next().css('border','1px solid red');      //设置class名为test的li的下一个兄弟元素

2.prev( )

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

3.siblings( )

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

$("button:first").click(function() {
    $('li.item-2').siblings().css('border','1px solid red');            //选取class名为item-2 的所有兄弟元素,不包裹它自身    
})