<!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. 【dijkstra】【次短路】【fread】hdu6181 Two Paths

    题意:给你一张简单无向图,问你1到n的次短路.注意,可以不是简单路径. 存个次短路板子,原理还是挺简单,直接看代码吧.然后这份代码还是个fread的示例用法. #include<cstdio&g ...

  2. 【最大流FF模板】HDU1532&POJ1273

    参照<挑战程序设计竞赛> #include<iostream> #include<cstdio> #include<cstdlib> #include& ...

  3. linux 配置信息

    # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...

  4. 判断IE版本的HTML语句详解，如：<!--[if IE 9]> 仅IE9可识别 <![endif]-->

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: 注意:以下用法不支持IE ...

  5. ubuntu系统使用dnw下载程序

    转:http://blog.chinaunix.net/uid-22030783-id-3350840.html 获得dnw4linux.tar.bz2 源码包,可在xcembed论坛下载:http: ...

  6. 从co到koa01-co

    thunk 他的发展是由函数的求值策略的分歧决定的,两种求值策略 传值调用,在进入函数体之前就直接执行完,把值传进去 传名调用,将表达式传入函数体,只在用到他的时候求值 传名函数的编译器实现,其实就是 ...

  7. JAVA项目如何打开，打开乱码怎么办，字体太小怎么办，感叹号是什么情况

    打开java项目 Finish 汉字乱码改这里 字体大小改在第一个的 Appearance里面 项目前面有感叹号,都是tomcat和jdk配置有问题

  8. Android疑难杂症之android:configChanges="orientation" 无效

    通常情况下,当“屏幕方向”变化时会销毁并重建当前Activity.而我们有时候并不希望重新创建Activity实例,然后就会在AndroidManifest.xml中配置Activity: <a ...

  9. 二十四种设计模式：观察者模式(Observer Pattern)

    观察者模式(Observer Pattern) 介绍定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新. 示例有一个Message实体类,某些对象 ...

  10. Neural Networks for Machine Learning by Geoffrey Hinton （4）

    一种能够学习家谱关系的简单神经网络 血缘一共同拥有12种关系: son, daughter, nephew, niece, father, mother, uncle, aunt, brother, ...