解读：

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. ubuntu 14.04安装nginx+php

    转自:http://www.cnblogs.com/helinfeng/p/4219051.html 基于最新的Ubuntu 14.04(2014年9月)搭建nginx.php.mysql环境,以下全 ...

  2. Python初步

    准备在工作之余看看Python的东西 收录一些资料 Python初学者(零基础学习Python.Python入门)常见问题:书籍推荐.资料.社区 http://blog.csdn.net/xiaowa ...

  3. BZOJ 1968 [Ahoi2005]COMMON 约数研究：数学【思维题】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1968 题意: 设f(x) = x约数的个数.如:12的约数有1,2,3,4,6,12,所以 ...

  4. JMeter接口响应数据出现乱码的三种解决方法

    第一种方法: Content encoding设置为utf-8,若仍为乱码,请用方法2 图1 第二种方法: 修改bin文件夹下的jmeter.properties文件 搜索ISO,把“#sampler ...

  5. 使用CodeBlocks编译64位程序（用的编译器仅仅是windows sdk的）

    需求: -CodeBlocks使用nightly版本: -Windows SDK(我使用的是6.0A,即微软针对vista的,因为这个比较小,你也可以选择其他版本但是要有64位编译器.他也适用于xps ...

  6. wpf显示视频，image控件闪屏，使用winform控件实现

    使用C#调用mingw的动态库实现视频识别软件,程序通过C++调用opencv打开视频,将图像的原始数据以rgb24的方式传递给C#端,C#通过构造图像对象给控件赋值的方式显示图片. 一开始使用wpf ...

  7. kill命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/wangcp-2014/p/5146343.html 1．命令格式: kill[参数][进程号] 2．命令功能: 发送指 ...

  8. UVA 11880 Ball in a Rectangle（数学+平面几何）

    Input: Standard Input Output: Standard Output � There is a rectangle on the cartesian plane, with bo ...

  9. [GitHub] - Unity Timer

    https://github.com/akbiggs/UnityTimer#unity-timer Run actions after a delay in Unity3D. This library ...

  10. pta编程(1-8)

    知识点:本次编程运用到的格式 #include<stdio.h> int main(void) { printf(); return 0; } 过程:1-3.没什么问题,就是注意字符的输入 ...