search

Home  >  Article  >  Web Front-end  >  Example analysis of basic filter selector usage in JQuery_jquery

Example analysis of basic filter selector usage in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:381038browse

The example in this article describes the usage of basic filter selectors in JQuery. Share it with everyone for your reference. The details are as follows: 

<!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>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Jquery method to dynamically switch pictures_jqueryNext article：Jquery method to dynamically switch pictures_jquery

Related articles

See more