jquery之孩子节点

html页面:

<div id="div1"><div>a</div><div>b</div><div>c</div></div><button type="button">click me</button>

jquery代码操作:(jquery写法)

$(function(){    

$('button').click(function(){  

1、 $('#div1').children().remove();//删除所有

2、 var first = $('#div1').children();console.log(first); var first1 = $('#div1').children(':first');console.log(first1); $('#div1').children(':first').remove();

3、var first2 = $('#div1 div').first();console.log(first2);$('#div1 div').first().remove();

});});

解释:

1、找到id为div1下的所有子节点,然后全部进行删除;

2、先找到id为div1下的所有子节点,打印出来是否获取到了节点(console.log()方法可以输出对象,而alert()一般用来弹窗、字符串等)。然后通过伪类获取第一个节点。然后将伪类的第一个元素依次删除

3、first()函数:获取第一个元素,而不是获取子节点。一般这种情况下只用来获取第一个元素进行操作而不是类似这种依次删除的情况。或者进行<ul><li>a</li><li>b</li></ul>等操作。

上面的解释为获取id为div1下并且标签是div的第一个元素(第一个div)进行循环删除,这种情况下只能删除是div1下的div。

推荐阅读更多精彩内容

  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 701评论 0 2
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 1,825评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,444评论 2 17
  • 一、css() //css( )直接写属性名称是获取属性值,如果改多个属性值需要加{ },如果不加{ }可以单独修...
    空谷悠阅读 221评论 0 0
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,051评论 0 44