<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>2-4</title>

         <link rel="stylesheet" type="text/css" href="css/style.css" />

         <!--   引入jQuery -->

         <script src="../scripts/jquery.js" type="text/javascript"></script>

         <script src="lib/assist.js" type="text/javascript"></script>

         <script type="text/javascript">

             $(document).ready(function(){

                 //选择 id为 one 的元素

                 $('#btn1').click(function(){

                     $('#one').css("background","#bfa");

                 });

                 //选择 class 为 mini 的所有元素

                 $('#btn2').click(function(){

                     $('.mini').css("background","#bfa");

                 });

                 //选择 元素名是 div 的所有元素

                 $('#btn3').click(function(){

                     $('div').css("background","#bfa");

                 });

                 //选择 所有的元素

                 $('#btn4').click(function(){

                     $('*').css("background","#bfa");

                 });

                 //选择 所有的span元素和id为two的div元素

                 $('#btn5').click(function(){

                     $('span,#two').css("background","#bfa");

                 });

             });

         </script>

     </head>

     <body>

         <button id="reset">手动重置页面元素</button>

         <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

         <h3>基本选择器.</h3>

         <!-- 控制按钮 -->

         <input type="button" value="选择 id为 one 的元素." id="btn1"/>

         <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>

         <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>

         <input type="button" value="选择 所有的元素." id="btn4"/>

         <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>

         <br /><br />

         <!-- 测试的元素 -->

         <div class="one" id="one" >

             id为one,class为one的div

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

         </div>

         <div class="one"  id="two" title="test" >

             id为two,class为one,title为test的div.

             <div class="mini"  title="other">class为mini,title为other</div>

             <div class="mini"  title="test">class为mini,title为test</div>

         </div>

         <div class="one">

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

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

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

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

         </div>

         <div class="one">

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

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

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

             <div class="mini"  title="tesst">class为mini,title为tesst</div>

         </div>

         <div style="display:none;"  class="none">

             style的display为"none"的div

         </div>

         <div class="hide">class为"hide"的div</div>

         <div>

             包含input的type为"hidden"的div<input type="hidden" size="8"/>

         </div>

         <span id="mover">正在执行动画的span元素.</span>

     </body>

 </html>

    1. $('#one').css("background","#bfa");　　改变id为one的元素的背景色。

    1. $('.mini').css("background","#bfa");　　改变class为mini的所有元素的背景色

    1. $('div').css("background","#bfa");　　改变元素名是<div>的所有元素的背景色

    1. $('*').css("background","#bfa");　　改变所有元素的背景色

    1. $('span,#two').css("background","#bfa");　　改变所有的<span>元素和id为two的元素的背景色

jQuery基础学习6——基本选择器的更多相关文章

  1. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery基础学习8——层次选择器next()和prev()方法

    $('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...

  3. jQuery基础学习8——层次选择器children()方法

    $('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...

  4. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  5. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

  8. 【jQuery基础学习】09 jQuery与前端（这章很水）

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  9. Jquery | 基础 | 慕课网 | 类选择器

    原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. SharePoint2010安装文档

    最低配置要求 操作系统 X64 Window Server 2008 R2 Standard 数据库 X64 SQL Server 2008 R2 CPU X64,4核 内存 8G 硬盘 100G 安 ...

  2. 函数buf_page_address_fold

    /********************************************************************//** Calculates a folded value ...

  3. UVa 11752 (素数筛选 快速幂) The Super Powers

    首先有个关键性的结论就是一个数的合数幂就是超级幂. 最小的合数是4,所以枚举底数的上限是pow(2^64, 1/4) = 2^16 = 65536 对于底数base,指数的上限就是ceil(64*lo ...

  4. UVa 437 (变形的LIS) The Tower of Babylon

    题意: 有n种类型的长方体,每种长方体的个数都有无限个.当一个长方体的长和宽分别严格小于另一个长方体的长和宽的时候,才可以把这个放到第二个上面去.输出这n种长方体能组成的最大长度. 分析: 虽说每种都 ...

  5. bzoj1934: [Shoi2007]Vote 善意的投票

    最大流..建图方式都是玄学啊.. //Dinic是O(n2m)的. #include<cstdio> #include<cstring> #include<cctype& ...

  6. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

  7. Myeclipse中相同变量高亮显示

    不小心搞不显示了,解决: windows/MyEclipse-> preferences-> java-> Editor-> Mark Occurences 勾选即可

  8. db file scattered read 等待事件

    db file scattered read 等待事件: 我们经常会见到db file scattered read  等待事件,在生产环境中,这个等待事件可能更为常见.这个事件表明用户进程正在读数据 ...

  9. 无人机DLG生产作业流程

    参考文章 无人机(AVIAN)低空摄影测量作业流程 无人机低空遥感测绘作业流程及主要质量控制点 微型无人机低空摄影测量系 无人机航空摄影测量系统引进与发展 基于复杂地形的无人机航摄系统1∶500 DL ...

  10. java web 学习五（servlet开发1）

    一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...