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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
Node.js编码规范
Jul 14 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue调用语音播放的方法
Sep 27 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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实现根据时间戳获取周几的方法
2016/02/26 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
JS动画效果代码3
2008/04/03 Javascript
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Vue渲染函数详解
2017/09/15 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
Python金融数据可视化汇总
2017/11/17 Python
Python输出各行命令详解
2018/02/01 Python
python中字符串的操作方法大全
2018/06/03 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python在不同条件下的输入与输出
2020/02/13 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python实现画图工具
2020/08/27 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
《风筝》教学反思
2014/04/10 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
安全生产月标语
2014/10/07 职场文书