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 快速选取父节点

//制作的二级菜单

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(\'失去焦点\');
　　});
})