<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <title>ddd</title>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>

     <style type="text/css">

              div,span{

                 width: 140px;

                 height: 140px;

                 margin: 20px;

                 background: #9999CC;

                 border: #000 1px solid;

                 float:left;

                 font-size: 17px;

                 font-family:Roman;

             }

             div.mini{

                 width: 30px;

                 height: 30px;

                 background: #CC66FF;

                 border: #000 1px solid;

                 font-size: 12px;

                 font-family:Roman;

             }

      </style>

      <!--引入jquery的js库-->

     </head>

     <body>

          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />

          <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>

          <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>

          <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>

          <input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>

          <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>

          <h1>天气冷了</h1>

          <h2>天气又冷了</h2>

          <div id="one">

              id为one  

          </div>

          <div id="two" class="mini" >

                id为two   class是 mini

                <div  class="mini" >class是 mini</div>

         </div>

          <div class="one" >

                  class是 one

                <div  class="mini" >class是 mini</div>

                <div  class="mini" >class是 mini</div>

          </div>

          <div class="one" >

                class是 one

                <div  class="mini01" >class是 mini01</div>

                <div  class="mini" >class是 mini</div>

         </div>

         <br>

         <div id="mover" >

                动画

         </div>

         <br>

         <span class="spanone">    span

         </span>

         <span class="mini">    span

         </span>

     </body>

 <script language="JavaScript">

 $().ready(function(){

     //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>

     $("#b1").click(function(){

         $("#one").css("background-color","red");

     });

     //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>

     $("#b2").click(function(){

         $("div").css("background-color","red");

     });

     //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>

     $("#b3").click(function(){

         $(".mini").css("background-color","red");

     });

     //<input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>

     $("#b4").click(function(){

         $("*").css("background-color","red");

     });

     //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>

     $("#b5").click(function(){

         $("span,#two").css("background-color","red");

     });

 });

 </script>

 </html>

jQuery基本选择 元素的更多相关文章

  1. JQuery中选择元素的方法：

    document.getElementById('div1');document.getElementsByTagName('div');getByClass(document,'box'); $(' ...

  2. jquery判断选择元素是否存在

    有时候我们需要对jquery选择器选中的元素进行判断是否存在,如果存在才进行某些操作,不存在就不进行,那么如何判断元素是否存在,代码如下: //判断是否存在特定ID值的元素 ){ alert(&quo ...

  3. JQuery 实践---创建元素包装集

    1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...

  4. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  5. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  6. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  7. JQuery基础教程：选择元素（上）

    jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...

  8. 初识jQuery，八字真言“选择元素，对其操作”

    jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...

  9. jQuery选择器对应的DOM API ——选择元素

    英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...

随机推荐

  1. JZYZOJ1452 NOIP2015_提高组Day2_1_跳石头

    http://172.20.6.3/Problem_Show.asp?id=1452很简单的二分,最开始以为是优先队列,想了想发现优先队列是有情况不能达到最优的,所以二分+贪心处理,在贪心check的 ...

  2. [TCO2013]LitPanels

    题意:一个$n\times m$的无色网格,你可以在其中选择两个$x\times y$的子矩形并在其中将其中任意的格子涂上颜色,问最终能得到多少种不同的网格 做这题会用到一个概念叫包围盒(boundi ...

  3. [SRM478]RandomApple

    题意:有$k$种苹果和$n$个箱子,每个箱子中有一些苹果,先等概率选取$n$个箱子组成集合的非空子集,再从选出的苹果中随机选一个,问每种苹果被选中的概率是多少 设箱子$i$有$cnt_{i,j}$个第 ...

  4. [CODECHEF]SEGPROD

    题意:给定$a_{1\cdots n}$和$p$,多次询问$\prod\limits_{i=l}^ra_i$对$p$取模的值,强制在线,每次询问要求$O(1)$回答 一个微小的黑科技... 静态区间查 ...

  5. 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception

    n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...

  6. 【矩阵乘法】OpenJ_POJ - C17F - A Simple Math Problem

    算(7+4*sqrt(3))^n的整数部分(mod 1e9+7). 容易想到矩乘快速幂,但是怎么算整数部分呢? (7+4*sqrt(3))^n一定可以写成a+b*sqrt(3),同理(7-4*sqrt ...

  7. [转]Spring MVC 4常用的那些注解

    Spring从2.5版本开始在编程中引入注解,用户可以使用@RequestMapping, @RequestParam, @ModelAttribute等等这样类似的注解.到目前为止,Spring的版 ...

  8. MYSQL数据库迁移总结

    Auth: JinDate: 2014-04-03 前端操作,后续测试对外开放不在本文 准备阶段操作阶段后续阶段 需求:phpcms和anquanzuo在一个mysql实例中anquanzuo有一张视 ...

  9. php-scandir()报错

    l       linux下 vim /usr/local/php/etc/php.in l       直接斜杠找 /disable_functions   回车 l       按i键 l     ...

  10. nand flash坏块管理OOB,BBT,ECC

    转:http://www.cnblogs.com/elect-fans/archive/2012/05/14/2500643.html 0.NAND的操作管理方式 NAND FLASH的管理方式:以三 ...