<!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. BZOJ 1877 [SDOI2009]晨跑（多条不交叉最短路）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1877 [题目大意] 找出最多有几条点不重复的从1到N的路,并且要求在满足这个条件的情况 ...

  2. 【2-SAT(tarjan)】BZOJ1997-[Hnoi2010]Planar

    [题目大意]给出一张存在哈密顿回路的无向图,判断是否是平面图.[思路]首先平面图的一个性质:边数<=点数*3-6因为存在哈密顿回路,可以将回路看作是一个圆,考量不再哈密顿回路中的边.如果两天边相 ...

  3. [转] 浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓

      hibernate工作原理 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Sesssion 4.创建事务Transation 5.持久化操作 6 ...

  4. 陈立伟 － MultiCharts快易通（2013年8月2日）

    <MultiCharts快易通> 作 者:陈立伟 译 者: 系 列:寰宇程式交易312--挑战程式交易系列1 出 版:寰宇出版股份有限公司 字 数:千字 阅读完成:2013年8月2日

  5. 也来讲REST、SOAP

    在GIS网络开发过程中不可避免的的会涉及到REST(Representational State Transfer)的服务.自从Roy Fielding博士在2000年他的博士论文中提出REST风格的 ...

  6. Boost::Lexical_cast 的使用

    .C++代码 #include <boost/lexical_cast.hpp> #include <iostream> int main() { using boost::l ...

  7. python scikit-learn选择正确估算器

    下图摘自官方文档 链接 http://scikit-learn.org/stable/tutorial/machine_learning_map/index.html

  8. c/c++的|、||、&、&&、异或、~、！运算

    位运算     位运算的运算分量只能是整型或字符型数据,位运算把运算对象看作是由二进位组成的位串信息,按位完成指定的运算,得到位串信息的结果. 位运算符有:     &(按位与).|(按位或) ...

  9. scala sbt 添加国内镜像

    FROM: http://www.4wei.cn/archives/1002417 sbt运行时经常需要下载大量的jar包,默认连接到maven官网,速度通常比较慢.在`~/.sbt/`下添加一个`r ...

  10. 003java面试笔记——【java基础篇】从团八百失败面试总结的java面试题(未完待续)

    8.java 线程     1)线程概念,线程与进程      线程:线程是“进程”中某个单一顺序的控制流.也被称为轻量进程.线程是进程中的实体,一个进程可以拥有多个线程,一个线程必须有一个父进程.线 ...