JQuery中DOM节点的操作与访问方法实例分析


Posted in jQuery onDecember 23, 2019

本文实例讲述了JQuery中DOM节点的操作与访问方法。分享给大家供大家参考,具体如下:

Jquery中DOM节点的操作

已有对象.append(要添加的对象) 作为最后一个子元素添加
要添加的对象.appendTo(已有对象)
prepend()/prependTo() 作为第一个子元素添加
已有元素.before(要添加的元素)/after() 在对象前面/后面添加新的元素,可用逗号分割添加多个元素  
要添加的元素.insertBefore(已有元素)/insertAfter()  
.empty() 删除元素所有子节点
.remove(“selector”) 删除自身整个元素,可以添加筛选参数
.detach() 删除节点,并将其保存在返回对象中,之后可以再次调用添加
.clone() 克隆节点结构,选填参数true后会同时克隆节点的事件
old.replaceWith(new) new.replaceAll(old) 用旧元素替换新的元素
.wrap(parent) 将每个元素包裹一个父元素
.unwrap() 去除外层包裹
.wrapAll() 将所有元素包裹一个父元素
.wrapInner() 将每个元素内部包裹一个子元素
//通过DOM方法创建2个div元素
var pdiv = document.createElement('div')
var cdiv = document.createElement("div");
//给2个div设置不同的属性
pdiv.setAttribute('class', 'right')
cdiv.className = 'child'
cdiv.innerHTML = "动态创建DIV元素节点";
//将cdiv作为第一个子元素添加到pdiv内
pdiv.appendChild(cdiv)
//绘制到页面body
var body = document.querySelector('body');
body.appendChild(pdiv)
//通过JQuery创建html元素 
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>");
$('body').append(div);
//删除整个 class=test1的div节点
$(".test1").empty()
//删除p标签中class为test3的结点
$("p").remove(".test3");
//通过detach在页面删除元素,但是这个节点还是保存在内存中
var p = $("p").detach()
//给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
//去除p的父层元素
$('p').unwrap();
//所有div增加一个内层元素
$('div').wrapInner('<p></p>')

JQuery结点访问

.children() 选中直接子节点,括号内可填选择器
.parent() 选中直接父节点,括号内可填选择器
.parents() 选中所有的祖先节点
.closest(selector) 向上查找最近的满足条件的祖辈元素
.find(selector) 选中所有满足条件的后代元素
.next() 选中紧邻下一个同辈节点,可选填选择器
.prev() 选中紧邻前一个同辈节点,括号内可选填
.siblings() 选中所有同辈元素,括号内参数可选
.add() 添加新的元素加入到选中集合
.each(function(index,element){this}) 对每个进行函数操作,提供三个参数

注:选择器返回多个结果的可以通过括号内的选择器进行筛选,例如$('.item-2').next(':first'),选中多个类名为item-2的下一个节点,但:first只筛选了第一个。若括号内不填选择器,则默认选中所有的结果。

//选中class=div的子代的最后一个元素,添加边框
$('.div').children(':last').css('border', '3px solid blue')
//选中class=item-2的兄弟元素的最后一个,添加边框
$('.item-2').siblings(':last').css('border', '2px solid blue')

例2、each的使用:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style>
 .left {
  width: auto;
  height: 150px;
 }
 .left div {
  width: 150px;
  height: 120px;
  padding: 5px;
  margin: 5px;
  float: left;
  background: #bbffaa;
  border: 1px solid #ccc;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
 <h2>each方法</h2>
 <div class="left first-div">
  <div class="div">
   <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
   </ul>
  </div>
  <div class="div">
   <ul>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
   </ul>
  </div>
 </div>
 <br/>
 <button>点击:each方法遍历元素</button>
 <button>点击:each方法回调判断</button>
 <script type="text/javascript">
 $("button:first").click(function() {
  //遍历所有的li
  //修改每个li内的字体颜色
  $("li").each(function(index, element) {
   $(this).css('color','red')
  })
 })
 $("button:last").click(function() {
  //遍历所有的li
  //修改偶数li内的字体颜色
  $("li").each(function(index, element) {
   if (index % 2) {//使用index参数
    $(this).css('color','blue')//this形参指的是正在遍历的节点
   }
  })
 })
 </script>
</body>
</html>

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
JQuery 入门实例1
2009/06/25 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
python logging类库使用例子
2014/11/22 Python
python列表操作实例
2015/01/14 Python
python实现简单购物商城
2016/05/21 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python学生管理系统学习笔记
2019/03/19 Python
python修改字典键(key)的方法
2019/08/05 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
餐饮商业计划书范文
2014/04/29 职场文书
中国梦团日活动总结
2014/07/07 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
优秀团支部申报材料
2014/12/26 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS