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 ...
随机推荐
- Maven学习笔记(三) ：Maven使用入门
编写POM: Maven项目的核心是pom.xml.POM(Project Object Model,项目对象模型)定义了项目的基本信息,用于描写叙述项目怎样构建,声明项目依赖,等等. ...
- 【Web探索之旅】第四部分：Web程序员
内容简介 1.第四部分第一课:什么是Web程序员? 2.第四部分第二课:如何成为Web程序员? 3.第四部分第三课:成为优秀Web程序员的秘诀 第四部分:Web程序员(完结篇) 大家好.终于来到了[W ...
- JavaScript对象(来自百度知道)
JavaScript中对象的创建有以下几种方式: (1)使用内置对象(2)使用JSON符号(3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种:1,JavaScript ...
- 构造NFS
一.设备nfs-utils 伺服器: [root@server05 ftp]# yum install nfs-utils 这时会自己主动安装rpcbind需将此服务重新启动nfs服务才干启动 cli ...
- ASP.NET自定义控件组件开发 第一章 第三篇
原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...
- Bug记录：微博的Java SDK返回经纬度错误
现象:美国的坐标点可能会定位到西藏地区-后发现原来负经度经解析后,均变成正的! 源码: private void getGeoInfo(String geo) { StringBuffer value ...
- Windows Auzre 微软的云计算产品的后台操作界面
Windows Auzre 微软的云计算产品的后台操作界面,试用期,相比于阿里云后台操作不是人. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmFvbG ...
- Android开发技巧——PagerAdapter再简单的包
再次内容View的ViewPager该适配器PagerAdapter简包,支持List数据与SparseArray数据.随着更新的浏览功能. 首先,首先贴上顶部抽象类代码: /* * Date: 14 ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- FreeBSD包管理
FreeBSD软件没有安装Ubuntu的apt-get.它也不是Gentoo的portage.有三种方式: package ports 自主进行源代码编译安装 这里简介前两种. FreeBSD 6.0 ...