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 ...
随机推荐
- Android自带样式
Android系统自带样式: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为对话框模式 android:the ...
- ** poj Y2K Accounting Bug 2586
Y2K Accounting Bug Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10117 Accepted: 50 ...
- Lua中的weak表——weak table（转）
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- android横竖屏控制
代码中设置activity屏幕为全屏,并设置横竖屏状态 getwindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowM ...
- hdu 1226 BFS + bfs记录路径
http://acm.hdu.edu.cn/showproblem.php? pid=1226 为了节省空间.您可以使用vis初始化数组初始化-1. 发现BFSeasy错了地方 始一直WA在这里:就是 ...
- 由<a href = "#" > 引发的思考
原文:由<a href = "#" > 引发的思考 前阵子在一个移动项目中,通过 <a href = "#" > 的方式 绑定clic ...
- Python调用微博API
上头叫通过微博ID获取用户公布过的历史微博内容,于是研究了下新浪微博提供的API 1 首先在微博开放中心下"创建应用"创建一个应用,应用信息那些随便填,填写完成后,不须要提交审核, ...
- Linux课程_系统配置和日常维护
1.设置命令输入提示格公式:"username:当前文件夹$" 2.设置命令输入提示行格式为:"当前系统时间-用户#"(提示:Shell将通过反引號" ...
- ProgressMonitorInputStream
Swing类包中有一个很有用的流过滤器,ProgressMonitorInputStream,它可以自动弹出一个对话框,监视已经读取了多少流. 进度监视器流使用InputStream类的availab ...
- JAVA学习笔记 -- 包资源文件jar包裹
初学者GUI,使用Eclipse出口jar包裹,不能显示最小化的图标集(hello.png根文件下的项目文件夹文件).码如下面: import javax.swing.JFrame; import j ...