只是小人物

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
jQuery选择器

 

jQuery选择器
 jQuery选择器模仿css选择器的语法，其作用是，查找符合选择器要求的节点。

 a.基本选择器 
  #id
  .class
  element
  selector1,select2..selectn
  *
例子：
 

<html>
<head>
<!-- 基本选择器 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
 function f1(){
  var $obj = $('#d1');
  $obj.css('color','red');
 }
 
 function f2(){
  //$(选择器): 有可能返回多个节点，
  //可以使用jQuery对象提供的遍历方法来遍历
  var $obj = $('.s1');
  $obj.css('color','green').css('font-size','60px');
 }
 
 function f3(){
  var $obj = $('div');
  $obj.css('font-size','60px');
 }
 
 function f4(){
  var $obj = $('#d1,p');
  $obj.css('font-size','60px');
 }
 
 function f5(){
  var $obj = $('*');
  $obj.css('font-size','60px');
 }
</script>
</head>
<body style="font-size:30px;">
 <div id="d1">hello jQuery</div>
 <div class="s1">hello java</div>
 <p class="s1">hello c</p>
 <input type="button" value="基本选择器" 
 onclick="f5();"/>
</body>
</html>

 

 b.层次选择器
  select1 select2
  select1>select2
  select1+select2
  select1~select2
  
例子：

 1 <html>
 2 <!-- 层级选择器 -->
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" 
 7 src="../js/jquery-1.4.3.js"></script>
 8 <script type="text/javascript">
 9  function f1(){
10   var $obj = $('#d0 div');
11   $obj.css('background-color','yellow');
12  }
13  
14  function f2(){
15   var $obj = $('#d0>div');
16   $obj.css('background-color','yellow');
17  }
18  
19  function f3(){
20   var $obj = $('#d0+span');
21   $obj.css('font-size','60px');
22  }
23  
24  function f4(){
25   var $obj = $('#d0~span');
26   $obj.css('font-size','60px');
27  }
28 </script>
29 </head>
30 <body style="font-size:30px;">
31  <span>hello 7</span>
32  <div id="d0">
33   <div id="d1">hello 1</div>
34   <div id="d2" style="width:200px;height:200px;
35   background-color:red;">
36    <div id="d3" style="width:100px;height:100px;
37    background-color:green">hello 3</div>
38   </div>
39   <p>hello 4</p>
40  </div>
41  <span>hello 5</span><br/>
42  <span>hello 6</span>
43  <input type="button" value="层级选择器" 
44  onclick="f4();"/>
45  
46 </body>
47 </html>

 

 
 
4.过滤选择器
 (1)基本过滤选择器
  :first
  :last
  :not(selector)
  :even
  :odd
  :eq(index)
  :gt(index)
  :lt(index)
  
  例子:

<html>
<!-- 过滤选择器  基本-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
 function f1(){
  $('table tr:first')
  .css('background-color','#cccccc');
 }
 
 function f2(){
  $('table tr:not(#t2)')
  .css('background-color','red');
 }
 
 function f3(){
  $('table tr:first')
  .css('background-color','#cccccc');
  $('tbody tr:odd').css('background-color','#ffe8dc');
  $('tbody tr:even').css('background-color','yellow');
 }
 
 function f4(){
  $('tbody tr:eq(1)').css('background-color','yellow');
 }
</script>
</head>
<body style="font-size:30px;">
 <table border="1" width="60%" cellpadding="0"
  cellspacing="0">
   <thead>
   <tr><td>id</td><td>name</td></tr>
  </thead>
  <tbody>
   <tr><td>1</td><td>zs</td></tr>
   <tr id="t2"><td>2</td><td>ww</td></tr>
   <tr><td>3</td><td>ss</td></tr>
  </tbody>
 </table>
 <input type="button" value="基本过滤选择器" 
 onclick="f4();"/>
</body>
</html>

 

 (2)内容过滤选择器 
  :contains(text)
  :empty
  :has(selector)
  :parent
例子：

<html>
<!-- 内容过滤 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
 function f1(){
  $('div:contains(你好)').css('font-size','60px');
 }
 
 function f2(){
  $('div:empty').html('aaaa');
 }
 
 function f3(){
  $('div:has(p)').css('color','blue');
 }
 
 function f4(){
  $('div:parent').css('color','green');
 }
</script>
</head>
<body style="font-size:30px;">
<div>你好</div>
<div></div>
<div>
 <p>hello</p>
</div>
<input type="button" value="内容过滤选择器" 
 onclick="f4();"/>
</body>
</html>
 (3)可见性过滤选择器
  :hidden
  :visible
例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
 function f1(){
  $('div:hidden').css('display','block');
 }
 
 function f2(){
  $('div:visible').css('font-size','60px');
 }
 
 function f3(){
  alert($('input:hidden').val());
 }
</script>
</head>
<body style="font-size:30px;">
<div style="display:none;">hello jQuery</div>
<div>hello java</div>
<input type="hidden" name="userId" value="123"/>
<input type="button" value="可见性过滤选择器" 
 onclick="f3();"/>
</body>
</html>

 

 (4)属性过滤选择器
  [attribute]
  [attribute=value]
例子：

<html>
<!-- 属性过滤选择器 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
 function f1(){
  $('div[id]').html('hello 123');
 }
 
 function f2(){
  $('div[class!=s1]').html('hello 123');
 }
</script>
</head>
<body style="font-size:30px;"> 
 <div id="d1">hello 1</div>
 <div class="s1">hello 2</div>
 <div class="s2">hello 3</div>
 <input type="button" value="属性过滤选择器" 
 onclick="f2();"/>
 
 
</body>
</html>

 

posted on 2012-08-06 13:13  只是小人物  阅读(254)  评论(0)  编辑  收藏  举报