jQuery遍历(3)
上期我们讲了遍历的祖先、后代和同胞的问题，现在我们讲讲遍历遍历过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 div元素内部的第一个 p 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p> </body>
</html>
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 div 元素中的最后一个 p元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 p>元素(索引号 1)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("p").eq(0).css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>
<div>
<p>这是另外一个 div 中的一个段落。</p>
</div>
<p>这是一个段落。</p>
</body>
</html>
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 p元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p class="url">https://www.cnblogs.com/songtianfa</p>
<p>google (index 2).</p>
<p class="url">https://www.cnblogs.com/songtianfa/</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p class="url">https://www.cnblogs.com/songtianfa/</p>
<p>google (index 2).</p>
<p class="url">https://www.cnblogs.com/songtianfa/</p>
</body>
</html>
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 p元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.12.0.min.js">
</script>
<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<p>博客园</p>
<p class="url">https://www.cnblogs.com/songtianfa/</p>
<p>google (index 2).</p>
<p class="url">https://www.cnblogs.com/songtianfa/</p>
</body>
</html>
jQuery遍历(3)的更多相关文章
- 【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
- Jquery遍历选中的input标签
$("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...
- jquery遍历
http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...
- jQuery 遍历(上)
目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...
- jquery 遍历 数组1
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
- JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- jQuery 遍历函数(w3school)
jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- VsCode写Python代码！这代码简直和大神一样规范！太漂亮了！
VsCode写Python代码!这代码简直和大神一样规范!太漂亮了! 转 https://www.jianshu.com/p/636306763d89 VsCode虽然没有Pycharm的功能齐 ...
- [原][landcover]全球地表植被样例图片
图由南水之源提供,感谢 流socket 制作总结 原截图如下:按字母顺序排序 asphalt asphalt_bright asphalt_white brightRockOnly broad ...
- postman内置脚本说明
1. 清除一个全局变量 Clear a global variable 对应脚本: postman.clearGlobalVariable("variable_key"); 参数: ...
- TeslaManage 2.0编译日志
1>------ 已启动全部重新生成: 项目: TeslaManage, 配置: Debug x64 ------1> Moc'ing teslamanage.h...1> Uic' ...
- k8s中删除pod后仍然存在问题
分析: 是因为删除了pod,但是没有删除对应的deployment,删除对应的deployment即可 实例如下: 删除pod [root@test2 ~]# kubectl get pod -n j ...
- 静态站点生成器-md-mkdocs
推荐指数:
- 【深度学习框架-caffe】caffe中使用到的layer
https://www.jianshu.com/p/f6f49f6bcea6 https://github.com/BVLC/caffe/tree/master/include/caffe/layer ...
- iOS-UITableView的性能优化10个小技巧
通常你会发现一个图片类的app会在一个imageView上做下面这些事情: 1 下载图片(主要的内容图片+用户头像图片)2 更新时间戳3 展示评论4 计算动态的cell的高度 Tip#1 学习 ...
- EM算法概念
EM算法是一种非常经典的alternative optimizing算法.alternative optimizing的思想就是对于一个最优化问题,可以计算分为两步或者参数分为两个,就可以随机任意的选 ...
- Django 之memcached的应用
memcached介绍: memcached之前是danga的一个项目,最早是为LiveJournal服务的,当初设计师为了加速LiveJournal访问速度而开发的,后来被很多大型项目采用.官网是w ...