解读：

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. 38-JWT 设计解析及定制

    可去官网下载Security项目查看源码 只需修改 AddJwtBearer中的行为即可 public void ConfigureServices(IServiceCollection servic ...

  2. Git使用之一：创建仓储和提交文件

    一.前期工作:   1.准备自己的文件夹用于同步文件   2.准备自己的Git账号,并设置好项目(推荐使用国产的码云)   3.安装Git软件 (下载地址: 32-bit Git for Window ...

  3. 4 echo服务器

    收到数据,给别人原封不动返回 #4. 将接收到的数据再发送给对方   udpSocket.sendto(recvData[0], recvData[1]) #coding=utf-8 from soc ...

  4. java冒泡算法

    public static void maopao() { int temp; int[] values = {2, 34, 0, 245}; for (int i = 0; i < value ...

  5. Vue学习（二）：class与style绑定

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  6. Qt 实现在隐藏标题栏情况下，窗口的缩放（未成功）

    呃,这是一个悲剧的版本,在这版本中,我按照网上大神的说法,试了一下,但是没有效果,不知道出错在了那里,和昨天一样,也是,没有理想的效果,这里贴上代码,记录一下 资料连接:放评论 需要包含头文件 #in ...

  7. 【java并发编程实战】第七章：取消与关闭

    停止线程的几种方式 一般的逻辑停止 public class ThreadInterruptTest { public static volatile boolean cancel = true; p ...

  8. linux学习总结---web前端③

    css3: border-radius opacity: transform: 旋转 rotate 平移translate 缩放scale 扭曲skew transition:转变 强调:开始和结束 ...

  9. 梳理 Opengl ES 3.0 （二）剖析一个GLSL程序

    OpenGL ES shading language 3.0 也被称作 GLSL,是个 C风格的编程语言. Opengl ES 3.0内部有两种可编程处理单元,即Vertex processor和Fr ...

  10. Android Service 服务（三）—— bindService与remoteService

    (转自:http://blog.csdn.net/ithomer/article/details/7366396)   一.bindService简介 bindService是绑定Service服务, ...