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 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- flutter Draggable Widget拖拽控件
Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片.用起来非常的灵活. 参数说明: data: ...
- Netty服务器连接池管理设计思路
应用场景: 在RPC框架中,使用Netty作为高性能的网络通信框架时,每一次服务调用,都需要与Netty服务端建立连接的话,很容易导致Netty服务器资源耗尽.所以,想到连接池技术,将与同一个Nett ...
- sklearn使用高斯核SVM显示支持向量
import graphviz import mglearn from mpl_toolkits.mplot3d import Axes3D from sklearn.datasets import ...
- 【433】COMP9024 复习
目录: 01. Week01 - Lec02 - Revision and setting the scene 02. Week02 - Lec01 - Data structures - memor ...
- 123457123456#1#----com.MC.EnglishGame98--前拼后广--jp英语-mc
com.MC.EnglishGame98--前拼后广--jp英语-mc
- POJ Corn Fields 状态压缩DP基础题
题目链接:http://poj.org/problem?id=3254 题目大意(名称什么的可能不一样,不过表达的意思还是一样的): 种玉米 王小二从小学一年级到现在每次考试都是班级倒数第一名,他的爸 ...
- 【error】OutOfRangeError (see above for traceback): RandomShuffleQueue
前言 在使用tensorflow TFRecord的过程中,读取*.tfrecord文件时出现错误,本文解决这个错误. 错误描述: OutOfRangeError (see above , curre ...
- win10中禁用Ctrl+Alt+上下左右箭头的方法
win10的Ctrl+Alt+向左/右/上/下箭头,与pycharm中的快捷键有冲突,需要禁用 右键''显示设置''---->高级显示设置------->显示器1的显示适配属性-----& ...
- Mowing the Lawn【线性dp + 单调队列优化】
题目链接:https://ac.nowcoder.com/acm/contest/2652/G 题目大意:与上一篇博客 烽火传递 差不多. 1.一共n头羊,若超过m头连续的羊在一起,就会集体罢工,每头 ...
- linux编程 新建一个进程的方法
学习到一种,直接调用系统函数,在类的构造函数中直接启动一个线程,例如,某个类是用来监听串口的,可以直接在其构造函数中调用系统函数,开辟一个进程,在该进程对应的函数中不断while(1){....} h ...