[jQuery]:jQuery的DOM元素操作方法

jQuery的DOM操作:创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查,只不过在原生JS基础上进行封装和增加了许多方法,所以能够更方便的操作DOM。

获取元素节点

       jQuery获取DOM元素是使用选择器,至于选择器的使用这里就不介绍了,请戳jQuery选择器总结。 如果有时候为了提高运行效率,可以先用原生JS获取元素节点,之后再转成jQuery对象进行操作也是可行的。


创建DOM节点

        jQuery创建DOM节点是通过传入一个HTML格式字符串给构造函数,jQuery会返回包含该元素的jQuery对象。 传入的HTML格式需带有闭合标签或完整标签名。 这种创建节点形式是动态创建的,也可以将别的jQuery对象传入进来,相当于克隆。

      $("<div/>")   //无子元素或文本内容,写成闭合标签
      
      $("<div></div>") //完整格式,可嵌套子元素或文本

      //不加斜杠非闭合标签,会被解析成如下方式 
      $("<div>")  == $( document.createElement("div") )
      $("div")  //直接写元素名,相当于元素选择器,无效...

      
      $("<p>我是段落</p>")  //HTML内容,嵌套文本
     
      $("<p></p>").text("传入字符串内容");  //灵活一点,动态设置文本

      //方法连写
      $("<div><ul><li></li></ul></div>")
      .appendTo($('body'))  //添加进body元素中,这里返回的依然是原jQuery对象。
      .find("li").text("OK"); //后代元素中找<li>元素,设置它们的文本内容


jQuery创建节点支持HTML内容,所以无需创建多个元素节点。在上面实例中,还使用了jQuery方法的连写方式:链式操作方式。

链式操作方式

对发生在同一个jQuery对象上的一组动作,可以直接连接而无须重复获取对象。
      //链式操作
      $("div p").text("一段话").css("color", "red");
      $("div").append( $("<button>按钮</button>").css("color", "red") );
如果写多了就会明白,当方法返回某个值时,链式操作是没办法进行的,例如调用 text()、html()和val()方法,后续不能链式操作。个人简单理解:因为方法存在返回值,当返回的非jQuery对象时,后续自然无法调用jQuery方法,也就无法继续链式操作。


添加节点

  • append() :   给选取元素的内部尾部添加内容(元素、innerHTML、文本)。
  • prepend(): 给选取元素的内部开头处添加内容(元素、innerHTML、文本)。
  • appendTo() : 把选取元素添加到指定DOM元素内部的结尾处,和上面appen
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值