jQuery添加删除DOM元素

Posted 2020-09-19

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