jquery学习之add()

解读：

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()的更多相关文章

jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
jQuery学习-事件之绑定事件（二）
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
jquery学习随笔
转)jquery学习随笔(jquery选择器) jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...
jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
jquery学习（一）
简单的jquery学习,首先在页面引入jquery  <script src="js/jquery-1.8.3.js" type ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

SapScript
* [OPEN_FORM] SAPscript: フォーム印刷の開始 * [START_FORM] SAPscript: 書式を開始 * [WRITE_FORM] SAPscript: 書式ウィンドウ ...
ChemDraw Std 14性价比最高版本，即将下架
虽然ChemDraw Std 14是ChemOffice®14的基础组件,但是基础功能涵盖全面,是教育专供产品.根据官方最新消息ChemDraw系列软件产品线将进行全面的升级,ChemOffice®1 ...
Android面试收集录蓝牙与WiFi
1.打开手机中的蓝牙功能有哪些方法? 法1:使用Intent ==>new Intent(BluetoothAdaper.ACTION_REQUEST_ENABLE); startActivi ...
easyui 验证动态添加和删除问题
$.extend($.fn.validatebox.methods, { remove: function(jq, newposition){ return jq.each(function(){ $ ...
MySQL数据库性能优化专题
摘录: 书:<MySQL性能调优与架构设计> 一个系列: (按顺序排一下) MySQL 数据库性能优化之缓存参数优化 http://isky000.com/database/mysql-p ...
Android Google Maps 开始
由于工作需要,最近对Android的各大地图进行了试用. 其中有Google地图,百度地图,高德地图,还有开源的OSM. 在使用Google地图的时候,官网流程写的非常清楚,但是其中也遇到一些问题.这 ...
发布npm包登录报错 E409 Conflict
1.到官网注册个账号,并且验证完邮箱:https://www.npmjs.com/ 2.打开cmd命令行登录:$npm login 根据提示一步步完成登录. 3.新建一个项目文件夹: npmtes ...
Viewer.js 图片预览插件使用
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片 ...
虚拟现实-VR-UE4-构建光照显示光照构建失败，Swarm启动失败
闲的无聊折腾,发现想构建光照的时候,总是显示失败如下图百度许久,有大神指出是我在编译源码的的时候没有将其中的某个模块编译进去,只需要重新编译摸个模块就好在UE4 的sln文件下,会看到一个Unr ...
排查实时tail功能cpu占用过高问题
“你的python应用cpu占用快90%了!!!”,良哥朝我眨了眨布满血丝的眼睛“不会吧”,我心想:我这是好的啊没接触过kafka的同学可以先了解下:([http://www.jasongj.com ...

jquery学习之add()

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

随机推荐

热门专题