<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Insert title here</title>

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

     <!-- 为了测试，先添加一些样式 -->

     <style type="text/css">

         div,span,p {

            width:140px;

            height:140px;

            margin:5px;

            background:#aaa;

            border:#000 1px solid;

            float:left;

            font-size:17px;

            font-family:Verdana;

          }

          div.mini {

            width:55px;

            height:55px;

            background-color: #aaa;

            font-size:12px;

          }

          div.hide {

            display:none;

          }

     </style>

     <script type="text/javascript">

         //jQuery的页面加载完成时触发的事件

         $(document).ready(function(){

             //$("div:first")表示：选择第一个div标签

             $(button1).click(function(){

                 $("div:first").css("background-color", "red");

             });

             //$("div:last")表示：选择最后一个div标签

             $(button2).click(function(){

                 $("div:last").css("background-color", "red");

             });

             //$("div:not(.one)")表示：选择除了class为one的所有div标签

             $(button3).click(function(){

                 $("div:not(.one)").css("background-color", "red");

             });

             //$("div:even")表示：选择索引值为偶数的div标签

             $(button4).click(function(){

                 $("div:even").css("background-color", "red");

             });

             //$("div:odd")表示：选择索引值为奇数的div标签

             $(button5).click(function(){

                 $("div:odd").css("background-color", "red");

             });

             //$("div:eq(3)")表示：选择索引值为3的div标签

             $(button6).click(function(){

                 $("div:eq(3)").css("background-color", "red");

             });

             //$("div:gt(3)")表示：选择索引值大于3的div标签

             $(button7).click(function(){

                 $("div:gt(3)").css("background-color", "red");

             });

             //$("div:lt(3)")表示：选择索引值小于3的div标签

             $(button8).click(function(){

                 $("div:lt(3)").css("background-color", "red");

             });

             //$(":header")表示：选择标题标签

             $(button9).click(function(){

                 $(":header").css("background-color", "red");

             });

             //$(":animated")表示：选择有动画的标签

             $(button10).click(function(){

                 $(":animated").css("background-color", "red");

             });

         });

     </script>

 </head>

 <body>

     <h3>标题</h3>

     <a href="">刷新</a>

     <input type="button" id="button1" value="选择第一个div元素."/>

     <input type="button" id="button2" value="选择最后一个div元素."/>

     <input type="button" id="button3" value="选择class不为one的 所有div元素."/>

     <input type="button" id="button4" value="选择索引值为偶数 的div元素."/>

     <input type="button" id="button5" value="选择索引值为奇数 的div元素."/>

     <input type="button" id="button6" value="选择索引值等于3的元素."/>

     <input type="button" id="button7" value="选择索引值大于3的元素."/>

     <input type="button" id="button8" value="选择索引值小于3的元素."/>

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

     <input type="button" id="button10" value="选择当前正在执行动画的所有元素."/>

     <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>

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

     <script type="text/javascript">

         function animateIt() {

             $("#mover").slideToggle("slow", animateIt);

         }

         animateIt();

     </script>

 </body>

 </html>

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

  1. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  2. jquery 属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  3. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  4. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  6. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  7. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  8. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

随机推荐

  1. 剑指Offer——连续子数组的最大和

    题目描述: HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向 ...

  2. Linux时间管理涉及数据结构和传统低分辨率时钟的实现

    上篇文章大致描述了Linux时间管理的基本情况,看了一些大牛们的博客感觉自己写的内容很匮乏,但是没办法,只能通过这种方式提升自己……闲话不说,本节介绍下时间管理下重要的数据结构 设备相关数据结构 // ...

  3. Linux more命令

    more命令类似与cat命令,却比cat命令强大,它以全屏幕的方式按页显示文本文件的内容,支持vi中的关键字定位操作. 1.快捷键 space, z 向下翻页b,ctrl+b       向上翻页 E ...

  4. Zabbix3的离线安装

    背景与环境 由于实际情况需求,zabbix在局域网中进行部署,遇到许多问题,在此记录. 操作系统:CentOS 6.9(使用的最小安装) zabbix版本:zabbix-3.0.13(LTS) php ...

  5. 004-Shell 基本运算符、算术运算符、关系运算符、布尔运算符、辑运算符、字符串运算符、文件测试运算符

    一.概述 Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 二.算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命 ...

  6. SDUT3146：Integer division 2（整数划分区间dp)

    题目:传送门 题目描述 This is a very simple problem, just like previous one. You are given a postive integer n ...

  7. vultr服务器上搭建PHP运行环境-centos7

    安装nginx: yum install nginx 开启Nginx systemctl start nginx 访问你的域名或者ip 例如:quantaedu.com 安装PHP 查看系统版本lsb ...

  8. CCoolBar 的替代方案 CDockablePane。

    (阅读受众需有一定MFC知识储备.) (技术支持:http://www.cnblogs.com/shuhaoc/archive/2011/06/26/cdockableform.html) 在以往很多 ...

  9. 如何在VC6.0下用pthread.h这个头文件

    如何在VC6.0下用pthread.h这个头文件   1.下载PTHREAD的WINDOWS开发包 pthreads-w32-2-4-0-release.exe(任何一个版本均可) http://so ...

  10. React:快速上手(7)——使用中间件实现异步操作

    React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...