前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery(操作Dom-节点操作①)

jQuery(操作Dom-节点操作①)

作者头像
全栈开发日记
发布2022-05-12 20:58:29
1.4K0
发布2022-05-12 20:58:29
举报
文章被收录于专栏:全栈开发日记全栈开发日记

目录

创建节点 节点插入 节点删除 节点替换 节点复制

创建节点

代码语言:javascript
复制
document.createElement("li");
//js创建li节点
var $li=$("<li></li>");
//jQuery创建li节点

节点元素插入

内部插入(父子节点关系)

js对象.appendChild:在内部添加节点

代码语言:javascript
复制
var o=document.createElement("li");
//创建节点
选中的js对象.appendChild(创建的节点);
//js在内部插入节点
  • 在内部最后一个元素后插入节点

selector.append(节点对象):在selector元素内部的最后插入"节点对象"

代码语言:javascript
复制
function append(){
  var $li=$("<li>6</li>");
  $("ul").append($li);
}

节点对象.appendTo(selector):将"节点对象"插入到selector内部的最后

代码语言:javascript
复制
function append2(){
  var $li=$("<li>6</li>");
  $li.appendTo($("ul"));
}
  • 在内部第一个元素前插入节点

selector.prepend(节点对象):在selector的内部的第一个元素之前插入"节点对象"

代码语言:javascript
复制
function prepend1(){
  var $li=$("<li>0</li>");
  $("ul").prepend($li);
}
  • 节点对象.prependTo(selector):将"节点对象"插入到selector1内部的第一个
代码语言:javascript
复制
function prepend2(){
  var $li = $("<li>0</li>");
  $li.prependTo($("ul"));
}

外部插入(同辈或相邻节点)

  • 在指定节点后面插入节点

selector.after(节点对象):在selector1后插入"节点对象"

代码语言:javascript
复制
function after(){
  var $div = $("<div>ul后的div</div>");
  $("ul").after($div);
}

节点对象.insertAfter(selector):将"节点对象"插入到selector1后面

代码语言:javascript
复制
function after(){
var $div = $("<div>ul后的div</div>");
$div.insertAfter($("ul"));
}
  • 在指定节点前面插入节点

selector.befor(节点对象):在selector前面插入"节点对象"

代码语言:javascript
复制
function before1(){
  var $div = $("<div>ul之前...</div>");
  $("ul").before($div);
}

节点对象.insertBefore(selector):将"节点对象"插入到selector前面

代码语言:javascript
复制
function before2(){
  var $div = $("<div>ul之前...</div>");
  $div.insertBefore($("ul"));
}

节点删除

  • remove():从DOM中删除所有匹配的元素
代码语言:javascript
复制
function remove(){
  var $p = $("p").remove();
  $("ul").before($p);
}

注意:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除 了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

  • empty():删除匹配的元素集合中所有的子节点
代码语言:javascript
复制
function empty(){
  $("ul").empty();
}
  • detach():从DOM中删除所有匹配的元素
代码语言:javascript
复制
function detach(){
  var $p = $("p").detach();
  $("ul").before($p);
}

注意:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与 remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

节点的替换

  • selector1.replaceWith(selector2):将所有匹配的元素替换成selector元素
代码语言:javascript
复制
function replace(){
  var $div = $("<div>我要去替换p</div>");
  $("p").replaceWith($div);
}
  • selector2.replaceAll(selector):用匹配的元素(selector2)替换掉所有selector匹配到的元素
代码语言:javascript
复制
function replaceall(){
  var $div = $("<div>我要去替换p</div>");
  $div.replaceAll($("p"));
}

节点的复制

  • selector.clone(true|false):复制当前节点,参数为true时,表示复制节点包含节点的事件,false 表示不包含事件
代码语言:javascript
复制
function clone1(){
  var $p = $("p").clone(false);
  $("ul").before($p);
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档