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


Posted in Javascript onMay 18, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python break语句详解
2014/03/11 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python中的decorator的作用详解
2018/07/26 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python 批量将中文名转换为拼音
2021/02/07 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
护士思想汇报
2014/01/12 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
工作收入证明模板
2015/06/12 职场文书
小学中队长竞选稿
2015/11/20 职场文书
SQL基础的查询语句
2021/11/11 MySQL