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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • JQuery替换DOM节点的方法

    本文实例讲述了JQuery替换DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll(). replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素. 本例 JQuery 代码: <script type="text/javascript"> //<![CDATA[ $(function(){ $("#btn_1"

  • JQuery复制DOM节点的方法

    本文实例讲述了JQuery复制DOM节点的方法.分享给大家供大家参考.具体分析如下: 复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的"选择"按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中.这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们"

  • JS/jQuery判断DOM节点是否存在的简单方法

    JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

  • JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问我们</p> <ul c

  • JQuery包裹DOM节点的方法

    本文实例讲述了JQuery包裹DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义. wrap() 复制代码 代码如下: $("#li_1").wrap("<strong></strong>"); 得到的结果如下: <strong> <li id="l

  • JQuery插入DOM节点的方法

    本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

  • JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问

  • jquery对dom节点的操作【推荐】

    1.JavaScript脚本放在哪里才好? 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载. 2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容. 3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行.所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中. 2.jquery的常用函数 如:children

  • JQuery遍历DOM节点的方法

    本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();

  • jQuery中DOM节点的删除方法总结（超全面）

    前言 相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题.下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧. 一.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍

随机推荐