jquery选择器

浏览数：48 / 时间：2015年06月09日

Jquery 选择器

jquery是javascript封装的一个函数包，这里面有很多我们可以用到的函数，使用jq可以为我们节省很多时间，空间并且还可以为我们解决浏览器的兼容性问题。使用jquery我们必须要注意的是要在html文件中调用文件今天我们就来认识一下jquery里面的一些基础的选择器。

1. 基础选择器 Basics

.ID选择器

<div id="imgDiv"></div>
<script type="text/javascript">
    $(‘#imgDiv‘).html(‘这是一个通过id选择器获得的div！‘) .css({
        ‘border‘:‘3px solid #008b8b‘,
        ‘position‘:‘absolute‘,
        ‘background‘:‘#ddd‘,
        ‘font-weight‘:‘bold‘,
        ‘width‘:‘150px‘,
        ‘height‘:‘150px‘})
</script>

效果图如下：

.element元素选择器

   <html>
       <body>
          <a href="">Homepage</a>
          <a href="">about</a>
          <a href="">news</a>
          <a href="">contact</a>
       </body>        
    </html>

$("a").css({
            display:"block",lineHeight:40+"px",   
            float:"left",
            width:120+"px",height:40+"px",                                                                    
         backgroundColor:‘green‘,textAlign:"center",
            color:"white",textDecoration:"none",
            marginLeft:20+"px"
        })

效果图：

.class类选择器

<body>
<ul class="ul2">
    <li class="bgGreen">bgGreen</li>
    <li class="bgGreen">bgGreen</li>
    <li id="bgBlue">bgBlue</li>
    <li class="bgGreen">bgGreen</li>
</ul>
<script type="text/javascript">
    $(function(){
$(".bgGreen").css({
    background:‘green‘,
    color:‘white‘,
    fontWeight:‘bold‘,
    paddingLeft:‘15px‘
});
    });
</script>
</body>

效果图：

.*所有元素选择器

  <html>
       <body>
         <div>
            我是div标签
            <p>
                我是P标签
            </p>
        </div>
        <ul>
              我是ul标签
            <li>我是li标签</li>
        </ul>
        <a href="">我是A标签</a>
       </body>        
    </html>
   <script type="text/javascript">
$("*").css({
    background:"#ccc",
    border:"2px solid green",
    color:"#B22222",
    padding:"10px",
    width:400+"px",
    margin:"10px",
})

显示效果如下：

"selector1, selector2, selectorN"

selector1, selector2, selectorN 可以将几个选择器用","分隔开
然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

<div id="div1">我是div</div>
<p>我是p</p>
<span class="sp">我是span</span>
<script type="text/javascript">
    $("#div1,p,.sp").css({
        width:‘200px‘,
        background:‘green‘,
        padding:‘10px‘,
        color:‘white‘,
        fontWeight:‘bold‘

    });
</script>

效果图如下：

2.层次选择器 Hierarchy

ancestor descendant层级选择器

使用"form input"的形式选中form中的所有input元素.即ancestor
(祖先)为from, descendant(子孙)为input.

<form action="" id="myform">
     <span>姓名：</span><input type="text"><br>
    <span>地址：</span><input type="text"><br>
    <span>性别：</span> <input type="radio" value="man">man <input type="radio" value="woman">womang
    <br>
    <span>年龄：</span>
    <select name="" >
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
    </select> <br>
    说明： <br>
    <textarea name=""  cols="30" rows="10"></textarea>
</form>
<script type="text/javascript">
    $("#myform input,textarea").css({
        border:‘ 2px solid #008b8b‘,
        boxShadow:‘2px 2px 2px 2px #ccc‘
    });
</script>

效果图如下：

parent > child层级选择器

选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素.

<ul class="function_wbe">
    <li>javascript</li>
    <ul>
        <li>函数</li>
        <li>对象</li>
        <li>数组</li>
        <li>闭包</li>
        <li>prototype原型</li>
    </ul>
    <li>php</li>
    <li>html5</li>
    <li>jquery</li>
</ul>
<script type="text/javascript">
    $(".function_wbe>li").css({
        background:‘#008b8b‘,
        color:‘white‘,
        fontWeight:‘bold‘
    });
</script>

效果图如下：

prev + next

prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

<div id="div1" style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px">id="div1"</div>
            <div style="background: #008b8b;width:300px;height:100px;margin-bottom: 5px"></div>
            <div style="background: #008b8b;width:300px;height:100px"></div>

            <script type="text/javascript">
            $("#div1+div").html(‘$("#div1+div")‘).css({
                textAlign:‘center‘,
                lineHeight:‘100px‘,
                color:‘#fff‘,
                fontWeight:‘bold‘,
                background:"orange"
            })
</script>

效果图如下：

prev ~ siblings选择器

选择prev后面的根据siblings过滤的元素注:siblings是过滤器

<div title="div2"  id="div3"  style="background: green;width:300px;height:100px;
        margin-top:10px">
</div>

<div id="div1" style="background:
          green;width:300px;height:100px;margin-top:10px">
</div>

<div  title="div1"  id="div2" style="background: green;width:300px;height:100px;margin-top:10px">
</div>
<div style="background:
          green;width:300px;height:100px;margin-top:10px">
    <div id="xiaoDiv" style="width:100px;height:40px;border: 2px solid #CCC;">ddddddddd</div>
</div>

