解读：

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. JAVA中堆栈和内存分配详解(摘抄)

    在Java中,有六个不同的地方可以存储数据: 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存 ...

  2. 数据迁移的应用场景与解决方案Hamal

    本文来自网易云社区 作者:马进 跑男热播,作为兄弟团忠实粉丝,笔者也是一到周五就如打鸡血乐不思蜀. 看着银幕中一众演员搞怪搞笑的浮夸演技,也时常感慨,这样一部看似简单真情流露的真人秀,必然饱含了许许多 ...

  3. [转] Bash脚本：怎样一行行地读文件（最好和最坏的方法）

    用bash脚本读文件的方法有很多.请看第一部分,我使用了while循环及其后的管道命令(|)(cat $FILE | while read line; do … ),并在循环当中递增 i 的值,最后, ...

  4. SGU刷题之路，开始了

    0. 关于SGU的简介 SGU的网址是:acm.sgu.ru 向不了解的同学介绍一下SGU这个题库: 1. 题目难度很高,题目大多很经典. 2. 其数据范围很小,时间和空间要求也都很小,同时很精确.甚 ...

  5. 【Luogu P1935】[国家集训队]圈地计划

    题目 最近房地产商 GDOI (Group of Dumbbells Or Idiots) 从 NOI (Nuts Old Idiots) 手中得到了一块开发土地. 据了解,这块土地是一块矩形的区域, ...

  6. Python升级3.6 强力Django+Xadmin打造在线教育平台

    第 1 章 课程介绍 1-1 项目演示和课程介绍: 第 2 章 Windows下搭建开发环境 2-1 Pycharm.Navicat和Python解释器的安装: Pycharmhttp://www.j ...

  7. python 基础篇 09 函数初识

    <<<<<<<<<<<<<<<------------------------------函         ...

  8. shell语句for循环

    一:常用格式 格式一 for 变量 do 语句 done 格式二 for 变量 in 列表 do 语句 done 格式三 for ((变量=初始值; 条件判断; 变量变化)) do 语句 done 二 ...

  9. python进阶训练

    1.列表,字典,集合解析 from random import randint #列表解析,选出大于0的元素 data=[randint(-10,10)for i in range(10)] resu ...

  10. Linux SPI总线和设备驱动架构之二：SPI通用接口层

    通过上一篇文章的介绍,我们知道,SPI通用接口层用于把具体SPI设备的协议驱动和SPI控制器驱动联接在一起,通用接口层除了为协议驱动和控制器驱动提供一系列的标准接口API,同时还为这些接口API定义了 ...