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 只是小人物阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部

只是小人物

公告