JQUERY1.9学习笔记 之基本过滤器(二) 等于选择器
等于选择器 :eq()
描述：选择与设定下标匹配的元素。
jQuery( ":eq(index)" )
jQuery( ":eq(-index)" )
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>find the third td</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
$("td:eq(2)").css("color", "red");
</script>
</body>
</html>
例子：用三个不同的样式去证明:eq()是为选择单元素而设计的，
然而，:nth-child()或:eq()在一个循环结构中，如.each()就能
选择多个元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<style>
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
// Applies yellow background color to a single <li>
$("ul.nav li:eq(1)").css("background-color","#ff0");
// Applies italics to text of the second <li> within each <ul class="nav">
$("ul.nav").each(function(index){
$(this).find("li:eq(1)").css("font-style","italic");
});
// Applies red text color to descendants of <ul class="nav">
// for each <li> that is the second child of its parent
$("ul.nav li:nth-child(2)").css("color","red");
</script>
</body>
</html>
Example: Add a class to List 2, item 2 by targeting the second to last <li>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<style>
.foo{
color:blue;
background-color:yellow;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
$("li:eq(-2)").addClass("foo");
</script>
</body>
</html>
JQUERY1.9学习笔记 之基本过滤器(二) 等于选择器的更多相关文章
- JQUERY1.9学习笔记 之可见性过滤器(二) 可见选择器
描述:选择所有可见的元素. 例:点击时让所有的可见的div元素变黄. <!doctype html><html lang="en"> <head> ...
- JQUERY1.9学习笔记 之内容过滤器(二) 空元素选择器
描述:选择没有子元素(包括文本节点)的标签. jQuery(":empty") 与:parent相反. 例:找出所有为空的元素.(他们没有子元素或文本元素). <!docty ...
- JQUERY1.9学习笔记 之可见性过滤器(一) 隐藏选择器
描述:选择所有隐藏的元素. jQuery( ":hidden" ) 例:显示出所有隐藏的div元素,并对隐藏的input元素计数. <!doctype html>< ...
- JQUERY1.9学习笔记 之内容过滤器(四) parent选择器
描述:选择至少包含一个子节点的元素(一个标签或是文本). 例:找出所有有子元素的td标签,包含文本. <!doctype html><html lang="en" ...
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器
描述:选择至少包含一个元素,匹配指定的标签的标签.jQuery( ":has(selector)" ) 例:给所有的div添加一个类"test",在他们中有一个 ...
- JQUERY1.9学习笔记 之内容过滤器(一) 包含选择器
描述:选择包含指定文本的所有元素.jQuery( ":contains(text)" ) text:一串大小写敏感的文本. 例:找出所有包含"john"的div ...
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
奇数选择器jQuery( ":odd" ) 例:匹配表格的奇数行. <!DOCTYPE html><html lang="zh-cn"> ...
- JQUERY1.9学习笔记 之基本过滤器(十) 非选择器
非选择器jQuery( ":not(selector)" ) 例:找出所有input标签为非"checked"的,并且高亮其邻居元素span. <!DOC ...
- JQUERY1.9学习笔记 之基本过滤器(九) 小于选择器
小于选择器 jQuery( ":lt(index)" ) jQuery( ":lt(-index)" ) 描述:选择所有小于指定下标的元素. <!DOCT ...
随机推荐
- POJ1088 滑雪（记忆化搜索）
题目链接. 分析: 状态转移方程 d[i][j] = max(d[i-1][j], d[i+1][j], d[i][j-1], d[i][j+1]). #include <iostream> ...
- 【翻译】Organizing ASP.NET MVC solutions 如何组织你的ASP.NET MVC解决方案
序言 时隔一年,弦哥重出江湖,对于我们学习.NET MVC那将有大大的好处,期待弦哥的重构系列.在弦哥与jerrychou的交流中提到了一篇文章http://lostechies.com/jimmyb ...
- Convert Sorted Array to Binary Search Tree——LeetCode
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 题目 ...
- 彻底解决Unknown ASTNode child: LambdaExpression 错误
错误原因: 在于 androidStudio lint检查的时候 会把Lamda表达式 认为是错误的.解决办法: 1.打开项目中中的lint.xml改为如下格式: <?xml ...
- UVA 11389 The Bus Driver Problem
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82842#problem/D In a city there are n bus ...
- HDU_1429——胜利大逃亡续,十位二进制状态压缩,状态判重
Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)……这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁 ...
- 利用PyQt4写的小工具软件
应公司文职工作人员需求,写一个车间人员工作时间的统计软件,输入开始工作时间1,再输入结束工作时间2,计算两个时间的差值. 根据需求,初步构想的UI界面如下: 下面开始干活. 分析后觉得利用PyQt4来 ...
- Demo_敌军坦克生成，坦克移动（可以拓展发射子弹，敌军消失获取分数或者添加动画，声音功能）
using UnityEngine; using System.Collections; public class Tank : MonoBehaviour { //坦克面积结构体对象 public ...
- 字体在Android View中的输出 drawText
Canvas 作为绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { public flo ...
- 转载：c++内存泄露机制
对于一个c/c++程序猿来说,内存泄漏是一个常见的也是令人头疼的问题.已经有很多技术被研究出来以应对这个问题,比方 Smart Pointer,Garbage Collection等.Smart Po ...