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 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
随机推荐
- Python的开源人脸识别库：离线识别率高达99.38%（附源码）
Python的开源人脸识别库:离线识别率高达99.38%(附源码) 转https://cloud.tencent.com/developer/article/1359073 11.11 智慧上云 ...
- 聚类K-Means和大数据集的Mini Batch K-Means算法
import numpy as np from sklearn.datasets import make_blobs from sklearn.cluster import KMeans from s ...
- Debugging Kafka connect
1. setup debug configuration mainClass: org.apache.kafka.connect.cli.ConnectDistributed VMOption: -D ...
- Pycharm一些额外使用笔记
(1)关于调试的一个小技巧: 在上面下栏的调试界面中可以修改变量a的值: (2)指定参数执行脚本: 第一步在run中指定edit configuration,然后在Parameters中指定训练的参数 ...
- LeetCode_234. Palindrome Linked List
234. Palindrome Linked List Easy Given a singly linked list, determine if it is a palindrome. Exampl ...
- 线性回归:boston房价
from sklearn.linear_model import LinearRegression,Lasso,Ridge from sklearn.datasets import load_bost ...
- Win10安装DB2配置笔记
响应文件名:D:\data\DB2\PROD_EXPC.rsp 安装文件夹--目录:D:\Program Files\IBM\SQLLIB\ IBM SSH Server安装位置:D:\Program ...
- zabbix4.2+grafana搭建骚气的监控运维平台
Zabbix 是一个企业级分布式开源监控解决方案,其监控与告警功能十分强大.Grafana是一款开源的可视化软件,可以搭配数据源实现一个数据的展示和分析:Grafana功能强大,有着丰富的插件.两者结 ...
- htm5 css学习笔记整理
点击链接后退页面: <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式 ...
- samtools获取uniq reads
参考地址: https://www.biostars.org/p/56246/ -q INT only include reads with mapping quality >= INT [0] ...