首页 > 代码库 > 基本选择器

基本选择器

2024-07-26 10:28:59   221人阅读

基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，

通过基本选择器可以实现大多数页面元素的查找，其详细说明如下表所示。

选择器功能返回值
#id根据给定的ID匹配一个元素单个元素
element根据给定的元素名匹配所有元素元素集合
.class根据给定的类匹配元素元素集合
*匹配所有元素元素集合
selector1,selectorN将每一个选择器匹配到的元素合并后一起返回元素集合

 Demo如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery基本选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9     body{font-size:12px;text-align:center}10     .clsFrame{width:300px;height:100px}11     .clsFrame div,span{display:none;float:left;12                        width:65px;height:65px;border:solid 1px #ccc;13                        margin:8px}14     .clsOne{background-color:#eee}15 </style>16 <script type="text/javascript">17     $(function(){    // ID 匹配元素18         //$("#divOne").css("display","block");19     });20     $(function(){    // 元素名匹配21         //$("div span").css("display","block");22     });23     $(function(){    // 类匹配元素24         //$(".clsFrame .clsOne").css("display","block");25     });26     $(function(){    // 匹配所有元素27         //$("*").css("display","block");28     });29     $(function(){    // 合并匹配元素30         $("#divOne,span").css("display","block");31     });     32 </script>33 </head>34 <body>35 <div class="clsFrame">36     <div id="divOne">ID</div>37     <div class="clsOne">CLASS</div>38     <span>SPAN</span>39 </div>40 </body>41 </html>
Demo

 

基本选择器


联系
我们