码迷，mamicode.com
首页 > Web开发 > 详细

jQuery选择器

时间：2015-08-05 01:11:33      阅读：187      评论：0      收藏：0      [点我收藏+]

标签：jquery选择器

基本选择器：

基本选择器可以通过id、class等元素来查找DOM元素，例如：


di选择器：$("#divOne").css("background-color","blue");

该功能是将id为divOne的元素背景颜色设置为蓝色。


class选择器：$(".classTwo").css("background-color","red");

该功能是将class为classTwo的元素背景颜色设置为红色。


element选择器（遍历html元素）：  $("p").css("background-color","yellow");

该功能是将p标签背景颜色设置为黄色。


* 选择器（遍历所有元素）：$("div *").css("color","white");

该功能是将div下所有的元素字体统统设置为白色。


他们的源代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	//id选择器
        $("#divOne").css("background-color","blue");
        //class选择器
        $(".classTwo").css("background-color","red");
        // * 选择器（遍历所有元素）
        $("div *").css("color","white");
        //element选择器（遍历html元素）
        $("p").css("background-color","yellow");
	});
</script>
  </head>  
<body>
    <div id="divOne"  class="classOne"><a>one</a></div>
    <div id="divTwo"  class="classTwo"><span>two</span></div>
    <div id="divThree"class="classThree"><p>three</p></div>
</body>
</html>

运行的结果：

技术分享

      

并列选择器：$("p,a,span").css("background-color","blue");

该功能是将并列的三个元素的背景颜色统一设置为蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //并列选择器
        $("p,a,span").css("background-color","blue");
	});
</script>
  </head>  
<body>
    <div id="divOne"  class="classOne"><a>one</a></div>
    <div id="divTwo"  class="classTwo"><span>two</span></div>
    <div id="divThree"class="classThree"><p>three</p></div>
</body>
</html>

运行的结果：

技术分享


层次选择器：

层次选择器可以通过DOM元素之间的层次关系来获取特定的元素，如后代元素、子元素、相邻元素和兄弟元素


parent > child（直系子元素）：$("div>span").css("background-color","blue");

该功能是选择div下的所有span元素，并将其背景颜色设置为蓝色


 prev + next（下一个兄弟元素，等同于next()方法）：$(".span+div").css("background-color","red");

该功能是选择span类下面的div元素，并将其背景颜色设置为红色。


prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）：$(".classOne~div").css("color","white");

该功能是选择类classOne之外的所有的div兄弟元素，并将其字体设置为白色。


下面是其源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //parent > child（直系子元素）
        $("div>span").css("background-color","blue");
        // prev + next（下一个兄弟元素，等同于next()方法）
        $(".span+div").css("background-color","red");
        //prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
        $(".classOne~div").css("color","white");
	});
</script>
  </head>  
<body>
    <div id="divOne"  class="classOne"><span id="spanOne" class="span">one</span></div>
    <div id="divTwo"  class="classTwo"><span>two</span></div>
    <span id="spanThree" class="span">three</span>
    <div id="divfour"  class="classThree"><a>two</a></div>
</body>
</html>

运行的结果：

技术分享


过滤选择器：

过滤选择器主要是通过特定的过滤规则来筛选出特定的DOM元素，过滤规则与CSS中的伪类选择器语法相同，选择器以（：）开头。


基本过滤选择器：


:first和:last过滤选择器（取第一个元素或最后一个元素）：

$("div:first").css("background-color","blue");
$("div:last").css("background-color","red");
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">该功能是将第一个div元素的背景颜色设置为蓝色，将第二个div的背景颜色设置为红色。</span>


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //first和:last（取第一个元素或最后一个元素）
        $("div:first").css("background-color","blue");
        $("div:last").css("background-color","red");
	});
</script>
  </head>  
<body>
    <div id="divOne"  class="classOne"><span id="spanOne" class="span">one</span></div>
    <div id="divTwo"  class="classTwo"><span>two</span></div>
    <span id="spanThree" class="span">three</span>
    <div id="divfour"  class="classThree"><a>two</a></div>
</body>
</html>

运行结果：

技术分享


:not（取非元素）：$("div:not(‘#divTwo‘)").css("background-color","blue");

该功能是将id为divTwo之外的所有的div元素背景颜色统统设置为蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:not（取非元素）
        $("div:not('#divTwo')").css("background-color","blue");
	});
