<!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. 15，redis基础学习

    redis Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件 yum安装redis 1.yum安装 #前提得配置好阿里云yum源,epel源 #查看 ...

  2. 一个简单的同步集群的shell脚本

    编写一个xsync文件 然后放在/usr/local/bin 目录下面 xsync文件如下: #!/bin/bash #1 获取输入参数个数,如果没有参数,直接退出 pcount=$# if((pco ...

  3. h5布局之道（最终篇）

    大家好,时隔一年多了,前几篇探讨的rem布局后来又有改进不过一直没有想起来更新博客,rem布局淘宝用的也比较早,有兴趣的可以看看淘宝的flexible ,我的用法比较简单,原来一样,废话不说了直接上代 ...

  4. Windows+Python 3.6环境下安装PyQt4

    第一步:下载.whl,地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4,这里可以下载不同的python版本对应的包. 第二步:选择一个目录,将下 ...

  5. canda 常用命令

    1.获取版本 conda -V conda --version 2.获取帮助 conda -h conda --help 查看某一命令的帮助 conda install -h conda instal ...

  6. DDT驱动

    下载ddt并安装 Pip install ddt 或者官网下载安装 http://ddt.readthedocs.io/en/latest/ https://github.com/txels/ddt ...

  7. 选择MariaDB的压缩数据引擎TokuDB

    业务运用场景 数据基本不用update, 不频繁的范围查询 数据存储量较大(为以后准备) 选择占用磁盘较小的db 业务对数据库插入操作频繁,为避免影响其它业务,需要将直播业务的DB 独立出来,选择另外 ...

  8. [ecmagent][redis学习][1初识redis] redis安装+redis快速教程+python操作redis

    # redis安装 # redis安装教程 -- 服务器(ubuntu)安装redis服务 sudo apt-get install redis-server -- 源码安装 -- $ wget ht ...

  9. 服务器tomcat配置教程

    2018年上学期期末课程设计做了一个留言板,但是我需要把这个Jave Web弄到我的服务器上 首先我们可以安装jdk tomcat在启动时,会读取环境变量的信息,需要一个CATALINA_HOME 与 ...

  10. sql分页汇总-摘抄自网络

    文章:几种常见SQL分页方式效率比较 个人倾向于:(2005以上版本支持 row_number()) select * from ( select row_number()over(order by ...