先介绍几个比较简单的方法，不经常用到，做个记录

1. filter() 方法

顾名思义，filter是一个过滤器，如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

 <!DOCTYPE html>

 <html>

 <head>

   <style>

   div { width:60px; height:60px;

         margin:5px; float:left;

         border:2px white solid; }

   </style>

   <script type="text/javascript" src="/jquery/jquery.js"></script>

 </head>

 <body>

   <div></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div class="middle"></div>

   <div></div>

 <script>

   $("div").css("background", "#c8ebcc")

     .filter(".middle")

     .css("border-color", "red");

 </script>

 </body>

 </html>

效果：

2.contents() 方法

contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。

.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。

3.andSelf()方法

官方没有很详细的解释，顾名思义，就是加上自己的意思,看例子：

 <!DOCTYPE html>

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <style>

   p, div { margin:5px; padding:5px; }

   .border { border: 2px solid red; }

   .background { background:yellow; }

 </style>

 </head>

 <body>

   <div>

     <p>First Paragraph</p>

     <p>Second Paragraph</p>

   </div>

 <script>

     $("div").find("p").andSelf().addClass("border");

     $("div").find("p").addClass("background");

 </script>

 </body>

 </html>

效果：

找到所有 div，以及其中的所有段落，并为它们添加两个类名。请注意，由于未使用 .andSelf()，div 没有黄色背景色。也就是说，把andSelf() 去掉的话，div是没有红色边框的。

4.end() 方法

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

 <!DOCTYPE html>

 <html>

 <head>

   <style>p { margin:10px; padding:10px; }</style>

   <script type="text/javascript" src="/jquery/jquery.js"></script>

 </head>

 <body>

   <p><span>Hello</span>, how are you?</p>

   <script>$("p").find("span").end().css("border", "2px red solid");</script>

 </body>

 </html>

效果：

5.warp() 方法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

语法

$(selector).wrap(wrapper)
参数 描述
wrapper

必需。规定包裹被选元素的内容。

可能的值:

  • HTML 代码 - 比如 ("<div></div>")
  • 新元素 - 比如 (document.createElement("div"))
  • 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

 
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").wrap(function(){

       return "<div></div>"

     });

   });

 });

 </script>

 <style type="text/css">

 div{background-color:yellow;padding:10px;}

 </style>

 </head>

 <body>

 <p>这是一个段落。</p>

 <button>用 div 元素来包围 p 元素</button>

 </body>

 </html>

效果大家自己试一下哦，比较简单。

暂时先总结这么多，以后遇到再继续完善。

jquery中DOM的操作方法的更多相关文章

  1. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  2. [置顶] Jquery中DOM操作（详细）

    Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...

  3. jQuery中DOM操作

    1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类:      1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...

  4. JQuery中DOM操作(一)

    节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...

  5. jQuery笔记（二）jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  6. JQuery中DOM事件合成用法

    jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...

  7. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  8. 第75天：jQuery中DOM操作

    一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...

  9. jquery中$(dom).each()和$(dom).length的使用

    1.$(dom).each();在dom处理上用的比较多. $(selector).each(function(index,element){ //selector会遍历当前页面里所有匹配的jquer ...

随机推荐

  1. JDK源码学习系列01----String

                                                     JDK源码学习系列01----String 写在最前面: 这是我JDK源码学习系列的第一篇博文,我知道 ...

  2. css--左右visibility建立 “collapse”值问题

    1.您可能已使用visibility一千次,最常用的是visible和hidden.它用来显示或隐藏元素. 有第三很少已使用的值它是collapse,在表格的行,列中使用有差异外,他和hidden的作 ...

  3. CareerCup chapter 1 Arrays and Strings

    1.Implement an algorithm to determine if a string has all unique characters What if you can not use ...

  4. 使用HTML5 Canvas做些什么

    百分比圆环进度条   // ----------------------------------------------------------- 柱状排行榜统计图   // ------------ ...

  5. WPF技术触屏上的应用系列（六）: 视觉冲击、超炫系统主界面、系统入口效果实现

    原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...

  6. MVC Code First (代码优先)

    首先配置web.config <connectionStrings> <add name="BookDbContext" connectionString=&qu ...

  7. UVA 1291 Dance Dance Revolution(DP)

    意甲冠军:跳舞机有一个上5积分,分别central, top, bottom, left, right分,区区足站立还是需要1点物理,从一个单纯的脚central点上须要2点体力,从一个点上移动到相邻 ...

  8. Django架设blog步骤（转）

    最近在研究Python,起初是因为想做个爬虫,昨天看了点基础教程,台湾辅仁大学的视频,了解了python的语法规范及语言特性,主要有三: 1.动态脚本语言: 2.语法简洁,强制缩进: 3.应用广泛,w ...

  9. javascript倒置再次被否定作用

    于javascript位反然后可以转换为浮点塑料,而不是更有效parseInt近两倍 var start = new Date().getTime(); for (var i = 0; i < ...

  10. PL/SQL Developer ORA-12154: TNS: 无法解析指定的连接标识符

    底:         在这台机器(Win7 64位置  最后)设备Oracle 11g的client(已安装32位ORACLEclient.假设安装64位ORACLEclient的时候,在CMD命令中 ...