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 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- Python3基础 九九乘法表
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- 零基础学Python-第一章 ：Python介绍和安装-01.Python语言的特点
结束
- PAT 甲级 1066 Root of AVL Tree (25 分)(快速掌握平衡二叉树的旋转,内含代码和注解)***
1066 Root of AVL Tree (25 分) An AVL tree is a self-balancing binary search tree. In an AVL tree, t ...
- IDEA 多模块工程相互依赖
最近为了结构项目,抽离通用模块,同时使用一个工程管理所有模块,使用了多模块工程.不过在依赖其他模块的编译上出现了问题,总是报找不到被依赖的jar包. 最后的解决办法也很简单,对于被依赖的模块,要在ma ...
- 怎样制作像delphi一样的启动欢迎画面?
//在工程里面写 Application.Initialize; Application.Title := '管理系统'; Application.ShowHint := True; //闪现窗体创建 ...
- HTML布局排版之制作个人网站的文章列表
文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...
- 修改ecshop的70种技巧
1.如何修改网站”欢迎惠临本店”答复(dafu):languages\zh_cn\common.php文件中,$_LANG['welcome']=’欢迎惠临本店’:将他修改成你需要的字样. 2.如何修 ...
- 常见问题:MySQL/事务隔离
数据库并行产生的问题 A事务撤销时,将B事务更改的数据撤销. A事务提交时,将B事务更改的同行数据覆盖. 脏读:A事务读取到了B事务未提交的数据. 不可重复读:A事务中同查询语句不幂等,读到已更新数据 ...
- Swoole练习 安装
仅支持 Linux,FreeBSD,MacOS,3类操作系统 Linux 内核版本 2.3.32 以上 PHP-5.3.10 以上版本,包括PHP7 gcc4.4 以上版本或者clang cmake2 ...
- js 常用操作 -- 持续更新
替换数组中某一元素: array.splice(2, 1, '哈哈'); // 2 表示指定数组中2下标元素,1表示要删除的项数,哈哈 是替换后的值 在数组中某元素之前增加元素: array.spli ...