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 ...
随机推荐
- 【HDOJ】2492 Ping pong
线段树+离散化. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 2000 ...
- COJ 3016 WZJ的图论问题
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1046 试题描述: WZJ又有一个问题想问问大家.WZJ用数据生成器生成了一 ...
- Visual Studio创建跨平台移动应用_02.Cordova Extension
1简介 本章节是关于Visual Studio Tools for Apache Cordova的,目前此产品只发布了预览版.Visual Studio for Apache Cordova帮助熟悉V ...
- javascript 关闭窗口，弹出新窗口并带有确认关闭对话框解决办法
在很多人眼里,北京是一个物欲横流的社会,生活节奏之快,让你一丝都不能停下来,走在路上伴随着人群急速往前涌,或许有些人都不知道要去哪.也不知道自己想要的是什么?在一个浮躁的社会里,多了一些浮躁的人,到处 ...
- 在linux下文件转码
在linux下转码命令: iconv -f utf-8 a.txt > b.txt
- [LeetCode] 310. Minimum Height Trees 解题思路
For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...
- 尚学堂 JAVA DAY11 概念总结
1.冒泡排序算法 <升序排列> 思路1: 数组长度为n,那么要对数组进行n-1次遍历; step 1---从数组的第一个数开始,两两比较,如果第一个数 > 第二个数,将二者进行交换: ...
- [置顶] Putty管理私钥文件
openssh中,ssh_keygen产生的私钥,id_rsa这种密钥putty是不认识的,必须先把它转换成ppk格式, Windows上如果你安装了git,它里面bin目录下就有ssh_keygen ...
- html5中input新增type值的使用
二狗在最近的项目以html5和webapp为主,并接触到了input新增type值的使用,下面就把这些玩意一一以实例列举出来 一:type = date:定义日期:年-月-日 input type=& ...
- Android Dialog AlertDialog
1.普通的对话框 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...