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 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP 验证码的实现代码
2011/07/17 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php去除数组中重复数据
2014/11/18 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
php和html的区别点详细总结
2019/09/24 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python中is和==的区别详解
2018/11/15 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python属于解释型语言么
2020/06/15 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
个人自我鉴定范文
2013/10/04 职场文书
个人找工作的自我评价
2013/10/17 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
给国外客户的邀请函
2014/01/30 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
办公室岗位职责
2015/02/04 职场文书
2015中学教学工作总结
2015/07/22 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python