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实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现消息弹出框效果
Dec 10 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
咖啡与牛奶
2021/03/03 冲泡冲煮
apache rewrite_module模块使用教程
2008/01/10 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php-msf源码详解
2017/12/25 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python遍历小写英文字母的方法
2019/01/02 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
2013年高中生自我评价
2013/10/23 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
农民致富事迹材料
2014/01/23 职场文书
《学会合作》教学反思
2014/04/12 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python