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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
深入浅出分析Python装饰器用法
2017/07/28 Python
Python异常的检测和处理方法
2018/10/26 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python图片合成的示例
2020/11/09 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
土木工程专业自荐信
2013/10/04 职场文书
军训心得体会
2013/12/31 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
公司授权委托书范文
2014/09/21 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
大学生入党自传2015
2015/06/26 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python