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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python实现聚类算法原理
2018/02/12 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Pycharm中如何关掉python console
2020/10/27 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
公司办公室岗位职责
2014/03/19 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党校毕业心得体会
2014/09/13 职场文书
工作检讨书大全
2015/01/26 职场文书
2017新年晚会开幕词
2016/03/03 职场文书