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实现拖动示例代码
Nov 01 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
vue中锚点的三种方法
Jul 06 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 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
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
linux下python抓屏实现方法
2015/05/22 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python3中详解fabfile的编写
2018/06/24 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python基于template实现字符串替换
2020/11/27 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
类的核心特性有哪些
2014/01/01 面试题
自我鉴定范文
2013/11/10 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
校车安全责任书
2014/08/25 职场文书
2014年药房工作总结
2014/11/22 职场文书
2014企业年终工作总结
2014/12/23 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
《社戏》教学反思
2016/02/22 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js
canvas 中如何实现物体的框选
2022/08/05 Javascript