<!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. Nagle's Algorithm and TCP_NODELAY

    w非全尺寸分组的发送条件 HTTP The Definitive Guide TCP has a data stream interface that permits applications to ...

  2. Spring的IOC底层实现

    IOC的底层实现 续图:

  3. Keras + Ubuntu环境搭建

    安装Theano (环境参数:Ubuntu 16.04.2  Python 2.7) 安装 numpy 和 scipy 1.sudo apt-get install python-numpy pyth ...

  4. 深入浅出java IO模型

    一.同步和异步 同步:一个事件或者任务的执行,会使整个流程暂时等待,也就是说如果有多个任务要执行,必须要逐个进行. 异步:一个事件或者任务的执行,不会使整个流程暂时等待,也就是说如果有多个任务要执行, ...

  5. 在虚拟机中还原GHO镜像系统

    前置知识 本文精简干练,全是干货.首先要知道,一个原版的Windows系统下载下来就是一个iso格式的文件,也被称为一个镜像.另外还有一种镜像是使用ghost软件制作的,格式为gho的镜像,而ghos ...

  6. Mysql—（2）—

    数据库存储引擎 (更多详见) 一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件应该有不同的类型:比如存文本用txt类型,存 ...

  7. maven 项目配置到tomcat不能正常启动

    最近使用IntelliJ IDEA搭建公司项目,该项目是maven项目,加载jar和编译的时候没有任何异常,但是部署到tomcat上之后,就会出现如下异常: org.apache.catalina.L ...

  8. webpack.dev.conf.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...

  9. 145. Binary Tree Postorder Traversal（二叉树后序遍历）

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  10. Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) E Underground Lab

    地址:http://codeforces.com/contest/782/problem/E 题目: E. Underground Lab time limit per test 1 second m ...