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与JSon实现的无刷新分页代码
Sep 13 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP单例模式详细介绍
2015/07/01 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
js打造数组转json函数
2015/01/14 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
python验证码识别的实例详解
2016/09/09 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
如何更优雅地写python代码
2019/07/02 Python
opencv python如何实现图像二值化
2020/02/03 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
设计模式的基本要素是什么
2014/04/21 面试题
2014年社区民政工作总结
2014/12/02 职场文书
老公保证书怎么写
2015/02/26 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis