jQuery选择器示例

基本选择器示例，层次选择器示例，过滤选择器(包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器)示例

by jquery2005

HTML

<div class="one" id="one">
    id为one,class为one的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div.
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
<form id="form1" action="#">
    可用元素：<input name="add" value="可用文本框"/><br/>
    不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
    可用元素：<input name="che" value="可用文本框" /><br/>
    不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
    <br/>
    多选框：<br/>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5
    <div></div>

    <br/><br/>
    下拉列表1：<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

    <br/><br/>
    下拉列表2：<br/>
    <select name="test2">
       ...

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:#aaa;
    font-size:12px;
}
div.hide{
    display:none;
}

JavaScript

// 基本选择器示例
//$('#one').css("background","#bbffaa");//改变id为one的元素的背景色
//$('.mini').css("background","#bbffaa");//改变class为mini的所有元素的背景色
//$('div').css("background","#bbffaa");//改变元素名是<div>的所有元素的背景色
//$('*').css("background","#bbffaa");//改变所有元素的背景色
//$('span,#two').css("background","#bbffaa");//改变所有的<span>元素和id为two的元素的背景色

// 层次选择器示例
//$('body div').css("background","#bbffaa");//改变<body>内所有<div>的背景色
//$('body > div').css("background","#bbffaa");//改变<body>内子<div>元素的背景色
//$('.one + div').css("background","#bbffaa");//改变class为one的下一个<div>元素背景色
//$(".one").next("div").css("background","#bbffaa");//等价$('.one + div')
//$('#two ~ div').css("background","#bbffaa");//改变id为two的元素后面的所有<div>兄弟元素的背景色
//$('#two').nextAll("div").css("background","#bbffaa");//等价$('#two ~ div')
//$('#two').nextAll().css("background","#bbffaa");//改变id为two的元素后面的所有元素的背景色
//$('#two').siblings('div').css("background","#bbffaa");//改变id为two元素所有同辈div元素，无论前后位置

// 过滤选择器

//...