程序博客网 > r软件使用统计分析

jQuery选择器之基本筛选选择器

来源：互联网 发布：r软件使用统计分析 编辑：程序博客网 时间：2024/05/17 03:10

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，下面是基本选择器的描述：

$(":first")：匹配第一个元素

$(":last")：匹配最后一个元素

$(":not(selector)")：一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素

$(":eq(index)")：在匹配的集合中选择索引值为index的元素

$(":gt(index)")：选择匹配集合中所有大于给定index(索引值)的元素

$(":even")：选择索引值为偶数的元素，从0开始计数

$(":odd")：选择索引值为奇数的元素，从0开始计数

$(":lt(index)")：选择匹配集合中所有索引值小于给定index参数的元素

$(":header")：选择所有标题元素，像h1,h2,h3等

$(":lang(language)")：选择指定语言的所有元素

$(":root")：选择该文档的根元素

$(":animated")：选择所有正在执行动画效果的元素

注意：

1. :eq(),:lt(),:get(),:even,:odd用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

2.:gt()是一个段落筛选，从指定索引的下一个开始，gt(1)实际上是从2开始

<!doctype html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=gbk" />
    <title>筛选选择器</title>
   <style type="text/css">

       .left {
        width: auto;
        height: 120px;
    }
    
    .left div {
        width: 70px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    .bottom {
        width: 800px;
    }
    
    .bottom div,
    .bottom span {
        display: block;
        width: 80px;
        height: 80px;
        margin: 5px;
        background: #bbffaa;
        float: left;
        font-size: 14px;
    }
    
    .bottom .small {
        width: 60px;
        height: 25px;
        font-size: 12px;
        background: #fab;
    }  

</style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
  $(".div:first").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //找到最后一个div
    $(".div:last").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>
    
    
    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选着单个
    $(".aaron:eq(2)").css("border", "3px groove blue");
    </script>
    
    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>
    
     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");
    </script>
    
    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选取所有input中,没有checked属性的p元素，赋予颜色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>
</body>


</html>

0 0
r软件使用统计分析 r软件使用统计分析
原创粉丝点击
热门IT博客
mac安装的程序在哪mac安装的程序在哪
单片机串口调试助手单片机串口调试助手
灵性书籍推荐 知乎
飞秋有mac版吗
没进入部队职工数据库
java 自定义打印日志
java 泛型调用
linux终端连接工具
整蛊锁屏软件输入密码
bape淘宝哪家正
网络平台战略合作协议
孔子说其恕乎什么意思
51单片机红外通信
eureka golang
seo 北京
阿里云快照多大
uefi u盘启动 ubuntu
大芒果专用数据库
淘宝开童装店的坑
凯立德端口怎么看
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 捕蛇网价格 捕蛇笼捕蛇绝招 抓蛇工具 抓蛇技巧 蛇笼捕蛇技巧 茅山捉鬼 捉鬼道长 捉鬼龙王 夫人在捉鬼 捉鬼合家欢 捉鬼大师 阴阳捉鬼人 阴阳捉鬼师 钟馗捉鬼 捉鬼小农民 捉鬼专门店 宋定伯捉鬼 捉鬼记 捉鬼专家 捉鬼公司 捉鬼 捉鬼这些年 超级捉鬼道长 捉鬼龙王之级品强少 捉鬼有限公司 影后的捉鬼日常 神级捉鬼系统 超级捉鬼道长免费阅读 都市捉鬼人青子 黄小龙宋雨茹捉鬼小农民 梦见捉鱼 梦见自己捉鱼 捉鱼 男人梦见捉到鱼 梦到捉鱼 梦见捉到鱼 梦见捉好多鱼 捉鱼作文 女人梦到捉鱼什么意思 孕妇梦见捉鱼 做梦捉鱼

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里