</script>
  </head>  
<body>
    <div id="divOne"  class="classOne"><span id="spanOne" class="span">one</span></div>
    <div id="divTwo"  class="classTwo"><span>two</span></div>
    <span id="spanThree" class="span">three</span>
    <div id="divfour"  class="classThree"><a>two</a></div>
</body>
</html>

运行结果：

技术分享


:even和:odd选择器（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）：

$("tr:even").css("background-color","blue");
$("tr:odd").css("background-color","red");

该功能是将偶数行的背景颜色设置为蓝色，将奇数行的背景颜色设置为红色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:even和:odd选择器
	    $("tr:even").css("background-color","blue");
	    $("tr:odd").css("background-color","red");
	});
</script>
  </head>  
<body>
    <table>
        <tr ><td width="300px">1</td></tr>
        <tr ><td width="300px">2</td></tr>
        <tr ><td width="300px">3</td></tr>
        <tr ><td width="300px">4</td></tr>
    </table>
</body>
</html>

运行的结果：

技术分享


:eq(x)选择器：
$("tr:eq(0)").css("background-color","blue");
$("tr:eq(2)").css("background-color","yellow");
$("tr:odd").css("background-color","red");

该功能是将第一行和第三行的背景颜色分别设置为蓝色和黄色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:eq(x)选择器
	    $("tr:eq(0)").css("background-color","blue");
	    $("tr:eq(2)").css("background-color","yellow");
	    $("tr:odd").css("background-color","red");
	});
</script>
  </head>  
<body>
    <table>
        <tr ><td width="300px">1</td></tr>
        <tr ><td width="300px">2</td></tr>
        <tr ><td width="300px">3</td></tr>
        <tr ><td width="300px">4</td></tr>
    </table>
</body>
</html>

运行结果：

技术分享


:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）过滤选择器：

$("tr:gt(2)").css("background-color","blue");
$("tr:lt(2)").css("background-color","red");

该功能主要是获取大于2的索引元素，然后将其背景颜色设置为蓝色，将获取索引值小于2的元素背景颜色设置为红色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
	    $("tr:gt(2)").css("background-color","blue");
	    $("tr:lt(2)").css("background-color","red");
	});
</script>
  </head>  
<body>
    <table>
        <tr ><td width="300px">1</td></tr>
        <tr ><td width="300px">2</td></tr>
        <tr ><td width="300px">3</td></tr>
        <tr ><td width="300px">4</td></tr>
        <tr ><td width="300px">5</td></tr>
    </table>
</body>
</html>

运行的结果：

技术分享


:header过滤选择器：$(":header").css("color","blue");

该功能主要是将获取的全部标题字体颜色设置为蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:header过滤选择器
	    $(":header").css("color","blue");
	});
</script>
  </head>  
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
</body>
</html>

运行的结果：

技术分享


内容过滤选择器：


:contains(text)（取包含text文本的元素）：$("span:contains(‘one‘)").css("color","blue");

该功能是选取包含one文本内容的span标签，将其字体颜色设置成蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    // :contains(text)（取包含text文本的元素）
	    $("span:contains('one')").css("color","blue");
	});
</script>
  </head>  
<body>
    <span>hello,nihao,你好</span><br>
    <a>大家好,dajiahao</a>
    <span>21,123,123456</span><br>
    <span>one,TWO,Three</span><br>
</body>
</html>

运行的结果：

技术分享


:empty（取不包含子元素或文本为空的元素）：$("span:empty").html("nothing");

该功能是将span为空的元素添加新的内容nothing。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:empty（取不包含子元素或文本为空的元素）
	    $("span:empty").html("nothing");
	});
</script>
  </head>  
<body>
    <span>hello,nihao,你好</span><br>
    <a>大家好,dajiahao</a>
    <span>21,123,123456</span><br>
    <span>one,TWO,Three</span><br>
    <span></span>
</body>
</html>

运行的结果：

技术分享


:has(selector)（取选择器匹配的元素）：$("div:has(‘span‘)").css("background-color","blue");

该功能是将含有span元素的div元素背景颜色设置成蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    // :has(selector)（取选择器匹配的元素）
	    $("div:has('span')").css("background-color","blue");
	});
</script>
  </head>  
<body>
    <span>hello,nihao,你好</span><br>
    <div><a>大家好,dajiahao</a></div>
    <div><span>21,123,123456</span></div>
