程序博客网 > 手机触摸屏控制软件

jQuery选择器

来源：互联网 发布：手机触摸屏控制软件 编辑：程序博客网 时间：2024/06/01 22:14

基本选择器：

基本选择器可以通过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>

运行的结果：


                                             
        0        0           
	
				
		









 手机触摸屏控制软件
    		手机触摸屏控制软件



原创粉丝点击



		

热门IT博客


ubuntu 邮件阅读器ubuntu 邮件阅读器




js class隐藏divjs class隐藏div




淘宝直销




ted baker 知乎




狄龙年轻知乎




万家灯火app软件下载




组策略映射网络驱动器




中联软件




redhat linux使用教程




java 调用rest api




php图书管理系统下载




阿里旅行软件




我的淘宝流量来源




删除网络映射驱动器




赤月传说2神翼数据




巨人网络2016财报




生化危机6 电影 知乎




mac相册导入移动硬盘




php常用插件




数据库主键约束



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    女主发育胸痛男主骗她要吸
    5月宝宝发育指标
    四个月宝宝发育指标
    周岁宝宝发育标准
    十个月宝宝发育标准
    9个月宝宝发育标准
    胎儿发育过程
    发育是什么意思
    男生发育过程
    胚胎发育缓慢
    胎儿的发育过程
    胎儿发育图片
    女孩子发育过程
    怀孕胚胎发育过程
    孕期宝宝发育过程图
    怀孕胎儿发育过程图
    胚胎发育过程图
    婴儿发育过程图
    胎儿成长发育过程图
    胎儿的发育全程
    胚胎发育过程
    胎儿生长发育过程图
    女性乳房发育
    乳房发育过程
    少女发育图片
    胎儿发育全过程
    胎儿发育过程图详解
    胸部发育过程
    胎儿每周发育过程图
    少女胸部发育
    女生发育过程图片欣赏
    小脑发育不良怎么办
    早产宝宝发育迟缓
    孩子生长发育迟缓
    婴儿大脑发育不良
    大脑发育不良怎么办
    成人小脑发育不良
    婴儿生长发育标准表
    婴儿大脑发育不良的症状
    先天性大脑发育不良
    少女胸部发育不良怎么办


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里