组团学
学习方向
登录/注册

JQuery-选择器

阅读 (401)

一、选择器介绍

jQuery选择器是什么？

  • jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法，能够轻松快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙
  • jQuery选择器的语法格式为：$(selector).methodName()
  • Selector是一个字符串表达式，用于识别DOM中的元素，然后使用jQuery提供的方法集合加以设置
  • 多个jQuery操作可以以链的形式串起来（$(selector).method1(). Method2(). Method3()）

jQuery选择器的优势

  • 代码更简单

    在jQuery库中封装了大量可以直接通过选择器调用的方法或函数，使我们仅使用简单的几行代码就可以实现比较复杂的功能

    例如：可以使用$('#id')代替JavaScript代码中的document.getElementById()函数，即通过id来获取元素；使用$('tagName')代替JavaScript代码中的document.getElementsByTagName()函数，即通过标签名称获取HTML元素等

  • 代码更简单

    jQuery选择器支持CSS1、CSS2的全部和CSS3几乎所有的选择器，以及jQuery独创的高级且复杂的选择器，因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来

    一般来说，使用CSS选择器时，开发人员需要考虑主流的浏览器是否支持某些选择器。但在jQuery中，开发人员则可以放心地使用jQuery选择器，无需考虑浏览器是否支持这些选择器，这极大的方便了开发者

  • 完善的检测机制

    在传统的JavaScript代码中，给页面中的元素设定某个事务时必须先找到该元素，然后赋予相应的事件或属性

    如果该元素在页面中不存在或已被删除，那么浏览器会提示运行出错之后的信息，这会影响后边代码的执行。因此，为避免显示这样的出错信息，通常要先检测该元素是否存在，如果存在，再执行它的属性或事件代码

jQuery选择器分类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 属性选择器
  • 表单选择器

二、基本选择器

  • ID选择器

    jQuery中的ID选择器相当于传统的JavaScript中的document.getElementById()方法，jQuery用更简洁的代码实现了相同的功能。虽然两者都获取了指定的元素对象，但是两者调用的方法是不同的。利用JavaScript获取的对象是DOM对象，而使用jQuery获取的对象是jQuery对象

    说明 使用公式
    ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元
    素，并以jQuery包装集的形式返回给对象    		 $("#id") 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <input type="text" name="text" id="inp">
        <button id="btn">显示</button>
    
        <script type="text/javascript">
            $(document).ready(function(){
                var $btn = $("#btn");
                console.log($btn);
                // 为其添加点击事件
                $btn.click(function(){
                    console.log("点击了显示按钮");
                    
                    // 通过ID选择器找到input元素
                    // 调用包装集的val()方法取得文本输入框的值
                    var str = $("#inp").val();
                    alert(str);
                });
            });
        </script>
	</body>
</html>=

  • 元素选择器

    说明 使用公式
    元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的 $("element") 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div><img src="img/strawberry.jpg"/>这里种植了一棵草莓</div>
        <div><img src="img/fish.jpg"/>这里养殖了一条鱼</div>
        <button type="button" id="button">若干年后</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#button").click(function(){
                    var $divs = $("div");
                    console.log($divs);
                    $divs.get(0).innerHTML = "<img src='img/strawberry1.jpg'/>这里长出了一片草莓";
                    $divs.eq(1).html("<img src='img/fish1.jpg'/>这里的鱼没有了");
                });
            });
        </script>
	</body>
</html>

    在上面的代码中，使用元素选择器获取了一组div元素的jQuery包装集，它是一组Object对象，存储方式为[Object Object]，但是这种方式并不能显示出单独元素的文本信息，需要通过索引器来确定要选取哪个div元素，在这里分别使用了两个不同的索引器eq()和get()

    说明：在本实例中使用了两种方法设置元素的文本内容，html()方法是jQuery的方法，innerHTML方法是DOM对象的方法

    注意：eq()方法返回的是一个jQuery包装集，所以它只能调用jQuery的方法，而get()方法返回的是一个DOM对象，所以它只能用DOM对象的方法。eq()方法与get()方法默认都是从0开始计数。$("#test").get(0)等效于$("#test")[0]

  • 类名选择器

    说明 使用公式
    类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素 $(".class") 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
        	div{
        		border:1px solid #003a75;
        		background-color:#cef;
        		margin:5px; 
        		height:35px; 
        		width:75px;
        		float:left;
        		font-size:12px;
        		padding:5px;
        	}
        	</style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div class="box">注意观察我的样式1</div>
        <div class="box">注意观察我的样式2</div>
        <div>我的样式是默认的</div>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    var $boxs = $(".box");
                    console.log($boxs);
                    
                    // 利用css()方法可以为对应的元素设定CSS属性值
                    $boxs.css("background-color","#C50210");
                    $boxs.css("color","#FFF");
                });
            });
        </script>
	</body>
