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中的deferred对象和extend方法详解
May 08 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php-msf源码详解
2017/12/25 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
js实现轮播图特效
2020/05/28 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python+opencv识别图片中的圆形
2020/03/25 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python如何进入交互模式
2020/07/06 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
颁奖晚会主持词
2014/03/25 职场文书
学生偷窃检讨书
2014/09/25 职场文书
导游词欢迎词
2015/02/02 职场文书
工程资料员岗位职责
2015/04/13 职场文书
初中体育课教学反思
2016/02/16 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers