解读：

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. Tomcat配置SSL连接

    1.服务器端单项认证 在Tomcat的server.xml文件中,已经提供了现成的配置SSL连接器的代码,只要把<Connector>元素的注释去掉即可: <!—  Define a ...

  2. 【python3.X】python练习笔记[1]

    ##三位数水仙花 ##方法一,小于指定数字的水仙花数 x=eval(input()) a,b,c = 0,0,0 for i in range (100,x,1): a=i%10 b=i//100 c ...

  3. python脚本退出后 不应该为负值

    Python sys.exit的退出代码 sys.exit(n)介绍 功能:执行到主程序末尾,解释器自动退出,但是如果需要中途退出程序,可以调用sys.exit函数,带有一个可选的整数参数返回给调用它 ...

  4. linux 操作之一 如何在linux将本地数据*.sql文件导入到linux 云服务器上的mysql数据库

    liunx 版本ubuntu 16.4 mysql 版本  5.6 1)准备*.sql文件 (* 是准备导入的sql文件的名字) 2)liunx 远程客户端  SecureCRT 7.0 alt+p ...

  5. 【BZOJ 1269】文本编辑器

    题目 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对"文本编辑器"做了一个抽象的定义: Move k:将 ...

  6. Python 3基础教程22-单个列表操作

    本文来介绍列表的操作,先看看单个列表的操作,列表有多个方法.以下多行代码,建议你写一个方法,测试运行一个方法,不然看起来很乱. # 元组操作 x = [5,6,2,1,6,7,2,7,9] # app ...

  7. github 初始化操作小记

     Git作为一种越来越重要的工具,github又如此流行,现在就简单记录一下git的基础操作,希望能帮助大家快速体验入门! 1 查看本地是否存在”公钥”和”私钥” 如果没有,则执行: ssh-keyg ...

  8. 最短路径——Dijkstra算法

    一.相关定义 最短路径:从图中的某个顶点出发到达另外一个顶点的所经过的边的权重和最小的一条路径. 地位:Dijkstra算法是很有代表性的最短路算法,在很多专业课程中都作为基本内容有详细的介绍,如数据 ...

  9. DFS（5）——hdu1728逃离迷宫

    一.题目回顾 题目链接:逃离迷宫 Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地 ...

  10. AMF3 在Unity中使用AMF3和Java服务器通信

    现在在做的项目是一个网页游戏的移植到移动端. 所以服务器直接使用原来的代码.原来的游戏是as3实现,使用flash amf3数据通信. Unity 使用C#作为脚本语言,所以就需要.net的amf3解 ...