</html>

  • 复合选择器

    复合选择器将多个选择器（可以是ID选择器、元素选择或是类名选择器）组合在一起，两个选择器之间以逗号“,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象

    注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个选择器匹配的元素合并后一起返回

    使用公式：$("selector1,selector2,……,selectorN")

    select1 selector2 selectorN
    一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等 另一个有效的选择器，可以是ID选择器、元素选择器或是类名选择器等 （可选择）任意多个选择器，可以是ID选择器、元素选择器或是类名选择器等 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <p class="default">p元素</p>
        <div class="default">div元素1</div>
        <div class="default">div元素2</div>
        <span class="default" id="sp">ID为span的元素</span>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    var $eles = $("div, #sp");
                    console.log($eles);
                    
                    $eles.css("color", "red");
                });
            });
        </script>
	</body>
</html>

  • 通配符选择器

    说明 使用公式
    取得页面上所有的DOM元素集合的jQuery包装集 $("*") 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <p class="default">p元素</p>
        <div class="default">div元素1</div>
        <div class="default">div元素2</div>
        <span class="default" id="sp">ID为span的元素</span>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    var $eles = $("*");
                    console.log($eles);
                    
                    $eles.css("color", "red");
                });
            });
        </script>
	</body>
</html>

三、层次选择器

  • ancestor descendant选择器

    说明：选择器中的ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素

    使用公式：$("ancestor descendant")

    ancestor descendant
    指任何有效的选择器 用以匹配元素的选择器，并且它是ancestor所
    指定元素的后代元素    		 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box">
            <ul>
                <li>sunck is a good man</li>
                <li>sunck is a nice man</li>
            </ul>
            <div>
                <div>
                    <ul>
                        <li>我是很深的li</li>
                    </ul>
                </div>
            </div>
        </div>
        <ul>
            <li>sunck is a cool man</li>
            <li>sunck is a handsome man</li>
        </ul>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("#box ul").css("color", "red");
                });
            });
        </script>
	</body>
</html>

  • parent>child选择器

    说明：选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素

    注意：使用该选择器只能选择父元素的直接子元素

    使用公式：$("parent>child")

    parent child
    指任何有效的选择器 用以匹配元素的选择器，并且它是parent元素的子元素 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box">
            <ul>
                <li>sunck is a good man</li>
                <li>sunck is a nice man</li>
            </ul>
            <div>
                <div>
                    <ul>
                        <li>我是很深的li</li>
                    </ul>
                </div>
            </div>
            <ul>
                <li>sunck is a good man</li>
                <li>sunck is a nice man</li>
            </ul>
        </div>
        <ul>
            <li>sunck is a cool man</li>
            <li>sunck is a handsome man</li>
        </ul>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("#box>ul").css("color", "red");
                });
            });
        </script>
	</body>
</html>

  • prev+next选择器

    说明：选择器用于匹配所有紧接在prev元素后的next元素

    注意：prev和next是两个相同级别的元素

    使用公式：$("prev+next")

    prev next
    指任何有效的选择器 一个有效选择器并紧接着prev选择器 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <label id="l1">第一个label</label>
        <p>第一个p</p>
        <p>第二个p</p>
        <fieldset>
        	<label>第二个label</label>
        	<p>第三个p</p>
        </fieldset>
        <p>第四个p</p>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("label+p").css("color", "red");
                    // $("#l1+p").css("color", "red");
                    // $("#l2+p").css("color", "red");
                });
            });
        </script>
	</body>
</html>

  • prev～siblings选择器

    说明：选择器用于匹配prev元素之后的所有siblings元素

    注意：prev和siblings是两个相同辈元素

    使用公式：$("prev~siblings")

    prev siblings
    指任何有效的选择器 一个有效选择器并紧接着prev选择器 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <label id="l1">第一个label</label>
        <p>第一个p</p>
        <p>第二个p</p>
        <fieldset>
        	<label id="l2">第二个label</label>
        	<p>第三个p</p>
        </fieldset>
        <p>第四个p</p>
        <button type="button" id="btn">点我变化</button>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("label~p").css("color", "red");
                    // $("#l1~p").css("color", "red");
                    // $("#l2~p").css("color", "red");
                });
            });
        </script>
	</body>
</html>

四、过滤选择器

注意：一般会与其它选择器联合使用

  • 简单过滤器

    说明：简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器

    过滤器 说明
    :first 匹配找到的第一个元素
    :last 匹配找到的最后一个元素
    :even 匹配所有索引值为偶数的元素，索引值从0开始
    :odd 匹配所有索引值为奇数的元素，索引值从0开始
    :eq(index) 匹配一个给定索引值的元素
    :gt(index) 匹配所有大于给定索引值的元素
    :lt(index) 匹配所有小于给定索引值的元素
    :header 匹配如h1，h2，h3……之类的标题元素
    :not(selector) 去除所有与给定选择器匹配的元素
    :animated 匹配所有正在执行动画效果的元素 
    <!DOCTYPE html>
<html>
	<head>
        <title></title>
		    <meta charset="utf-8">
        <style type="text/css">
        	td{
        		font-size:12px;	
        		padding:3px;
        	}
        	.th{
        		background-color:#B6DF48;	
        		font-weight:bold;			
        		text-align:center;		
        	}
        	.even{
        		background-color:#E8F3D1;	
        	}
        	.odd{
        		background-color:#F9FCEF;	
        	}
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
            <tr>
                <td width="11%" height="27">编号</td>
                <td width="14%">祝福对象</td>
                <td width="12%">祝福者</td>
                <td width="33%">字条内容</td>
                <td width="30%">发送时间</td>
            </tr>
            <tr>
                <td height="27">1</td>
                <td>琦琦</td>
                <td>妈妈</td>
                <td>愿你健康快乐的成长！</td>
                <td>2014-08-15 13:06:06</td>
            </tr>
            <tr>
                <td height="27">2</td>
                <td>wgh</td>
                <td>无语</td>
                <td>每天有份好心情！</td>
                <td>2014-08-15 13:26:17</td>
            </tr>
            <tr>
                <td height="27">3</td>
                <td>轻鸿</td>
                <td>blue</td>
                <td>梦想，不论大小，都给它一个可以绽放的机会！</td>
                <td>2014-08-15 13:36:06</td>
            </tr>
            <tr>
                <td height="27">4</td>
                <td>sunck</td>
                <td>轻鸿</td>
                <td>明天会更好！</td>
                <td>2014-08-15 13:46:06</td>
            </tr>
        </table>
        <div>
            <h1>sunck is a very man</h1>
            <h2>sunck is a very man</h2>
            <p>good man</p>
        </div>
        <h1>sunck is a good man</h1>
        <h2>sunck is a nice man</h2>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // 设置奇数行所用的CSS类
                $("tr:even").addClass("even");
                // 设置偶数行所用的CSS类
                $("tr:odd").addClass("odd");
                // 移除even类
                $("tr:first").removeClass("even");
                // 添加th类
                $("tr:first").addClass("th");
                
                console.log($(":header"));//$("*:header")
                console.log($("div>:header"));//$("div>*:header")
            });
        </script>
	</body>
</html>

  • 内容过滤器

    说明：通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

    过滤器 说明
    :contains(txt) 匹配所有包含给定文本的元素
    :empty 匹配所有不包含子元素或者文本的空元素
    :has(selector) 匹配含有selector选择器所匹配元素的元素，注意含有的意思
    :parent 匹配含有子元素的或者文本的元素 
    <!DOCTYPE html>
<html>
	<head>
        <title></title>
		    <meta charset="utf-8">
        <style type="text/css">
        	td{
        		font-size:12px;	
        		padding:3px;
        	}
        	.th{
        		background-color:#B6DF48;	
        		font-weight:bold;			
        		text-align:center;		
        	}
        	.even{
        		background-color:#E8F3D1;	
        	}
        	.odd{
        		background-color:#F9FCEF;	
        	}
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
            <tr>
                <td width="11%" height="27">编号</td>
                <td width="14%">祝福对象</td>
                <td width="12%">祝福者</td>
                <td width="33%">字条内容</td>
                <td width="30%">发送时间</td>
            </tr>
            <tr>
                <td height="27">1</td>
                <td>琦琦</td>
                <td>妈妈</td>
                <td>愿你健康快乐的成长！</td>
                <td>2014-08-15 13:06:06</td>
            </tr>
            <tr>
                <td height="27">2</td>
                <td>wgh</td>
                <td>无语</td>
                <td>每天有份好心情！</td>
                <td>2014-08-15 13:26:17</td>
            </tr>
            <tr>
                <td height="27">3</td>
                <td>轻鸿</td>
                <td>blue</td>
                <td>梦想，不论大小，都给它一个可以绽放的机会！</td>
                <td>2014-08-15 13:36:06</td>
            </tr>
            <tr>
                <td height="27">4</td>
                <td>sunck</td>
                <td>轻鸿</td>
                <td></td>
                <td id="time"><p>2014-08-15 13:46:06</p></td>
            </tr>
        </table>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // 为不为空的单元格设置背景颜色
                $("td:parent").css("background-color","#E8F3D1");
                // 为空的单元格添加默认内容
                $("td:empty").html("暂无内容");	
                // 将含有文本轻鸿的单元格的文字颜色设置为红色
                $("td:contains('轻鸿')").css("color","red");
                // 匹配表格的单元格中含有<p>标签的单元格，注意含有的意思
                // $("td:has(#time)").css("color","yellow");
                $("td:has(p)").css("color","blue");
            });
        </script>
	</body>
</html>

  • 可见性过滤器

    说明：元素的可见状态有两种，分别是隐藏状态和显示状态，可见性过滤器就是利用元素的可见状态匹配元素的

    过滤器 说明
    :visible 匹配所有可见元素
    :hidden 匹配所有不可见元素，在应用时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <input type="text" value="显示的input元素">
        <input type="text" value="我是不显示的input元素" style="display:none">
        <input type="hidden" value="我是隐藏域">
        
        <script type="text/javascript">
            $(document).ready(function(){
                //取得显示的input的值
                console.log($("input:visible").val());
                
                //取得隐藏的文本框的值
                console.log($("input:hidden:eq(0)").val());
                //取得隐藏域的值
                console.log($("input:hidden:eq(1)").val());
            });
        </script>
	</body>
</html>

  • 表单对象的属性过滤器

    说明：表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素

    过滤器 说明
    :checked 匹配所有选中的被选中元素
    :disabled 匹配所有不可用元素
    :enabled 匹配所有可用的元素
    :selected 匹配所有选中的option元素 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form>
            复选框1： <input type="checkbox" checked="checked" value="复选框1"/>
            复选框2： <input type="checkbox" checked="checked" value="复选框2"/>
            复选框3：  <input type="checkbox" value="复选框3"/>
            <br />
            不可用按钮：  <input type="button" value="不可用按钮" disabled><br />
            下拉列表框：
            <select onchange="selectVal()">
                <option value="列表项1">列表项1</option>
                <option value="列表项2">列表项2</option>
                <option value="列表项3">列表项3</option>
            </select>
        </form>
        
        <script type="text/javascript">
            $(document).ready(function(){
                console.log($("input:checked:eq(0)").val());
                console.log($("input:checked:eq(1)").val());
                console.log($("input:checked:eq(2)").val());
                $("input:disabled").val("我是不可用的");
            });
            function selectVal(){
            	alert($("select option:selected").val());
            }
        </script>
	</body>
</html>

  • 子元素过滤器

    说明：子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定

    过滤器 说明
    :first-child 匹配所有给定元素的第一个子元素
    :last-child 匹配所有给定元素的最后一个子元素
    :only-child 如果某个元素是它父元素中唯
    一的子元素，那么将会匹配。如
    果父元素中含有其他元素，则不
    会被匹配
    nth-child(index/even/odd/equation) 匹配没个父元素下的第index个或
    奇偶元素，index从1开始而不是从0开始    		 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <ul>
        	<li>列表选项1</li>
        	<li>列表选项2</li>
        	<li>列表选项3</li>
        	<li>列表选项4</li>
        	<li>列表选项5</li>
        	<li>列表选项6</li>
        </ul>
        <ul>
        	<li>列表选项0</li>
        </ul>
        
        <script type="text/javascript">
            $(document).ready(function(){
                console.log($("ul li:first-child").html());
                console.log($("ul li:last-child").html());
                console.log($("ul li:only-child").html());
                console.log($("ul li:nth-child(3)").html());
            });
        </script>
	</body>
</html>

五、属性选择器

说明：通过元素的属性作为过滤条件进行筛选对象

选择器 说明
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配属性值为value的元素
[attribute!=value] 匹配属性值不等于value的元素
[attribute*=value] 匹配属性值含有value的元素
[attribute^=value] 匹配属性值以value开头的元素
[attribute$=value] 匹配属性值是以value结束的元素
[selector1][selector2]……[selectorN] 复合属性选择器，需要同时满足多个
条件时使用		 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div name="div1">第一个div</div>
        <div name="div2">第二个div</div>
        <div name="div3">第三个div</div>
        <div name="div3">第四个div</div>
        <div name="box">第五个div</div>
        <div name="box1" id="dd">第六个div</div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("div[name]").css("background-color", "green");
                $("div[name=div3]").css("background-color", "yellow");
                $("div[name!=div3]").css("background-color", "#FF4040");
                $("div[name*=box]").css("background-color", "#F5F5F5");
                $("div[name^=box]").css("background-color", "#EED2EE");
                $("div[name$=v3]").css("background-color", "#EE9A00");
                $("div[id][name=box1]").css("background-color", "black");
            });
        </script>
	</body>
</html>

六、表单选择器

说明：表单选择器是匹配经常在表单内出现的元素，但是匹配的元素不一定在表单中

选择器 说明
:input 匹配所有的input元素
:button 匹配所有的普通按钮，即typpe="button"的input
:checkbox 匹配所有的复选框
:file 匹配所有的文件域
:hidden 匹配所有的不可见元素，或者type=“hidden”的元素
:image 匹配所有的图像域
:password 匹配所有的密码域
:radio 匹配所有的单选按钮
:reset 匹配所有的重置按钮，即typpe="reset"的input
:submit 匹配所有的提交按钮，即typpe="submit"的input
:text 匹配所有的单行文本框 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
    	<form>
    	    复选框：<input type="checkbox"/>
    	    单选按钮：<input type="radio"/>
    	    图像域：<input type="image"/><br>
    	    文件域：<input type="file"/><br>
    	    密码域：<input type="password" width="150px"/><br>
    	    文本框：<input type="text" width="150px"/><br>
    	    按  钮：<input type="button" value="按钮"/><br>
    	    重  置：<input type="reset" value=""/><br>
    	    提  交：<input type="submit" value=""><br>
    	    隐藏域： <input type="hidden" value="这是隐藏的元素">
    	   <div id="testDiv"><font color="blue">隐藏域的值：</font></div>
    	</form>
        
        <script type="text/javascript">
            $(document).ready(function(){
                //注意空格问题
                // $(":input").css("background-color", "red");
                // $("form :input").css("background-color", "red");
                //选中复选框
                $(":checkbox").attr("checked","checked");
                //选中单选框			
                $(":radio").attr("checked","true");		
                //设置图片路径				
                $(":image").attr("src","images/fish1.jpg");	
                //隐藏文件域			
                $(":file").hide();				
                //设置密码域的值					
                $(":password").val("123");			
                //设置文本框的值				
                $(":text").val("文本框");			
                //设置按钮不可用					
                $(":button").attr("disabled","disabled");	
                //设置重置按钮的值			
                $(":reset").val("重置按钮");			
                //设置提交按钮的值				
                $(":submit").val("提交按钮");	
                //显示隐藏域的值					
                $("#testDiv").append($("input:hidden:eq(1)").val());
            });
        </script>
	</body>
</html>

七、选择器使用注意事项

  • 选择器中含有特殊符号

    前因：选择器中含有“.”、“#”、“(”或“]”等特殊字符

    说明：根据W3C规定，属性值中是不能包含这些特殊字符的,但在实际项目应用中偶尔也会遇到这种表达式中含有“#”和“]”等特殊字符的情况。这时，如果按照普通方式去处理的话就会出现错误。解决这类错误的方法是使用转义符号将其转义

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
    	<div id="box#test" style="width: 100px;height: 100px;background-color: red"></div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#box\\#test").css("background-color", "yellow");
            });
        </script>
	</body>
</html>

  • 选择器中含有空格

    说明：在实际应用当中，选择器中含有空格也是不容忽视的，多一个空格或者少一个空格也会得到截然不同的结果

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
    	<div class="name">
            <div style="display: none;">小科</div>
            <div style="display: none;">小王</div>
            <div style="display: none;">小张</div>
            <div style="display: none;" class="name">小辛</div>
    	</div>
    	<div style="display: none;" class="name">小杨</div>
    	<div style="display: none;" class="name">小刘</div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // 带空格的jQuery选择器为后代选择器
                // 选择class为“name”的元素之内的隐藏元素，也就是内容为小科、小王、小张、小辛的4个div元素
                var $l_a = $(".name :hidden");
                // 不带空格的jQuery选择器为过滤选择器
                // 获取隐藏的class为“name”的元素，即内容为小辛、小杨、小刘的div元素
                var $l_b = $(".name:hidden");
                
                var len_a = $l_a.length;
                var len_b = $l_b.length;
                
                console.log("$('.name :hidden') = " + len_a);  // 输出4
                console.log("$('.name:hidden')  = " + len_b);  // 输出3
            });
        </script>
	</body>
</html>
需要 登录 才可以提问哦
头像
：
回复