1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.          <title>2-4</title>
  6.          <link rel="stylesheet" type="text/css" href="css/style.css" />
  7.          <!--   引入jQuery -->
  8.          <script src="../scripts/jquery.js" type="text/javascript"></script>
  9.          <script src="lib/assist.js" type="text/javascript"></script>
  10.  
  11.          <script type="text/javascript">
  12.              $(document).ready(function(){
  13.                  //选择 id为 one 的元素
  14.                  $('#btn1').click(function(){
  15.                      $('#one').css("background","#bfa");
  16.                  });
  17.  
  18.                  //选择 class 为 mini 的所有元素
  19.                  $('#btn2').click(function(){
  20.                      $('.mini').css("background","#bfa");
  21.                  });
  22.  
  23.                  //选择 元素名是 div 的所有元素
  24.                  $('#btn3').click(function(){
  25.                      $('div').css("background","#bfa");
  26.                  });
  27.  
  28.                  //选择 所有的元素
  29.                  $('#btn4').click(function(){
  30.                      $('*').css("background","#bfa");
  31.                  });
  32.  
  33.                  //选择 所有的span元素和id为two的div元素
  34.                  $('#btn5').click(function(){
  35.                      $('span,#two').css("background","#bfa");
  36.                  });
  37.              });
  38.          </script>
  39.      </head>
  40.      <body>
  41.  
  42.          <button id="reset">手动重置页面元素</button>
  43.          <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
  44.          <h3>基本选择器.</h3>
  45.  
  46.          <!-- 控制按钮 -->
  47.          <input type="button" value="选择 id为 one 的元素." id="btn1"/>
  48.          <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  49.          <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  50.          <input type="button" value="选择 所有的元素." id="btn4"/>
  51.          <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
  52.  
  53.          <br /><br />
  54.  
  55.          <!-- 测试的元素 -->
  56.          <div class="one" id="one" >
  57.              id为one,class为one的div
  58.              <div class="mini">class为mini</div>
  59.          </div>
  60.  
  61.          <div class="one"  id="two" title="test" >
  62.              id为two,class为one,title为test的div.
  63.              <div class="mini"  title="other">class为mini,title为other</div>
  64.              <div class="mini"  title="test">class为mini,title为test</div>
  65.          </div>
  66.  
  67.          <div class="one">
  68.              <div class="mini">class为mini</div>
  69.              <div class="mini">class为mini</div>
  70.              <div class="mini">class为mini</div>
  71.              <div class="mini"></div>
  72.          </div>
  73.  
  74.          <div class="one">
  75.              <div class="mini">class为mini</div>
  76.              <div class="mini">class为mini</div>
  77.              <div class="mini">class为mini</div>
  78.              <div class="mini"  title="tesst">class为mini,title为tesst</div>
  79.          </div>
  80.  
  81.          <div style="display:none;"  class="none">
  82.              style的display为"none"的div
  83.          </div>
  84.  
  85.          <div class="hide">class为"hide"的div</div>
  86.  
  87.          <div>
  88.              包含input的type为"hidden"的div<input type="hidden" size="8"/>
  89.          </div>
  90.  
  91.          <span id="mover">正在执行动画的span元素.</span>
  92.  
  93.      </body>
  94.  </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. python学习中，list/tuple/dict格式化遇到的问题

    昨天上了python培训的第一课,学习了基础知识.包括类型和赋值,函数type(),dir(),id(),help()的使用,list/tuple/dict的定义以及内置函数的操作,函数的定义,控制语 ...

  2. 8天学通MongoDB——第五天 主从复制

    从这一篇开始我们主要讨论mongodb的部署技术. 我们知道sql server能够做到读写分离,双机热备份和集群部署,当然mongodb也能做到,实际应用中我们不希望数据库采用单点部署, 如果碰到数 ...

  3. Codeforces Round #239 (Div. 2)

    做了三个题,先贴一下代码...终于涨分了 A. Line to Cashier 水题 #include <iostream> #include <cstdio> #includ ...

  4. CodeForces 489A (瞎搞) SwapSort

    题意: 给n个整数(可能有重复),输出一个不超过n次交换的方案,使得经过这n次交换后,整个序列正好是非递减的. 分析: 首先说题解给的算法. 从左到右扫一遍,交换第i个数和它后面最小的那个数. 代码看 ...

  5. PL/SQL中LOOP循环控制语句

    在PL/SQL中可以使用LOOP语句对数据进行循环处理,利用该语句可以循环执行指定的语句序列.常用的LOOP循环语句包含3种形式:基本的LOOP.WHILE...LOOP和FOR...LOOP. LO ...

  6. 【转】pdf 中如何把几页缩小成一页打印

    我用的是Foxit PDF Reader,可以这样设置:文件-打印-打印处理下的页面排列选择“在每张纸上放置多页”-选择每页版数即可. 如果你用的是Adobe Reader,也可以自己找一下,看是否有 ...

  7. Android中FragmentPagerAdapter对Fragment的缓存(一)

    ViewPager + FragmentPagerAdapter,时我们经常使用的一对搭档,其实际应用的代码也非常简单,但是也有一些容易被忽略的地方,这次我们就来讨论下FragmentPagerAda ...

  8. 关于DatePicker控件在IsEnabled为False视觉效果没有明显辨识度的处理方法

    DatePicker控件在IsEnabled为False时界面没有让人看上去不可用(背景为灰色等)的效果.容易让用户迷惑. 可以用下面的代码增加设置透明度的触发器来解决(XAML以及C#方式): &l ...

  9. UI篇--android实现底部按钮布局

    1.采用LinearLayout布局: <LinearLayout android:id="@+id/main" android:layout_width="fil ...

  10. linux命令——磁盘管理pwd

    Linux中用 pwd 命令来查看”当前工作目录“的完整路径(绝对路径). 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录.在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的 ...