jquery $.add()用法与实例详解

jquery $.add(),自从有了jquery之后我们对页面的操作就不用像以前的js一样麻烦了,像我样给div中的p增加背景$("div").add("p")
            .css教程("background", "yellow");
就这么简单哦。

给a增加一个background

<html>
  <head>
    <script type="text/网页特效" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").add(document.getElementById("a")).css("background", "yellow");

        });
    </script>
  </head>
  <body>
    <body>
          <p>Hello</p>
          <p id="a">Hello</p>
  </body>
</html>

给当前页面的p元素增加背景

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               
          
           
    $("div").add("p")
            .css("background", "yellow");

                   

        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
         
    </body>
</html>

给指定div增加样式

<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
var tmpExample = {
  ready : function() {
    $('ul#liClass1 li').add('ul#liClass3 li').addClass('justAdd');
  }
};

$(document).ready(tmpExample.ready);
    </script>
    <style type='text/css'>
body {
    font: 16px sans-serif;
}
h3 {
    font-size: 18px;
    margin: 0 0 5px 0;   
}
h4 {
    font-size: 16px;
    margin: 5px 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    margin: 1px;
    padding: 3px;
}
li.justAdd {
    background: #88fac6;
}
    </style>
  </head>
  <body id='tmpExample'>
    <ul id='liClass1'>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <ul id='liClass2'>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
    </ul>
    <ul id='liClass3'>
      <li>I</li>
      <li>J</li>
    </ul>
  </body>
</html>

时间: 2024-08-01 19:14:49

jquery $.add()用法与实例详解的相关文章

C# Timer用法及实例详解

1.C# Timer用法及实例详解 http://developer.51cto.com/art/200909/149829.htm http://www.cnblogs.com/OpenCoder/archive/2010/02/23/1672043.html 关于C# Timer类  在C#里关于定时器类就有3个 C# Timer使用的方法1.定义在System.Windows.Forms里 C# Timer使用的方法2.定义在System.Threading.Timer类里  " C# T

mysql事务处理用法与实例详解

一个事务是一个连续的一组数据库操作,就好像它是一个单一的工作单元进行.换言之,永远不会是完整的事务,除非该组内的每个单独的操作是成功的.如果在事务的任何操作失败,则整个事务将失败. 实际上,会俱乐部许多SQL查询到一个组中,将执行所有的人都一起作为事务的一部分. 事务的特性: 事务有以下四个标准属性的缩写ACID,通常被称为: 原子性: 确保工作单元内的所有操作都成功完成,否则事务将被中止在故障点,和以前的操作将回滚到以前的状态. 一致性: 确保数据库正确地改变状态后,成功提交的事务. 隔离性:

CSS 派生选择器的用法与实例详解

通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁.在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则.在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的. 派生选择器允许你根据文档的上下文关系来确定某个标签的样式.通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁. 比方说,你希望列表中的 strong 元素变为斜体字,而

Android控件之ListView用法实例详解_Android

本文实例讲述了Android控件之ListView用法.分享给大家供大家参考.具体如下: 示例一: 在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/LinearLayout01" androi

Zend Framework+smarty用法实例详解_php实例

本文实例讲述了Zend Framework+smarty用法.分享给大家供大家参考,具体如下: 一.Zend Framework简介 Zend Framework使用模型-视图-控制器(Model-View-Controller(MVC))结构.这个用来把你的程序分离成不同部分使得开发和维护变得容易. 运行Zend Framework需要:PHP 5.1.4 (或更高) .Web 服务器支持 mod_rewrite功能,本实例采用Apache. 从这里http://framework.zend.

jsp自定义标签用法实例详解_JSP编程

本文实例讲述了jsp自定义标签用法.分享给大家供大家参考.具体如下: 在JSP中有一种机制,可以让你在JSP页面中插入与HTML类似的标记.本文介绍JSP定制标记的基本概念和构成,以及如何开发和应用JSP定制标记. 什么是标记 使用HTML语言我们可以这样去编辑我们的网页: <HTML> <HEAD> <TITLE> HELLO WORLD </TITLE> </HEAD> <BODY> HELLO WORLD </BODY&g

div+css相对定位和绝对定位用法实例详解

本文向大家介绍一下CSS relative相对定位的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上. CSS relative相对定位 设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像

jQuery选择器用法实例详解_jquery

本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a")):第二种是用jQuery对象的几个methods(方法).这两种方式还可以联合起来混合使用. 使用 CSS 和 XPath 选择器选择的方法有许多种用法,关于详细的 CSS 选择器可参考本站相关文章. 首先来看通过元素的 ID

Android开发之Animations动画用法实例详解_Android

本文实例讲述了Android开发之Animations动画用法.分享给大家供大家参考,具体如下: 一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 Java Code代码中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