jquery选择器

时间 2019-11-12

原文原文链接

Jquery 选择器

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

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>

效果图以下：php

.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"
        })

效果图：css

.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

.*全部元素选择器

  <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",
})

显示效果以下：html5

"selector1, selector2, selectorN"

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

<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>

效果图以下：jquery

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)")

:first-child

匹配第一个子元素':first' 只匹配一个元素，而此选择符将为每一个父元素匹配一个子元素在每一个 ul 中查找第一个 li: $("ul li:first-child")

:last-child

匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每一个父元素匹配一个子元素在每一个 ul 中查找最后一个 li:$("ul li:last-child")

:only-child

若是某个元素是父元素中惟一的子元素，那将会被匹配若是父元素中含有其余元素，那将不会被匹
配。在 ul 中查找是惟一子元素的 li: $("ul li:on

8.表单选择器 Forms

:input 匹配全部 input, textarea, select 和 button 元素查找全部的input元素: $(":input")

:text 匹配全部的文本框查找全部文本框: $(":text")

:password 匹配全部密码框查找全部密码框: $(":password")

:radio 匹配全部单选按钮查找全部单选按钮

:checkbox 匹配全部复选框查找全部复选框: $(":checkbox")

:submit 匹配全部提交按钮查找全部提交按钮: $(":submit")

:image 匹配全部图像域匹配全部图像域: $(":image")

:reset 匹配全部重置按钮查找全部重置按钮: $(":reset")

:button 匹配全部按钮查找全部按钮: $(":button")

:file 匹配全部文件域查找全部文件域: $(":file")

9.表单过滤器 Form Filters

:enabled 匹配全部可用元素查找全部可用的input元素: $("input:enabled")

:disabled 匹配全部不可用元素查找全部不可用的input元素: $("input:disabled")

:checked 匹配全部选中的被选中元素(复选框、单选框等，不包括select中的option) 查找全部选中的复选框元素: $("input:checked")

:selected 匹配全部选中的option元素查找全部选中的选项元素: $("select option:selected")

1. jQuery-jQuery选择器
2. jQuery选择器
3. jQuery 选择器
4. jquery选择器
5. JQuery选择器
6. Jquery 选择器
7. JQuery - * 选择器
8. jquery——选择器
9. jquery选择器《-》
更多相关文章...
• jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
• XQuery 选择和过滤 - XQuery 教程
• Docker容器实战(七) - 容器眼光下的文件系统
• Docker容器实战(六) - 容器的隔离与限制