<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层级选择器</title>

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

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

        <script>

            $(function(){

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

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

                })

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

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

                })

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

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

                })

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

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

                })

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="body中的第一个div元素"/>

        <input type="button" id="btn2" value="body中的最后一个div元素"/>

        <input type="button" id="btn3" value="选择body中的奇数的div"/>

        <input type="button" id="btn4" value="选择body中的偶数的div"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

form div { margin:5px 0;}

.int label { float:left; width:100px; text-align:right;}

.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

.sub { padding-left:100px;}

.sub input { margin-right:10px; }

.formtips{width: 200px;margin:2px;padding:2px;}

.onError{

    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;

    padding-left:25px;

}

.onSuccess{

    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;

    padding-left:25px;

}

.high{

    color:red;

}

  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;

  }

table        { border:;border-collapse:collapse;}

td    { font:normal 12px/17px Arial;padding:2px;width:100px;}

th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}

.even        { background:#FFF38F;}  /* 偶数行样式*/

.odd        { background:#FFFFEE;}  /* 奇数行样式*/

.selected        { background:#FF6500;color:#fff;}

Jquery操作基本筛选过滤器的更多相关文章

  1. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  2. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  3. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  4. JQuery 操作DOM

    DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件DOM 操作的分类:    DOM Core: ...

  5. jQuery操作表格（table）的常用方法、技巧汇总

    摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便 ...

  6. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  7. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  8. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  9. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

随机推荐

  1. loj2174 「FJOI2016」神秘数

    先考虑一下一个集合怎么用 \(O(n)\) 时间求出来,然后用主席树推广到一个序列就可以了.大致思想就是考虑一个数的权值和它前面的数的和的关系. #include <algorithm> ...

  2. hbase shell出现ERROR:Can't get master address from Zookeeper;znode data==null

    hbase shell出现ERROR:Can't get master address from Zookeeper;znode data==null(ERROR:org.apache.hadoop. ...

  3. 剑指Offer - 九度1348 - 数组中的逆序对

    剑指Offer - 九度1348 - 数组中的逆序对2014-01-30 23:19 题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个 ...

  4. 《Cracking the Coding Interview》——第4章：树和图——题目2

    2014-03-19 03:32 题目:给定一个有向图,判断其中两点是否联通. 解法:DFS搜索解决,如果是无向图的话,就可以用并查集高效解决问题了. 代码: // 4.2 Write a progr ...

  5. 《算法》C++代码 快速排序

    快速排序,简称快排,常称QuickSort.QSort.在排序算法中非常常用,其编程复杂度低,时间复杂度O(NlogN),空间复杂度O(N),执行效率稳定,而且常数很低. 基本思想就是二分,例如你要将 ...

  6. dynamic基元类型与隐式类型的局部变量var

    dynamic代码示例 using System; using System.Collections.Generic; using System.Linq; using System.Text; na ...

  7. PICT：基于正交法的软件测试用例生成工具

    成对组合覆盖这一概念是Mandl于1985年在测试Aad编译程序时提出来的.Cohen等人应用成对组合覆盖测试技术对Unix中的“Sort”命令进行了测试.测试结果表明覆盖率高达90%以上.可见成对组 ...

  8. Python学习-day19 django基础篇

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  9. Oracle 遇到的问题：dos命令下imp导入数据时出错

    赋予用户dba权限:很多情况下会遇到没有权限需要输入用户名及密码才能导入 --已知被赋予权限的用户名为:batch --第一步 登陆 sqlplus /nolog sql>conn /as sy ...

  10. 第三方库的安装：Pangolin

    Pangolin: 一款开源的OPENGL显示库,可以用来视频显示.而且开发容易. 代码我们可以从Github 进行下载:https://github.com/stevenlovegrove/Pang ...