</body>
</html>

运行的结果：

技术分享


:parent（取包含子元素或文本的元素）：$("p:parent").css("background-color","blue");

该功能是将含有子元素的P元素的背景颜色设置为蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    // :parent（取包含子元素或文本的元素）
	    $("p:parent").css("background-color","blue");
	});
</script>
  </head>  
<body>
    <p><a>大家好,dajiahao</a></p>
    <p></p>
    <p><span>21,123,123456</span></p>
</body>
</html>

运行的结果：

技术分享


:hidden（取不可见的元素）：$("input:hidden");

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
    

所以说上述代码的功能是选择含有"111display: none"的元素与含有“333hidden”的元素。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:hidden（取不可见的元素）
	    $("input:hidden").each(function(){
	        alert($(this).val());
	    });
	});
</script>
  </head>  
<body>
	<input style="display: none;" value="111display: none"/>
	<input style="visibility: hidden" value="222visibility: hidden">
	<input type="hidden" value="333hidden">
</body>
</html>

运行的结果：


        由于这三个元素都是隐藏的，所以说此时我们需要在debug模式下查看各元素的占位空间情况，我们知道，有占位空间的元素是不会被选中的，所以说通过查看占位空间情况我们就可以了解到底是选中了哪些元素。


当光标选中元素一时：

技术分享

如上所示，无占位空间，也就是说会被选中。


当光标选中元素二时：

技术分享

有占位空间，所以说此时元素不被选中。


当光标选中元素三时：

技术分享

无占位空间，也就是说该元素也被选中。


由于在源程序中添加了alert()功能，所以说被选中的会弹窗，弹窗结果如下：


元素1内容被弹出：

技术分享


元素三内容被弹出：

技术分享


:visible（取可见的元素）： $("input:visible")

该功能是将页面中可见的元素或拥有占位符的元素筛选出来。


<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //:visible（取可见的元素）
	    $("input:visible").each(function(){
	        alert($(this).val());
	    });
	});
</script>
  </head>  
<body>
	<input style="display: none;" value="111display: none"/>
	<input style="visibility: hidden" value="222visibility: hidden">
	<input type="hidden" value="333hidden">
	<input type="text" value="Hellow World!">
</body>
</html>

运行的结果：

如图一：

技术分享


如图二：

技术分享


属性过滤选择器：


[attribute]（取拥有attribute属性的元素）：$("div[class]").css("background-color","blue");

该功能是将含有class属性的元素取出来，然后给其背景颜色标注为蓝色。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //[attribute]（取拥有attribute属性的元素）
	    $("div[class]").css("background-color","blue");
	});
</script>
  </head>  
<body>
	<div id="divOne" class="classOne">One</div>
	<div id="divTwo" >Two</div>
	<div id="divThee" class="classThree">Three</div>
</body>
</html>

运行的结果：

技术分享


根据Id获取属性：$("#divThee").attr("class");

该功能是将id为divThee的元素的属性class取出来。


源代码：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    //根据Id获取属性
	    var divAttr=$("#divThee").attr("class");
	    alert(divAttr);
	});
</script>
  </head>  
<body>
	<div id="divOne" class="classOne">One</div>
	<div id="divTwo" >Two</div>
	<div id="divThee" class="classThree">Three</div>
</body>
</html>

运行的结果：

技术分享


[attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）：

//[attribute = value]

$("div[class=classOne]").css("background-color","blue");

$("div[class=classTwo]").css("background-color","red");

//[attribute != value]

$("div[class!=classTwo]").css("color","white");

源代码：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">		
	$(function(){
	    // [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
	    //[attribute = value]
	    $("div[class=classOne]").css("background-color","blue");
	    $("div[class=classTwo]").css("background-color","red");
	    //[attribute != value]
	    $("div[class!=classTwo]").css("color","white");
	});
</script>
  </head>  
<body>
	<div id="divOne" class="classOne">One</div>
	<div id="divTwo" class="classTwo">Two</div>
	<div id="divThee" class="classOne">Three</div>
</body>
</html>


运行的结果：


技术分享








    
        
         
            
版权声明：本文为博主原创文章，未经博主允许不得转载。

        
jQuery选择器
标签：jquery选择器
原文地址：http://blog.csdn.net/zzy1078689276/article/details/47261815

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！