<!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. WQS二分题集

    WQS二分,一种优化一类特殊DP的方法. 很多最优化问题都是形如“一堆物品,取与不取之间有限制.现在规定只取k个,最大/小化总收益”. 这类问题最自然的想法是:设f[i][j]表示前i个取j个的最大收 ...

  2. JDK源码学习笔记——LinkedList

    一.类定义 public class LinkedList<E> extends AbstractSequentialList<E> implements List<E& ...

  3. Spring的Bean生命周期理解

    首先,在经历过很多次的面试之后,一直不能很好的叙述关于springbean的生命周期这个概念.今日对于springBean的生命周期进行一个总结. 一.springBean的生命周期: 如下图所示: ...

  4. Problem A: 深入浅出学算法022-汉诺塔问题II

    #include<stdio.h> void hanio(int n,char a,char b,char c) { ) printf("%c->%c\n",a, ...

  5. AIM Tech Round (Div. 1) C. Electric Charges 二分

    C. Electric Charges 题目连接: http://www.codeforces.com/contest/623/problem/C Description Programmer Sas ...

  6. 【转】Python IDE for Eclipse

    原文地址 PyDev is a plugin that enables Eclipse to be used as a Python IDE (supporting also Jython and I ...

  7. SynDBOracle.pas

    SynDBOracle.pas 通过OCI.DLL访问ORACLE数据库,是最快的访问方式,比任何其它数据库引擎访问ORACLE速度都要快. 程序发布的时候,只需要将OCI.DLL一同发布即可,而不需 ...

  8. Eureka的自我保护机制

    最近项目在Kubernetes上使用Eureka遇到一些问题,在网站上找到一篇针对Eureka自我保护机制原理的文章,觉得不错,总结如下: Eureka的自我保护特性主要用于减少在网络分区或者不稳定状 ...

  9. StatefulSet在ZooKeeper和Kafka的实践

    K8s的版本是1.7.6 采用nfs的nas存储模式 NFS的问题 建立zk集群的时候总是发现myid绑定一个id,先describe pod确认每个绑定不同的pvc,然后就确认是pv创建的问题,pv ...

  10. synchronized 线程同步-类级别锁定

    1.demo 说明:代码中通过 printNum 方法传入参数判断 a.b 分别对 num 这个参数的值进行了修改. package demo1; import sun.applet.Main; pu ...