JQuery 学习笔记 选择器之三

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>无标题文档</title>

  <script src="js/jquery-1.3.2.js"></script>

  <script type="text/javascript"><!--

  $(function(){

  $("#aFirst").click(function(){

  $("#Result").html("");

  $("#Result").html($("ul:first").html());

  })

  $("#aLast").click(function(){

  $("#Result").html("");

  $("#Result").html($("ul:last").html());

  })

  $("#aNot").click(function(){

  $("#Result").html("");

  $("#Result").html($("input:not(:checked)").attr("id"));

  })

  $("#aEven").click(function(){

  $("#Result").html("");

  $("ul:even").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  $("#aOdd").click(function(){

  $("#Result").html("");

  $("ul:odd").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  $("#aEq").click(function(){

  $("#Result").html("");

  $("ul:eq(3)").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  $("#aGt").click(function(){

  $("#Result").html("");

  $("ul:gt(3)").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  $("#aLt").click(function(){

  $("#Result").html("");

  $("ul:lt(3)").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  $("#aHeader").click(function(){

  $("#Result").html("");

  $(":header").each(function(){

  $("#Result").html($("#Result").html() + $(this).html());

  })

  })

  })

  // --></script>

  </head>

  <body>

  <div>

  <h1>h1</h1>

  <h2>h2</h2>

  <li>li1

  <ul>1</ul>

  <ul>2</ul>

  <ul>3</ul>

  <ul>4</ul>

  </li>

  <li>li2

  <ul>5</ul>

  <ul>6</ul>

  </li>

  <li>li3

  </li>

  </div>

  <input type="checkbox" id="checkbox1" />checkbox1

  <input name="flower" type="checkbox" id="checkbox2" checked="checked" />checkbox2

  <br />

  <a href="#" id="aFirst">显示第一个ul节点的值</a>

  <a href="#" id="aLast">显示最后一个ul节点的值</a>

  <a href="#" id="aNot">显示未选择中checkbox的ID</a>

  <a href="#" id="aEven">显示索引为偶数的ul内容</a>

  <a href="#" id="aOdd">显示索引为奇数的ul内容</a>

  <a href="#" id="aEq">显示索引为3的ul内容</a>

  <a href="#" id="aGt">显示索引大于3的ul内容</a>

  <a href="#" id="aLt">显示索引小于3的ul内容</a>

  <a href="#" id="aHeader">显示页面标题内容</a>

  <br />

  Result:

  <br />

  <div id="Result">

  </div>

  </body>

  </html>

  这节好像没有什么课外知识点,哈,那现在就进入正题咯

  1.$("TabName:first")

  描述:可获取某种节点的第一个节点,如例子中有6个ul,使用$("ul:first")即可获取到首个ul结点

  返回值:Element;

  2.$("TabName:Last")

  描述:与上一个用法差不多,区别只在于此方法用于获取最后一个节点

  返回值:Element;

  3.$("TabName:not(:attribute)")

  描述:此方法可实现一些简单的选择器过滤,如例子中,$("input:not(:checked)")就选择了未选择的checkbox元素,此方法尚在实践中,好像就只能对些值为bool的属性进行过滤,例子中相当于选择checked为false的input。

  返回值:Array(Element);

  4.$("TabName:even")

  描述:用于获取某种节点的偶数索引节点的集合,这边要强调一点,这边的索引是从0开始的所以例子中aEven点击后所获取的是第1、3、5的ul结点

  返回值:Array(Element);

  5.$("TagName:odd")

  描述:与上个方法类似,唯一的区别就是这获取的是奇数节点的集合。

  返回值:Array(Element);

  6.$("TagName:eq(index)")

  描述:用于获取某种节点集合中的index索引位置的节点

  返回值:Array(Element);

  7.$("TagName:gt(index)")

  描述:用于获取某种节点集合中,索引大于index的节点集合

  返回值:Array(Element);

  8.$("TagName:lt(index)")

  描述:用于获取某种节点集合中,索引小于index的节点集合

  返回值:Array(Element);

  9.$(":header")

  描述:用于获取页面中h1, h2, h3之类的标题节点集合

  返回值:Array(Element);