jquery -- 选择器篇

1.从$开始

 

对于熟悉prototype的朋友，$符号应该很熟悉,

prototype: var element = $('eleId')
jquery: var element = $('#eleId')
DOM: var element = document.getElementById('eleId')

以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:

$('#j1').html()
 
<div id="j1">Hello, jQuery!</content>

2.通过xpath+css来获取你想要的...
   1).
在这段例子中我们需要用到的HTML代码

<div class="contentToChange">
    <p class="alert">警告!警告!警告!警告!</p>
    <p class="firstParagraph">我是第一段</p>
    <p class="secondParagraph">第二段,哎,火箭输球了 0比33!火箭替补钉上耻辱柱 <em>姚麦</em>身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因</p>
</div>

jquery代码:

//获取div.contentToChange下p标记数组长度
  alert($('div.contentToChange p').size()) 

//通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
  $('div.contentToChange p.firstParagraph').slideToggle('slow');

//找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字  
  $('div.contentToChange p:not(.alert)').append('<strong class="addText">这是新加的文字</strong>');

//找到所有为strong元素且css为addText的元素,然后删除
  $('strong.addText').remove();

//找到P标记下css为secondParagraph的元素,然后渐隐
  $('div.contentToChange p.secondParagraph').hide('slow');

//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
  $('div.contentToChange em').css({color:"#993300",fontWeight:"bold"});

//添加css样式
  $('div.contentToChange p.secondParagraph').addClass('new')

//删除css样式
  $('div.contentToChange p.secondParagraph').removeClass('new');

 

   2).

在这段例子中我们需要用到的HTML代码:

<div id="jqdt" style="width: 400px; padding: 1em; border: 1px solid #000">
 <p class="goofy"> 这个 <em>段落</em> 包括了一些css属性为"groof"的 <strong>文本</strong>, 它还具有一个 <a href="http://www.englishrules.com" class="external text" title="http://www.englishrules.com">外部连接</a>, 一些 <code>$(代码)</code>, 和一个超连接属性是以 <a href="#dt-link3_same-page_link" title="">#打头的超连接</a>. </p>
 <ol>
  <li>list item 1 with dummy link to <a href="/action/edit/Silly.pdf" class="new" title="Silly.pdf">silly.pdf</a></li>
  <li class="groof"><em>list <strong>item</strong> 2</em> with class="<strong>groof</strong>"</li>
  <li>list item 3<span style="display: none;"> SURPRISE!</span></li>
  <li><strong>list item 4</strong> with silly link to <a href="/action/edit/Silly.pdf_silly.pdf" class="new" title="Silly.pdf silly.pdf">silly.pdf silly.pdf</a></li>
  <li><a href="contains.php">支持火箭</a>,支持MM!</li>
 </ol>
</div>

jquery代码

//获取第一个list item
$('#jqdt ol li:eq(0)')
//等价于
$('#jqdt').find('li:eq(0)') //以下同

//获取所有偶数行的list item
$('#jqdt ol li:even')

//获取索引小于3的list item
$('#jqdt ol li:lt(3)')

//获取所有li中css不为groof的list item
$('#jqdt ol li:not(.groof)')

//获取P标记下所有超连接属性值以'#'打头的元素
$('p a[@href*=#]')

//获取所有code元素和css为groof的li元素的集合
$('#jqdt code, li.groof')

//先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素
$('#jqdt ol .groof > strong')

//首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为'pdf'结尾的一级子节点
$('#jqdt ol li + li > a[@href$=pdf]')

//找到所有已隐藏的span元素
$('span:visible')

//找到超连接中包含火箭字样的元素
$('li a:contains("火箭")')

 

注：
$('#jqdt ol.groof > strong') 其中的>代表只访问下一级子节点中包含strong的元素，
如果改为 $('#jqdt ol.groof strong') 则访问所有下级子节点中的strong元素，包括子节点的子节点等。

 3).
常用的自定义选择器
  :eq(0) 选择索引等于0也就是第一个元素

  :gt(4) 选择所有索引大于4的元素

  :lt(4) 选择所有索引小于4的元素

  :first 等价于 :eq(0)

  :last 选择最后一个元素

  :parent 选择所有含有子节点的元素 (including text).

  :contains('test') 选择含有指定文本的元素

  :visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)

  :hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)

例：

$('p:first').css('fontWeight','bold')
   $('div:hidden').show();
   $("div:contains('test')").hide();

   $('input[@name=bar]').val() //获取名字为bar的input表单的值
   $('select[@name=slt]').val() //获取名为slt的下拉菜单的选择中值
   $('input[@type=radio][@checked]') //获取所有被选中的radio表单

 

表单选择器

  :input Selects all form elements (input, select, textarea, button).

  :text Selects all text fields (type="text").

  :password Selects all password fields (type="password").

  :radio Selects all radio fields (type="radio").

  :checkbox Selects all checkbox fields (type="checkbox").

  :submit Selects all submit buttons (type="submit").

  :image Selects all form images (type="image").

  :reset Selects all reset buttons (type="reset").

  :button Selects all other buttons (type="button").

例：

  $('myForm:input')
  $('input:radio',myForm)
  //:radio等价于[@type=radio]

