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强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强.本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学 ...
随机推荐
- Java11 ThreadLocal的remove()方法源码分析
1. ThreadLocal实现原理 本文参考的java 版本是11. 在讲述ThreadLocal实现原理之前,我先来简单地介绍一下什么是ThreadLocal.ThreadLocal提供线程本地变 ...
- pytorch入门 - 修改huggingface大模型配置参数
介绍 Hugging Face的Transformers库提供了大量预训练模型,但有时我们需要修改这些模型的默认参数来适应特定任务. 本文将详细介绍如何修改BERT模型的最大序列长度(max_posi ...
- [原创]《C#高级GDI+实战：从零开发一个流程图》第02章：画一个矩形，能拖动！
一.前言 就像开发的教程都从"Hello World!"开篇一样,系列开始,我们也从一个最最简单的功能开始:画一个能拖动的矩形. 顺便说一下,另一篇教程:(原创)[C#] GDI+ ...
- 后端性能-batch 化的想法
项目中我们提高性能或者吞吐经常使用的是 batch 化,比如说获取帐号信息,我们1条1条查询可能不如我们一次查询100条性能高. 有的时候想这样是为什么呢?因为单个请求中间有网络往返.网络延迟等原因会 ...
- HTML5 e CSS3 入门教程与练习项目
HTML5 e CSS3 课程材料 这是一个公开的HTML5和CSS3教学资源库,包含完整的课程PDF.实践练习代码和在线演示. 项目特点 结构化学习路径:从基础到高级的模块化课程设计 :laptop ...
- C# DataTable复制数据,深度复制
https://blog.csdn.net/fuyifang/article/details/40355025 /// <summary> /// 复制数据,深度复制 /// </s ...
- Sql server 左连接查询最大记录
SELECT * FROM Billcode_in a LEFT JOIN Billcode_place b ON a.billcode=b.billcode AND b.id=(SELECT MAX ...
- leetcode 92 翻转链表 II
简介 直接使用reverse, 进行值的替换, 链表翻转实在是太烦了 code class Solution { public: ListNode* reverseBetween(ListNode* ...
- ABC382
上午 NOIP 太憋屈了,我要切水恢复一下信心( 希望 cy 别看见 A - Daily Cookie 在题目限制中,已经确定 \(S\) 中 @ 字符的个数多于 \(D\).所以我们直接数 . 的个 ...
- [JOI2018] Snake Escaping
首先暴力是考虑对每个询问枚举问号填 1 还是 0,然后把每种可能统计到答案中,复杂度是 \(O(2^n \times q)\) 的. 然后我们可以观察出一些性质: 比如 1?1,他可能的情况是 111 ...