测试代码:

01-基本选择器.html

 <!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>01-基本选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script src="./script/assist.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript">
   //== window.onload = function(){}
   $(document).ready(function(){
         //<input type="button" value="选择 id为 one 的元素." id="btn1"/>
       $("#btn1").click(function(){
               //可以动态改变元素的样式..
             /**
              * 1:样式的名称
              * 2：样式的值
              */
               $("#one").css("background","red");
       });

       //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
       $("#btn2").click(function(){
               $(".mini").css("background","yellow");
       });

       //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
       $("#btn3").click(function(){
               $("div").css("background","blue");
       });

       //<input type="button" value="选择 所有的元素." id="btn4"/>
       $("#btn4").click(function(){

               $("*").css("background","green");
       });

       //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
       $("#btn5").click(function(){
             $("span,#two").css("background","green");
       });

   });
   </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>

 <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

jQuery选择器之基本选择器Demo的更多相关文章

  1. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. jQuery选择器之id选择器

    页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...

  4. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  5. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

  8. jQuery选择器之全选择器(*选择器)

    在css中,经常会在第一行写下这样一段样式: * { margin:; padding:; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素 ...

  9. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

随机推荐

  1. Castle学习笔记----初探IOC容器

    通常IOC实现的步骤为-->建立容器-->加入组件-->获取组件-->使用组件. 1.建立容器 建立容器也就是IWindsorContainer.接着我门要向容器中注册服务,并 ...

  2. asp获取勾选checkbox的值

    Dim str_select  str_select = CStr(request.Form("c_name")) c_name是checkbox的name

  3. 【转】Android 实现蘑菇街购物车动画效果

    原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路   目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...

  4. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息]

    三.使用Azure AD管理用户信息 在上一章我们采用OpenID的方案和Azure AD交互进行身份验证,本章节我们继续了解如何在Azure AD中创建用户,列出用户信息,修改用户信息和删除用户信息 ...

  5. 利用花生壳和IIS发布网页过程

    老早利用做过类似的事情,但最近又忘了怎么弄的了,还是自己给自己总结下,省得以后到处找了. [动态域名绑定] 如果具有公网IP地址,申请一个免费的花生壳动态域名,再下一个花生壳客户,使用已经申请好的动态 ...

  6. 国内外从事CV相关的企业[转]

    提示:本文为笔者原创,转载请注明出处:blog.csdn.net/carson2005 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问题,这里,我给出自己收集 ...

  7. Gartner: Hype Cycle for Emerging Technologies-2012 (技术成熟度曲线) [转]

      英文稿: The “Hype Cycle for Emerging Technologies” report is the longest-running annual Hype Cycle, p ...

  8. SqlServer数据维护

    现有两个表:Code和CodeCategory Code表: CodeCategory表: 现要把Code表中的数据如实维护一份数据,但是要设PlantID字段值为2,而ID要按规则自增并且要与Pla ...

  9. shell切换用户执行后面语句 su与su -的区别

    关于su和su -的区别,切换用户是可以使用su tom或者su - tom来实现,但是两者有区别,su只是切换身份,但shell环境仍然是原用户的shell,su -是连用户的shell环境一起切换 ...

  10. 5.迪米特法则（Law Of Demeter）

    1.定义 狭义的迪米特法则定义:也叫最少知识原则(LKP,Least Knowledge Principle).如果两个类不必彼此直接通信,那么这两个类就不应当发生直接的相互作用.如果其中的一个类需要 ...