码迷,mamicode.com
首页 > 其他好文 > 详细

基本选择器

时间:2014-10-10 17:53:34      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   java   

基本选择器是jQuery中使用最频繁的选择器,它由元素IdClass元素名多个选择组成,

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

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

 Demo如下:

bubuko.com,布布扣
 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="../../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

 

基本选择器

标签:style   blog   http   color   io   os   使用   ar   java   

原文地址:http://www.cnblogs.com/duffy/p/4016034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!