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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
对vuex中store和$store的区别说明
Jul 24 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 网上商城促销设计实例代码
2012/02/17 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
基于vue实现分页效果
2017/11/06 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python ubplot使用方法解析
2020/01/10 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
使用Python构造hive insert语句说明
2020/06/06 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
安全生产责任书范本
2014/04/15 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang