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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
JS中数据结构之栈
Jan 01 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
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中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
详解JS函数重载
2014/12/04 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
js判断节假日实例代码
2017/12/27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python语言元素知识点详解
2019/05/15 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python数据正态性检验实现过程
2020/04/18 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
学习型党组织建设经验材料
2014/05/26 职场文书
商超业务员岗位职责
2015/02/13 职场文书
出生证明范本
2015/06/15 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js