jQuery-基本过滤选择器

来源：互联网发布：免费网络推广渠道编辑：程序博客网时间：2024/05/01 21:36

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤器、内容过滤器、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本一些实例如下所示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>基本过滤选择器</title>    <script src="../libs/jquery.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: #aaaaaa;            font-size: 12px;        }        div.hide{            display: none;        }    </style></head><body><div class="one" id="one">    id is one,class also is one    <div class="mini">class name is mini</div></div><div class="one" id="two" title="test">    id is two, class is one, title is test    <div class="mini" title="other">class is mini,title is other</div>    <div class="mini" title="test">class is mini, title is test</div></div><div class="one">    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini"></div></div><div class="one">    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini">class is mini</div>    <div class="mini" title="test">class is mini, title is test</div></div><div style="display: none" class="none">    style的display为“none”的div</div><div class="hide"> class is hide</div><div>    包含input的type为“hidden”的div    <input type="hidden" size="8"></div><span id="mover">正在执行动画的sapn元素</span><script>    /*$("div:first")//改变第一个《div》元素的背景色            .css("background","#33FFCC");*/    /*$("div:last")//改变最后一个div元素的背景色            .css("background","#99CC33");*/    /*$("div:not(.one)")//改变class不为one的div背景色,只要class名不为one颜色就改变            .css("background","#CC9999")*/    /*$("div:even")//改变索引值为偶数的div元素的背景色            .css("background","#FF3333");*/    /*$("div:odd")//改变索引值为奇数的div元素的背景色            .css("background","#FFCC99");*/    /*$("div:eq(3)")//改变索引值为3的div元素背景色            .css("background","#9900FF");*/    /*$("div:gt(3)")//改变索引值大于3的div元素背景色            .css("background","#996666");*/    /*$("div:lt(3)")//改变索引值小于3的div元素背景色            .css("background","#CC66FF");*/    /*$(":header")//改变所有标题元素，列如h1、H2....这些元素的背景色            .css("background","#99FF33");*/    /*$(":animated")//改变当前正在执行动画的元素的背景色            .css("background","#CCCC66");*/    $(":focus")//改变当前获取焦点的元素的背景色            .css("background","#CCFFCC");</script></body></html>

阅读全文

0 0