jquery中.add()的使用分析


Posted in Javascript onApril 26, 2013

add() 将元素添加到匹配元素的集合中。这是jquery参考手册上的表述。但其提供的例子链接错误,因此没有对add()的实例说明。这里就提供几个例子,以便更好的掌握add()的用法。

例一

<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left; }
p { clear:left; font-weight:bold; font-size:16px;
color:blue; margin:0 10px; padding:2px; }
</style>
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
 $("div").css("border", "2px solid red").add("p").css("background", "yellow");
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Added this… (notice no border)</p>
</body>
</html>

结果如下图所示:

jquery中.add()的使用分析
解说:这里的add("p")相当于和的意思,就是说$("div")的css和p的css。这里注意的是div是有边框的。而p没有。

例二

<body>
<p>Hello</p><span>Hello Again</span>
</body>

$("p").add("span").css("background", "yellow");

结果如下图所示:

jquery中.add()的使用分析

p和span的css,相当于

$("p,span").css("background","yellow");

例三:

<body>
<p>Hello</p>
</body>

$("p").clone().add("<span>Again</span>").appendTo(document.body);

结果如下:

jquery中.add()的使用分析

clone()复制的意思;复制一个p和把<span>Again</span>插入到文档的body中。

这里插一句:如果不用clone(),则原来的p不存在了。看下面例子:

<script>
$(document).ready(function(){
  $("p").add("<span>Again</span>").appendTo(document.body);
  alert($("body").html());
});
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>

结果如下图所示:

jquery中.add()的使用分析

例四:

<body>
<p>Hello</p><span id="a">Hello Again</span>
</body>

$("p").add(document.getElementById("a")).css("background", "yellow");

结果如下:

jquery中.add()的使用分析

这表明add()中的参数不仅可以是选择器,也可以是DOM元素。

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
树结构之JavaScript
Jan 24 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
微信小程序实现圆形进度条动画
Nov 18 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 #Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 #Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 #Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 验证码实例代码
2010/06/01 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
详解.vue文件解析的实现
2018/06/11 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python实现门限回归方式
2020/02/29 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python实现计算器简易版
2020/12/17 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
教师自我反思材料
2014/02/14 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
幼儿园运动会口号
2014/06/07 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年护士长工作总结
2014/11/11 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
校运会新闻稿
2015/07/17 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers