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 ...
随机推荐
- Atitit. 拉开拉链zip文件 最佳实践实施 java c# .net php
Atitit. 拉开拉链zip文件 的实现最佳实践 java c# .net php 1. Jdk zip 跟apache ant zip 1 2. Apache Ant包进行ZIP文件压缩,upzi ...
- openocd 如何支持FreeRTOS 8.1.2
沉寂了数年,认为我们应该分享一下.前段时间通过FreeRTOS做点什么,大家纷纷拿出来拍砖. 我应该说,Linux现在粉丝.所以,我的业余时间来分享它通常应用的经验Linux作为桌面开发平台.无需再费 ...
- Windows无法启动OracleOraDb10g_home1TNSListener维修,1错误067
Oracle服务无法启动,据报:Windows无法启动OracleOraDb10g_home1TNSListener维修,错误 1067:这个过程意外终止. 在网上找了好久也没弄好.说什么环境变量的又 ...
- HTML5 CSS3 精美案例 ： 达到VCD盒个性幻灯片
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns教师,行~ 行.这一次分享发夹CSS3 ...
- Android Tween Animation
View Animation, 它显示在view向上Tween Animation Tween动画.本质上没有变化View对象本身.只要改变它绘制 实施方式有两种.一个xml定义,直接在代码中的定义 ...
- 高速压缩跟踪（fast compressive tracking）（CT）算法分析
本文为原创,转载请注明出处:http://blog.csdn.net/autocyz/article/details/44490009 Fast Compressive Tracking (高速压缩跟 ...
- 16.怎样自学Struts2之Struts2异常处理[视频]
16.怎样自学Struts2之Struts2异常处理[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了,仅仅好传到百度云上: http://pa ...
- 完美世界3D格斗手游[格斗宝贝]今日公測
狗刨学习网报道 / 经过近两年井喷式的发展,国内手游市场洗牌的信号愈加强烈.用户体验的提升.以及对产品核心品质的要求.促进了手游的精品化.而白热化的市场竞争,也催生了各大厂商在细分市场的抢滩.当中.更 ...
- combobox自己主动提示组件加入无选中项清空功能
这个标题非常绕口,只是这也是想了半天的成果,对不起体育老师了. 标题想表达的是:之前讲过的用combobox实现自己主动提示组件.只是如今规定该组件不能够保存data中不存在的数据. 最初的想法是通过 ...
- 初学者应学会如何加快seo
新手学习如何加快seo 介绍: 应该如何初学者学习SEO,前弯路.真正的高手SEO知识. 作为一个新人,学习如何加快seo知识吧? 多人天天都在学习seo知识.看别人的文章.看多了就感觉 ...