jQuery高级选择符与遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
a{
text-decoration: none;
}
.selected{
background-color: red;
}
.alt{
background-color: antiquewhite;
color:brown;
}
</style>
</head>
<body>
<script>
(function($){
$.extend($.expr[":"],{
//element:当前考虑的DOM元素。
//index:DOM元素在结果集中的索引
//matches:数组，包含用于解析这个选择符的正则表达式的解析结果
// 一般来说，matches[3]是这个数组中唯一有用的值
// :group(b),则matches[3]包含的值就是b,也就是括号中的文本
//set:匹配当前元素的整个DOM元素集合
group:function(element,index,matches,set){
var num=parseInt(matches[3],10);
if(isNaN(num)){
return false;
}
return index % (num*2) <num;
}
});
})(jQuery);
$(document).ready(function(){
//使用缓存来改进性能
var $news=$('#news');
function stripe(){
//通过连缀来改进性能
// $('#news').find('tr.alt').removeClass('alt').find('tbody')
$news.find('tr.alt').removeClass('alt');
$news.find('tbody').each(function(){
//tbody下面可见的包含td的tr对象
$(this).children(':visible').has('td')
.filter(
// ':group(3)'
function(index){
return (index%4)<2;
}
).addClass('alt'); });
}
stripe();
//动态筛选表格内容
$('#topics a').click(function(event){
event.preventDefault();
var topic=$(this).text();
$('#topics a.selected').removeClass('selected');
$(this).addClass('selected');
$('#news tr').show();
if(topic!='All'){
//#news tr找到表格中所有的行，
//:has()从当前被选中的元素中挑选出那些包含指定元素的元素
//:contains()只会匹配那些某个单元格包含指定文本的行
// $('#news tr:has(td):not(:contains("'+topic+'"))').hide();
$('#news').find('tr:has(td)').not(
//回调函数返回true,那么被检测的元素就会被排除到结果集之外
function(){
//检测每一行的子元素，查找第四个子元素，对他的文本进行简单的测试
return $(this).children(':nth-child(4)').text()==topic;
}).hide();
}
stripe();
});
//为表格添加条纹
// $('#news').find('tr:nth-child(even)').addClass('alt');
// $('#news tbody').each(function(){
// $(this).children().has('td').filter(function(index){
// return (index%4)<2;
// }).addClass('alt');
// })
//高级的表格条纹效果，如果按主题来筛选，就会出现奇怪的现象
});
</script>
<div id="topics">
Topics:
<a href="topics/all.html" class="selected">All</a>
<a href="topics/community.html" >Community</a>
<a href="topics/confererces.html" >Conferences</a>
<a href="topics/documentation.html" >Documentation</a>
</div>
<table id="news">
<thead>
<tr>
<th>Date</th>
<th>Headline</th>
<th>Author</th>
<th>Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">2011</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<th colspan="4">2011</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<th colspan="4">2011</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released Community</td>
<td>John Resig</td>
<td>Documentation</td>
</tr> </tbody>
<tbody>
<tr>
<th colspan="4">2012</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr id="release">
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<th colspan="4">2012</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2013</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<th colspan="4">2013</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Apr 14</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
</tbody>
</table>
</body>
</html>
页面二：
jQuery高级选择符与遍历的更多相关文章
- jquery 之选择符
css:选择符$('#selected-plays > li') 使用了子元素组合符,查找 ID 为 selected-plays 的元素的子元素( > )中所有的列表 li$('#sel ...
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- jquery 获取选择符
1.工厂函数$() 标签名:$('p') 取得文档中的所有段落 ID:$('#some-id') 取得文档中具有对应的some-id ID的一个元素 类:$('.some-class') 取得文档中带 ...
- CSS_高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...
- JQuery高级(一)
JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing], ...
- JQuery高级笔记
## 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 ## ...
- JQuery 高级
来源于传智播客老师发的笔记 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默 ...
- Web前端新人笔记之jquery选择符
jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...
- JQuery选择符的理解与应用
JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强.本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学 ...
随机推荐
- ESP32S3内网实现 WebSocket
ESP32S3内网实现 WebSocket WebSocket 是一种网络通信协议,它提供了在单个 TCP 连接上进行全双工.双向通信的通道.它是为了在 Web 浏览器和服务器之间实现实时.高效的数据 ...
- 安卓手机上部署nodejs服务器
一.准备软件 Termux 下载地址: 链接:https://pan.baidu.com/s/1J3OQITWc34uT-Mc8B-moPA?pwd=ug9j 提取码:ug9j KSW ...
- 基于人类反馈的强化学习 RLHF
1.强化学习和语言模型的联系 agent: 语言模型本身 state: prompt(input tokens) action: 选择哪个token作为下一个token(贪婪,top k,top p) ...
- Docker修改Devicemapper存储驱动为Direct-lvm模式
一.说明 Device mapper是基于内核的框架,支持Linux上许多高级卷管理技术.Docker中devicemapper存储驱动程序利用此框架的精简配置和快照功能进行镜像和容器管理. devi ...
- Ceph对象存储集群常用操作
一.常用操作 1.1 查看某个bucket详情 # 查看bucket列表 [root@oss001 ~]# radosgw-admin bucket list [ "awss3e68c588 ...
- 防抖ref如何在vue中被定义
本文由 ChatMoney团队出品 为什么ref要实现防抖 在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这 ...
- [网络安全]工具-quasar开源远控软件使用教程
首先声明本文仅作科普,若用作违法途径与作者无关!!! quasar是著名的开源后门软件,本文来分享它的基本使用.一些常见问题及其解决方法 一.下载地址 Quasar v1.4.1下载地址:https: ...
- Luogu P4037 [JSOI2008] 魔兽地图 题解
P4037 [JSOI2008] 魔兽地图 比较难的树上背包题目. 题目中装备有购买限制,所以二维树上背包状态肯定无法表示.又由于每件装备的合成只与其子节点的合成数量有关,所以需要一维表示这一个装备合 ...
- leetcode 918
简介 环形数组的最大子数组的和的最大值. 思路 分两种情况讨论, 一种是最大子数组就是普通值, 那么只要求出正常值就可以了. 另一种情况是除去全局最小的中间一段, 然后就是最大值. code clas ...
- RestCloud十万现金大奖
如何投稿:邮箱地址chenyingping@restcloud.cn 征集周期:2022/05/16-2022/05/30 征集主题:RestCloud相关产品的使用体验 内容要求:符合主题.内容新颖 ...