jquery中DOM的操作方法
先介绍几个比较简单的方法，不经常用到，做个记录
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>
<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的操作方法的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- [置顶] Jquery中DOM操作（详细）
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- JQuery中DOM操作(一)
节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...
- jQuery笔记（二）jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- JQuery中DOM事件合成用法
jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- 第75天：jQuery中DOM操作
一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...
- jquery中$(dom).each()和$(dom).length的使用
1.$(dom).each();在dom处理上用的比较多. $(selector).each(function(index,element){ //selector会遍历当前页面里所有匹配的jquer ...
随机推荐
- hdu 神、上帝以及老天爷
HDU 2006'10 ACM contest的颁奖晚会隆重开始了! 为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这样的: 首先,所有参加晚会的人员都将一张写有自己 ...
- 【C++探索之旅】第一部分第三课：第一个C++程序
内容简介 1.第一部分第三课:第一个C++程序 2.第一部分第四课预告:内存的使用 第一个C++程序 经过上两课之后,我们已经知道了什么是编程,编程的语言,编程的必要软件,C++是什么,我们也安装了适 ...
- mysql_install_db出错，Unable to lock /usr/local/mysql/var/ibdata1, error: 11
今天,在一台旧机器上编译一个新的Mysql,install时出了错: /usr/local/mysql_5615/scripts/mysql_install_db --user=mysql --bas ...
- ZOJ 3820 Building Fire Stations
题意: 树上找两个点 使得其它点到这两点随意一点的距离的最大值最小 思路: 最大值最小 想到二分 在二分的基础上判定这个最大值是否可能 怎样判定这个问题就是怎样选那两个点的问题 非常明显 我 ...
- 第四-generation音频：互联网智能声音会火
我把声音分成四个年龄:传统的立体声插头线-蓝牙音响-wifi发出声音-智能声音. 传统的立体声插头线:传统的声音,您必须使用电缆和其他输入源.这样的声音是现在市场上最流行的音频上. 蓝牙音响:蓝牙无线 ...
- 思维导图（自己整理，希望对大家有用）：JavaScript函数+canvas绘图+Array数组
1.javascript函数: 2.Array数组: 3.canvas绘图:
- How use Instruments and display the console in Command Lines applications
I'm using Xcode on OSX to develop command line C applications. I would also like to use Instruments ...
- atcoder它A Mountaineer
Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB Problem Dave is a mountaineer. He is ...
- MySql分析算法作品索引（马上，只是说说而已B-tree）
刚开始学习的时候,百度搜索.但我发现很难理解了很多的太复杂,各种物品的整合总结(建议可能看到的文字,我不明白也没关系,再看看操作步骤图,然后结合文,所以,一切都清楚了很多) B-tree.B这是bal ...
- Team Foundation Server 2015使用教程--默认团队成员连接tfs及checkin操作