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 <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- 44- EF + Identity实现
1-配置EF, 需要创建如下几个类 默认User主键为guid类型,现在改成int类型 namespace MvcCookieAuthSample.Models { public class Appl ...
- Hadoop数据倾斜及解决办法
数据倾斜:就是大量的相同key被partition分配到一个分区里,map /reduce程序执行时,reduce节点大部分执行完毕,但是有一个或者几个reduce节点运行很慢,导致整个程序的处理时间 ...
- 你真的了解React吗
https://zhufengzhufeng.github.io/zhufengreact/index.html#t21.%E4%BB%80%E4%B9%88%E6%98%AFReact?
- 判断电脑CPU硬件支不支持64位
你可以在注册表中查看: HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Environment\PROCESSO ...
- 近期准备发布我的asp.net框架
此框架为超轻量级架构,适合做中小型的b/s项目
- 【个人训练】(UVa146)ID Codes
题意与解析 这题其实特别简单,求给定排列的后继.使用stl(next_permutation)可以方便地解决这个问题.但是,想要自己动手解就是另外一回事了.我的解法是从后往前找到第一个$a_i$比$a ...
- 【性能调优】一次关于慢查询及FGC频繁的调优经历
以下来分享一个关于MySQL数据库慢查询和FGC频繁的性能案例. 一.系统架构 一个简单的dubbo服务,服务提供者提供接口,并且提供接口的实现,提供方注册服务到Zookeeper注册中心,然后消费者 ...
- CCF-NOIP-2018 提高组(复赛) 模拟试题(七)
T1 Adjoin [问题描述] 定义一种合法的\(0-1\)串:串中任何一个数字都与\(1\)相邻.例如长度为$ 3 的 0-1 $串中,\(101\)是非法的,因为两边的\(1\)没有相邻的\(1 ...
- java设计模式之观察者模式以及在java中作用
观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式.源-监听器(Source/Listener)模式或从属者(Dependen ...
- Alpha 冲刺5/10
队名:我头发呢队 组长博客 杰(组长) 过去两天完成了哪些任务 继续翻阅Material Design2文档 翻阅网易云的web端网页 接下来的计划 音源爬取 还剩下哪些任务 app开发 燃尽图 有哪 ...