<!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. JZYZOJ1378 [noi2002]M号机器人 欧拉函数

    http://172.20.6.3/Problem_Show.asp?id=1378日常懒得看题目怪不得语文差,要好好读题目了,欧拉函数大概是数论里最友好的了,不用解方程不用转换过来转换过去只需要简单 ...

  2. [P2526][SHOI2001]小狗散步

    Link: P2526 传送门 Solution: 一道提示非常到位的题目 题面中强调了在两个路径相邻点间只能再去至多一个点,且每个点只计算一次贡献 于是明显可以将原题看作询问在两个不相交点集间最多能 ...

  3. 【推导】Codeforces Round #364 (Div. 2) D. As Fast As Possible

    一种方法是二分总时间,复杂度O(nlogn). 另外我们可以证明,当所有人同时到达终点的时候,是最优的,因为没有人的时间“浪费”了. 我们又发现,每个人的运动过程总是两段,要么是走路,要么是坐车.于是 ...

  4. 【贪心】【set】zoj3963 Heap Partition

    贪心地从前往后扫,每到一个元素,就查看之前的元素中小于等于其的最大的元素是否存在,如果存在,就将它置为其父亲.如果一个结点已经是两个儿子的父亲了,就不能在set中存在了,就将他删除.如果然后将当前元素 ...

  5. Base64序列化和反序列化

    序列化: Dictionary<string, string> sPara = GetRequestPost(ref parameterStr); string serializeStri ...

  6. ArrayList源码及解析

    package java.util; import java.util.function.Consumer; import java.util.function.Predicate; import j ...

  7. Codeforces Round #345 (Div. 2) A. Joysticks dp

    A. Joysticks 题目连接: http://www.codeforces.com/contest/651/problem/A Description Friends are going to ...

  8. mysql远程表/视图-应用

    Date :20140213Auth: Jin参考http://blog.sina.com.cn/s/blog_757b0e130101erl5.htmlhttp://dev.mysql.com/do ...

  9. CentOS 6.9/Ubuntu 16.04搭建OpenVPN服务器以及客户端的使用

    说明: 1.发现一个很奇怪的现象,CentOS和Ubuntu有着对用户不同的管理理念,比如CentOS中安装一切软件都是以root优先(su -),而Ubuntu则以当前用户优先,安装软件以sudo开 ...

  10. php中文件上传需要注意的几点

    1.首先要开启php.ini中的文件上传,打开php.ini 配置文件,查找 File Uploads ,在这个区域有以下3个选项: ;;;;;;;;;;;;;;;; ; File Uploads ; ...