JQuery中基础过滤选择器用法实例分析

本文实例讲述了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>
<style type="text/css">
#main{
 width:600px;
 border:1px solid green;
 margin:auto;
 padding:10px;
}
#tbl{
 border-collapse:collapse;
 border-top:1px solid red;
 border-left:1px solid red;
 margin:auto;
}
#tbl td{
 width:60px;
 height:60px;
 border-collapse:collapse;
 border-bottom:1px solid red;
 border-right:1px solid red;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  //=============举例1========================
  //:first 说明: 匹配找到的第一个元素
  //....<1>修改第一个单元格的背景色
  //var $tds = $("#tbl td:first");
  //$tds.css("backgroundColor", "blue");
  //....<2>修改第一行的背景色
  //var $trs = $("#tbl tr:first");
  //$trs.css("backgroundColor", "blue");
  //=============举例2========================
  //:last 说明: 匹配找到的最后一个元素.与 :first 相对应.
  //...<1>修改随后一个单元格的背景色
  //var $tds = $("#tbl td:last");
  //$tds.css("backgroundColor", "blue");
  //=============举例3========================
  //:not(selector) 去除所有与给定选择器匹配的元素.有点类似于”非”
  //...<1>把所有class不为tdClass的列的文本进行修改
  //var $tds = $("#tbl td:not(.tdClass)");
  //$tds.text("Not tdClass");
  //=============举例4========================
  //:even 说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.
  //例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
  //...<1>把索引值为偶数的行变成黄色
  //var $trs = $("#tbl tr:even");
  //$trs.css("backgroundColor", "yellow");
  //=============举例5========================
  //: odd 说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
  //var $trs = $("#tbl tr:odd");
  //$trs.css("backgroundColor", "yellow");
  //=============举例6========================
  //:eq(index) 说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
  //...<1>设置第二个单元格的背景色
  //var $tds = $("#tbl td:eq(1)");
  //$tds.css("backgroundColor", "gray");
  //=============举例6========================
  //:gt(index) 说明: 匹配所有大于给定索引值的元素.
  //...<1>把下标索引大于1的所有单元格背景色设置为灰色
  //var $tds = $("#tbl td:gt(1)");
  //$tds.css("backgroundColor", "gray");
  //=============举例7========================
  //:lt(index) 说明: 匹配所有小于给定索引值的元素.
  //...<1>把下标索引小于3的所有单元格背景色设置为灰色
  var $tds = $("#tbl td:lt(3)");
  $tds.css("backgroundColor", "gray");
  //=============举例8========================
  //:header(固定写法) 说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
  //...<1>把所有的h标签背景色进行修改
  var $hs = $(":header");
  $hs.css("backgroundColor", "gold");
  //=============举例8========================
  //slice 获取下标范围内元素
  var $trs = $("#tbl tr").slice(1, 3);
  $trs.css("backgroundColor", "gold");
});
</script>
</head>
<body>
<div id="main">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<table id="tbl">
  <tr>
    <td>1</td><td>1</td><td>1</td>
  </tr>
  <tr>
    <td class="tdClass">2</td><td>2</td><td>2</td>
  </tr>
  <tr>
    <td>3</td><td>3</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>4</td><td class="tdClass">4</td>
  </tr>
  <tr>
    <td>5</td><td>5</td><td>5</td>
  </tr>
  <tr>
    <td>6</td><td>6</td><td class="tdClass">6</td>
  </tr>
</table>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery过滤选择器详解

    jQuery过滤选择器详解

    过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa

  • jquery表单对象属性过滤选择器实例分析

    本文实例讲述了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"> &

  • jQuery内容过滤选择器用法示例

    jQuery内容过滤选择器用法示例

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • jQuery子属性过滤选择器用法分析

    jQuery子属性过滤选择器用法分析

    本文实例讲述了jQuery子属性过滤选择器用法.分享给大家供大家参考.具体分析如下: 1. :first-child选择器 用于选择其父级的第一个子元素的所有元素,格式: 复制代码 代码如下: $("selector:first-child") 如: 复制代码 代码如下: $("ul:first-child").css("text-decoration", "underline").css("color",

  • 举例讲解jQuery中可见性过滤选择器的使用

    举例讲解jQuery中可见性过滤选择器的使用

    可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden  $(':hidden')  选取所有不可见元素 集合元素 :visible  $(':visible')  选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu

  • jQuery可见性过滤选择器用法示例

    jQuery可见性过滤选择器用法示例

    本文实例讲述了jQuery可见性过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="js/jquery-1.10.1.mi

  • jQuery内容过滤选择器用法分析

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考.具体分析如下: 在HTML文档中,元素的内容可以是文本或者子元素,如果将某个选择器或者内容过滤选择器一起使用,就可以从查询到的元素中进一步筛选出具有给定 文本或者子元素的元素 1. :contains()选择器 用于选择包含给定文本的所有元素,格式: 复制代码 代码如下: $("selector1:contains(text)") 如: 复制代码 代码如下: $("p:contains('text')&quo

  • 简单讲解jQuery中的子元素过滤选择器

    简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素. $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 $('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 $('li:nth-child(odd)').css(

  • jQuery子元素过滤选择器用法示例

    jQuery子元素过滤选择器用法示例

    本文实例讲述了jQuery子元素过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="te

  • jQuery过滤选择器用法分析

    jQuery过滤选择器用法分析

    本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考.具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值.内容.属性.子元素位置.表单 域属性以及可见性作为筛选条件 1. :first选择器 格式: 复制代码 代码如下: $("selector: first") 用于对当前jQuery集合进行过滤并选择出第一个匹配元素 实例: 复制代码 代码如下: $("td:first").c

  • JQuery中属性过滤选择器用法实例分析

    本文实例讲述了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"> <he

  • jquery可见性过滤选择器使用示例

    复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //$('span:hidden').addClass('class1').show(); $(':hidden')

  • jQuery过滤选择器经典应用

    本文实例为大家分享了经典的jQuery过滤选择器应用,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <style type="text/css"> #txt_show {display:none; color:#00C

随机推荐