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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
浅谈JavaScript 声明提升
Sep 14 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的彩蛋
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php搜索文件程序分享
2015/10/30 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Python json模块使用实例
2015/04/11 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
详解flask表单提交的两种方式
2018/07/21 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python3 使用traceback定位异常实例
2020/03/09 Python
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
计算机网络专业推荐信
2013/11/24 职场文书
大专会计自我鉴定
2014/02/06 职场文书
小学优秀班主任材料
2014/12/17 职场文书
创先争优承诺书
2015/01/20 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书