<!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. 2286: [Sdoi2011]消耗战

    2286: [Sdoi2011]消耗战 链接 分析 虚树练习题. 构建虚树,在虚树上DP. 跟着gxb学虚-tree... 代码 #include <cstdio> #include &l ...

  2. spring整合redis缓存，以注解(@Cacheable、@CachePut、@CacheEvict)形式使用

    maven项目中在pom.xml中依赖2个jar包,其他的spring的jar包省略: <dependency> <groupId>redis.clients</grou ...

  3. Active Directory-Integrated Zones

    更新时间: 2010年5月 应用到: Windows Server 2003, Windows Server 2003 R2, Windows Server 2003 with SP1, Window ...

  4. 《Cracking the Coding Interview》——第11章：排序和搜索——题目3

    2014-03-21 20:55 题目:给定一个旋转过的升序排序好的数组,不知道旋转了几位.找出其中是否存在某一个值. 解法1:如果数组的元素都不重复,那么我的解法是先找出旋转的偏移量,然后进行带偏移 ...

  5. 《数据结构》C++代码 Splay

    Splay,伸展树.之所以先写这个课内并不怎么常用的数据结构,是因为本人非常喜欢Splay,我觉得这是非常有美感且灵活的一种平衡树.在此先声明,我的伸展树写法来源于CLJ大牛,基础好的同学可以去他的博 ...

  6. NOIP2018 集训(一)

    A题 Simple 时间限制:1000ms | 空间限制:256MB 问题描述 对于给定正整数\(n,m\),我们称正整数\(c\)为好的,当且仅当存在非负整数\(x,y\)使得\(n×x+m×y=c ...

  7. Spring Boot多数据源配置（一）durid、mysql、jpa整合

    目前在做一个统计项目.需要多数据源整合,其中包括mysql和mongo.本节先讲mysql.durid.jpa与spring-boot的整合. 引入Durid包 <dependency> ...

  8. Leetcode 670.最大交换

    最大交换 给定一个非负整数,你至多可以交换一次数字中的任意两位.返回你能得到的最大值. 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7. 示例 2 : 输入: 9973 ...

  9. Linux开启MySQL远程连接

    Linux开启MySQL远程连接的设置步骤 . MySQL默认root用户只能本地访问,不能远程连接管理MySQL数据库,那么Linux下如何开启MySQL远程连接?设置步骤如下: 1.GRANT命令 ...

  10. C 语言 进阶

    清单狂魔,只挖坑不填坑.. 前言 最近经常被询问 C 语言 相关的问题,突然便也觉得需要思考一下 C 语言的进阶了. 我用 C 语言写过的最大的一个项目,也只是那个贪吃蛇,后来就断断续续地用 Pyth ...