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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
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脚本的10个技巧(6)
2006/10/09 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python flask安装和命令详解
2019/04/02 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python 多进程队列数据处理详解
2019/12/23 Python
python爬取音频下载的示例代码
2020/10/19 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
领班岗位职责范文
2014/02/06 职场文书
小学生安全责任书
2014/07/25 职场文书
年检委托书
2014/08/30 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
雷锋电影观后感
2015/06/10 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python