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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue实现div单选多选功能
Jul 16 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
对python中return和print的一些理解
2017/08/18 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
商场中秋节活动方案
2014/02/07 职场文书
趣味游戏活动方案
2014/02/07 职场文书
员工晚婚的请假条
2014/02/08 职场文书
大课间体育活动方案
2014/03/12 职场文书
小学感恩节活动总结
2015/03/24 职场文书
中学推普周活动总结
2015/05/07 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
使用Django框架创建项目
2022/06/10 Python