jQuery添加刪除DOM元素，選擇節點

1.添加DOM元素  append   prepend   before  after

//append 添加在同級元素的之前  實例：

<div class="header"><p>添加節點在同級元素之后</p></div>

var pageup = '<strong>append 在同級元素之后</strong><br>';
         $('.header').on('click',function(){
         $(this).append(pageup);
});

//prepend 添加在同級元素的之后 實例：

<div class="section"><p>添加節點元素在同級之前</p></div>

var pagedown = '<strong>prepend 在同級元素之前</strong><br>'
         $('.section').on('click',function(){
         $(this).prepend(pagedown);
});

//before 在被選擇的元素的前面添加節點

var home = '<p>before 添加在指定元素之前</p>';

$('.footer').on('click',function(){
        $('.footer>strong').before(home);
});

 

//after 在被選擇的元素的后面添加節點

var end = '<p>after 添加在指定元素之后</p>'
         $('.aside').on('click',function(){
          $('.aside>strong').after(end);
});

 

2.刪除DOM元素 remove（刪除）   empty（清空）

//使用remove來刪除節點

$('.top').on('click',function(){
     $(this).remove();
});

//使用empty清空節點

<div class="bottom">
   　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
</div>

$('.bottom').on('click',function(){
　　　$(this).empty();
});

 

 

3.節點的選擇

//chilren 選取所有子節點
//parent 選取父節點
//next 下一個節點 nextAll選取所有之后的元素
//prev 上一個節點 prevAll選取所有之前的元素
//siblings 篩選出所有同輩節點，除了當前的選中的節點

//closest 快速選取父節點

//制作的二級菜單

<ul class="list">
 　　<li>
　　　　<a href="javascript:;">菜單1</a>
　　　　　<nav>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　</nav>
　　</li>
　　<li>
　　　　<a href="javascript:;">菜單2</a>
　　　　<nav>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　</nav>
　　</li>
　　<li>
　　　　<a href="javascript:;">菜單3</a>
　　　　<nav>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　</nav>
　　</li>
</ul>

 

var ListA = $('ul.list>li>a');
ListA.next().hide();
ListA.on('click',function(){
// $(this).next().slideDown(1000).parent().siblings().children().next().slideUp(1000);
        $(this).next().show().parent().siblings().children().next().hide();
});
　　$('ul.list>li').on('blur',function(){
     　　 ListA.next().hide();
     　　 console.log('失去焦點');
　　});
})