解读：

add() 将元素添加到匹配元素的集合中

例1：

    <!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>

结果如下图所示：

解说：这里的add("p")相当于和的意思，就是说$("div")的css和p的css。这里注意的是div是有边框的。而p没有。

例2：

    <body>

    <p>Hello</p><span>Hello Again</span>

    </body>  
    $("p").add("span").css("background", "yellow");

结果如下图所示：

p和span的css，相当于

    $("p,span").css("background","yellow");

例三：

    <body>

    <p>Hello</p>

    </body>  
    $("p").clone().add("<span>Again</span>").appendTo(document.body);

结果如下：

clone()复制的意思；复制一个p和把<span>Again</span>插入到文档的body中。

这里插一句：如果不用clone()，则原来的p不存在了。

例四：

    <body>

    <p>Hello</p><span id="a">Hello Again</span>

    </body>   
    $("p").add(document.getElementById("a")).css("background", "yellow");

结果如下：

这表明add()中的参数不仅可以是选择器，也可以是DOM元素。

转自：http://blog.csdn.net/zm2714/article/details/8119554

jquery学习之add()的更多相关文章

  1. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  4. jQuery学习-事件之绑定事件（二）

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  5. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  6. jquery学习随笔

    转)jquery学习随笔(jquery选择器)   jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...

  7. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  8. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  9. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

  1. 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  2. spring、spring-data-redis整合使用

    一.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工作由VMwa ...

  3. XStream轻松转换xml和java对象

    首先引入所需的jar: xstream-1.4.9.xpp3_min-1.1.4c.dom4j-1.6.1, 或用maven管理jar包时在pom.xml中添加: <!-- https://mv ...

  4. 【连载】Bootstrap开发漂亮的前端界面之插件开发

    相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...

  5. window平台下使用python虚拟环境

    第一步:安装virtualenv模块 安装virtualenv模块,使用pip install C:\Users\wangjun>pip install virtualenv 第二步:创建虚拟环 ...

  6. [转载] python 解析xml 文件: SAX方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

  7. java设计模式之门面模式以及在java中作用

    门面模式在Tomcat中有多处使用,在Request和Response对象封装,从ApplicationContext到ServletContext封装中都用到了这种设计模式. 一个系统可以有几个门面 ...

  8. Go基础篇【第1篇】: 内置库模块 OS

    os包提供了操作系统函数的不依赖平台的接口.设计为Unix风格的,虽然错误处理是go风格的:失败的调用会返回错误值而非错误码.通常错误值里包含更多信息.os包的接口规定为在所有操作系统中都是一致的.非 ...

  9. C++STL中的vector的简单实用

    [原创] 使用C++STL中的vector, #include <stdio.h> #include<stdlib.h> #include<vector> usin ...

  10. SourceTree git的管理工具使用教程1

    1SourceTree是一个window系统下的Git管理工具 2设置Git 工具——选项——Git设置 3拷贝远程的项目 新建/克隆(输入远程项目的url地址) 4验证(填写用户信息) 工具——选项 ...