附例程2的HTML代码:

  1<html>
  2<head>
  3    <title>jquery</title>    
  4    <script language="javascript" src="jquery-latest.js"></script>
  5    <script language="javascript">
  6        $(function() {
  7            $('#dt-link1').toggle(function() {
  8                $('#jqdt ol li:eq(0)').css('background','#ff0');
  9                //$('#jqdt').find('li:eq(0)').css('background','#ff0');
 10                return false;
 11            }, function() {
 12                $('#jqdt ol li:eq(0)').css('background','transparent');
 13                return false;
 14            });
 15            
 16            $('#dt-link2').toggle(function() {
 17                $('#jqdt ol li:even').css('background','#ff0');
 18                return false;
 19            }, function() {
 20                $('#jqdt ol li:even').css('background','transparent');
 21                return false;
 22            });        
 23            
 24            $('#dt-link3').toggle(function() {
 25                $('#jqdt ol li:lt(3)').css('background','#ff0');
 26                return false;
 27            }, function() {
 28                $('#jqdt ol li:lt(3)').css('background','transparent');
 29                return false;
 30            });
 31            
 32            $('#dt-link4').toggle(function() {
 33                $('#jqdt ol li:not(.groof)').css('background','#ff0');
 34                return false;
 35            }, function() {
 36                $('#jqdt ol li:not(.groof)').css('background','transparent');
 37                return false;
 38            });
 39            
 40            $('#dt-link5').toggle(function() {
 41                $('p a[@href*=#]').css('background','#ff0');
 42                return false;
 43            }, function() {
 44                $('p a[@href*=#]').css('background','transparent');
 45                return false;
 46            });
 47            
 48            $('#dt-link6').toggle(function() {
 49                $('#jqdt code, li.groof').css('background','#ff0');
 50                return false;
 51            }, function() {
 52                $('#jqdt code, li.groof').css('background','transparent');
 53                return false;
 54            });
 55            
 56            $('#dt-link7').toggle(function() {
 57                $('#jqdt ol .groof > strong').css('background','#ff0');
 58                return false;
 59            }, function() {
 60                $('#jqdt ol .groof > strong').css('background','transparent');
 61                return false;
 62            });        
 63            
 64            $('#dt-link8').toggle(function() {
 65                $('#jqdt ol li + li > a[@href$=pdf]').css('background','#ff0');
 66                return false;
 67            }, function() {
 68                $('#jqdt ol li + li > a[@href$=pdf]').css('background','transparent');
 69                return false;
 70            });            
 71            
 72            $('#dt-link9').toggle(function() {
 73                $('span:hidden').show().css('background','#ff0');
 74                return false;
 75            }, function() {
 76                $('span:visible').hide().css('background','transparent');
 77                return false;
 78            });        
 79            
 80            $('#dt-link10').toggle(function() {
 81                $('li a:contains("火箭")').css('background','#ff0');
 82                return false;
 83            }, function() {
 84                $('li a:contains("火箭")').css('background','transparent');
 85                return false;
 86            });                                    
 87        });
 88        
 89    </script>
 90</head>
 91
 92<body>
 93<div id="jqdt" style="width: 400px; padding: 1em; border: 1px solid #000">
 94    <p class="goofy"> 这个 <em>段落</em> 包括了一些css属性为"groof"的 <strong>文本</strong>, 它还具有一个 <a href="http://www.englishrules.com" class="external text" title="http://www.englishrules.com">外部连接</a>, 一些 <code>$(代码)</code>, 和一个超连接属性是以 <a href="#dt-link3_same-page_link" title="">#打头的超连接</a>. </p>
 95    <ol>
 96        <li>list item 1 with dummy link to <a href="/action/edit/Silly.pdf" class="new" title="Silly.pdf">silly.pdf</a></li>
 97        <li class="groof"><em>list <strong>item</strong> 2</em> with class="<strong>groof</strong>"</li>
 98        <li>list item 3<span style="display: none;"> SURPRISE!</span></li>
 99        <li><strong>list item 4</strong> with silly link to <a href="/action/edit/Silly.pdf_silly.pdf" class="new" title="Silly.pdf silly.pdf">silly.pdf silly.pdf</a></li>
100        <li><a href="contains.php">支持火箭</a>,支持MM!</li>
101    </ol>
102</div>
103
104<div id="btns">
105    <ul>
106        <li><input type="submit" id="dt-link1" value="toggle" /><code>$('li:eq(0)')</code>获取第一个list item</li>
107        <li><input type="submit" id="dt-link2" value="toggle" /><code>$('li:even')</code>获取所有偶数行的list item</li>
108        <li><input type="submit" id="dt-link3" value="toggle" /><code>$('li:lt(3)')</code>获取索引小于3的list item</li>
109        <li><input type="submit" id="dt-link4" value="toggle" /><code>$('li:not(.groof)')</code>获取所有li中css不为groof的list item</li>
110        <li><input type="submit" id="dt-link5" value="toggle" /><code>$('p a[@href*=#]')</code>获取P标记下所有超连接属性值以'#'打头的元素</li>
111        <li><input type="submit" id="dt-link6" value="toggle" /><code>$('code, li.groof')</code>获取所有code元素和css为groof的li元素的集合</li>
112        <li><input type="submit" id="dt-link7" value="toggle" /><code>$('ol .groof > strong')</code>先获取ol下css属性为groof的A, 然后找到节点A下的一级子节点strong元素</li>
113        <li><input type="submit" id="dt-link8" value="toggle" /><code>$('li + li > a[@href$=pdf]')</code>首先找到所有以list item作为自己的前一节点的list item元素(所以不会选择到第一个list item,因为它的前面没有list item节点了).然后在这些元素中找到超连接属性值以为'pdf'结尾的一级子节点</li>
114        <li><input type="submit" id="dt-link9" value="toggle" /><code>$('span:hidden')</code>找到所有已隐藏的span元素
115        <li><input type="submit" id="dt-link10" value="toggle" /><code>$('li a:contains("火箭")')</code>找到超连接中包含火箭字样的元素</li>
116    </ul>
117</div>
118</body>
119
120</html>

注：最近在学习jquery，就当是个学习笔记吧，以上大部分内容来自jquery主页的教程，有些则是自己翻译过来的，肯定有不足和错误的地方，欢迎大家批评指正。