<script type="text/javascript">
    $("#div1~[id]").css({
        background:"orange"
    })
</script>

效果图如下：

解释： $(“#div1~[id]”)选择id为div1的对象,这个对象后面（且与id为div1的对象属于同一层次的对象中)所有带有id属性的元素(~后面可以跟元素，也可以跟属性，如果跟的是元素，就是对应对象后面的与之同一层次的某种元素)

3.基本过滤器 Basic Filters

:first,:last

:first 匹配找到的第一个元素或者左后一个元素

<table class="tab_guolv" >
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script type="text/javascript">
    $(".tab_guolv tr:first").css({
        background:‘#008b8b‘
    })
$(".tab_guolv tr:last").css({
        background:‘orange‘
    })
</script>

效果图如下：

:not(selector)/:selector

去除所有与给定选择器匹配的元素或则是找到与给定选择其匹配的元素；

<form action="" id="myform" style="border:2px #008b8b dashed;width:300px ;padding-left: 15px">
    <h3 style="color: orange">学生信息</h3>
    <span>姓名：</span><input type="text" id="Text1"><br>
<span>性别：</span> <input type="radio" value="man" id="Radio1">man <input type="radio" value="woman">womang
<br>
<span>年龄：</span>
<select name="" >
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select> <br>
 <span>学号:</span>
    <input type="checkbox" value="0">0
    <input type="checkbox" value="1">1
    <input type="checkbox" value="2">2
    <input type="checkbox" value="3">3
    <input type="checkbox" value="4">4
<br>
    <input type="button" id="Button1" value="提交" class="btnCss"  />
</form>
<div id="divTip" class="divTip"></div>
<script type="text/javascript">
    $("#Button1").click(function(){

        var text = $("#Text1").val();
        var sex=$("input[type=radio]:checked").val();
//        var sex = $("#Radio1").is(":checked")?"man":"woman";
        var age=$("option:checked").val();
        var number="";
        $("input[type=checkbox]:checked").each(function(index,item){
            number+=$(item).val()
        });
//       = $("input[type=checkbox]:checked").val();
//        alert(number);
        $("#divTip").css("display","block").html(text + "<br />" + sex + "<br />" + age + "<br />"+ number + "<br />");
    })
</script>

效果图如下：

解释：将信息填写完整后，点击提交，将填写好的与选择好的选项的值显示在先隐藏的div中；

:even，:odd，:eq(index)

匹配所有索引值为偶数或是奇数 :eq(index)匹配一个给定索引值的元素

<ul class="ul_even">
    <li><a href="">aaaaa</a></li>
    <li><a href="">bbbbb</a></li>
    <li><a href="">ccccc</a></li>
    <li><a href="">ddddd</a></li>
</ul>
<script type="text/javascript">
    $(".ul_even li:even").css({
        background:‘orange‘
    });
    $(".ul_even li:odd").css({
        background:‘#008b8b‘,
        border:‘orange 2px solid‘
    });
    $(".ul_even li").each(function(index,item){
     alert($(".ul_even li").eq(index).html());
    })
</script>

效果图如下：

解释：对于(：eq())选择器举例的效果就是依次弹出

<a href="">aaaaa</a>，
<a href="">bbbbb</a>

......

:lg,:gt

gt:匹配所有大于给定索引值的元素 ,注:index从 0 开始计数,
lt:选择结果集中索引小于 N 的 elements ;

$(".ul_even li").each(function(index,item){
    $(".ul_even li:gt(1)").html("ooooo");
})
$(".ul_even li").each(function(index,item){
     $(".ul_even li:lt(1)").html("ggggg");
})

效果图如下：

; 解释：将li的索引大于1的html改为“ooooo”,li的索引小于1的改为“ggggg”,

header

选择所有h1,h2,h3一类的header标签.

<div style="border:2px #008b8b dashed;width: 350px;padding-left: 30px">
    <h1>这是一个h1</h1>
    <h2>这是一个h2</h2>
    <h3>这是一个h3</h3>
    <h4>这是一个h4</h4>
    <h5>这是一个h5</h5>
    <h6>这是一个h6</h6>
</div>
<script type="text/javascript">
    $(":header").css({
                color:‘orange‘
            });
</script>

效果图如下：

:animated/not(:animated)

匹配所有正在执行(或则是没有在执行)动画效果的元素这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

<button id="run">Run</button><br><br>

<div style="position:relative;width: 150px;height:150px;background: orange;border: 2px solid #008b8b"></div>
<script type="text/javascript">
    $("#run").click(function(){
        $("div:not(:animated)").animate({ left: "+=50" }, 1000);
    });
</script>

效果图如图：

解释：先有一个div距离左边的距离是0，点击run按钮之后，div就慢慢的向右边移动50px ;

4. 内容过滤器 Content Filters

:contains(text)

匹配包含给定文本的元素
查找所有包含 "John" 的 div 元素:
$("div:contains(‘John‘)")

:empty

匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty")

:has(selector)

匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");

:parent

匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素:
$("td:parent")

5.可见性过滤器 Visibility Filters

:hidden

匹配所有的不可见元素注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS
visibility属性让其不显示但是占位,则不输入hidden. 查找所有不可见的 tr 元素:$("tr:hidden")

:visible

匹配所有的可见元素查找所有可见的 tr 元素:$("tr:visible")

7.子元素过滤器 Child Filters

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)

在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")