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

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. Reveal：分析iOS UI该武器

    Reveal是分析iOS应用UI的利器: Reveal可以在执行时调试和改动iOS应用程序.它能连接到应用程序,并同意开发人员编辑各种用户界面參数.这反过来会马上反应在程序的UI上.就像用FireBu ...

  2. 查看SQLSERVER内部数据页面的小插件Internals Viewer

    原文:查看SQLSERVER内部数据页面的小插件Internals Viewer 查看SQLSERVER内部数据页面的小插件Internals Viewer 感觉internals viewer这个名 ...

  3. Windows10微软在线账户与本地账户的切换方法

    Win10里面存在着两个账户,除了本地账户外,还有着一个微软在线账户,这个账户可以同步设置.日历等数据.不过对于大部分用户来说,本地账户已经足够我们使用了,那么这两个账户之间该如何切换呢? Win10 ...

  4. HDU2516-取石子游戏

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  5. smark和openfire即时通信代码

    从:http://blog.csdn.net/casuallc/article/details/34794501 server:openfire client计划:smark写 首先安装openfir ...

  6. OpenCV——Delaunay三角 [转载]

    从这个博客转载 http://blog.csdn.net/raby_gyl/article/details/17409717 请其它同学转载时注明原始文章的出处! Delaunay三角剖分是1934年 ...

  7. 图片切割工具---产生多个div切割图片 采用for和一的二维阵列设置背景位置

    照片库 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb21vZ2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  8. ext Window点击右上角的关闭（Xbutton）加入监控事件

    使用场景:关闭window的时候添加监听事件. 正确的使用方式: addwin = new Ext.Window({ title : '新增', closable : true, width : 50 ...

  9. 有关XCode6（iOS8）UITableViewCell与iOS7在UITableViewCell问题

    简而言之: iOS6在cell的层次关系2层,但在iOS7层次结构成为3层,但在iOS8的SDK在UITableViewCell层次结构发生了变化2层. 如果它们是UITableViewCell加入到 ...

  10. Node.js和PHP运行机制对比

    为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么注定它 ...