jquery(三)选择器
2016-02-28 17:35
621 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//获取tr的元素个数
//alert($("tr").length);
//当执行了get之后得到的结果是一个js的元素
//$($("tr").get(1)).css("color","#f00");
//判断id为abc的tr在包装集的位置
// alert($("tr").index($("tr#abc")));
//在表达式中通过,可以分割多个包装集,
//但是如果包装集太多,而且有时候可以变动的时候,使用这种方式就不好操作
//$("tbody tr:eq(2),tr#abc").css("color","#f00");
/*
* 可以为包装集使用add方法,可以将新加入的元素添加到包装集中
*/
// $("tbody tr:eq(2)").add("thead tr td:eq(2)")
// .add("tr td:contains('3')").css("color","#f00");
//not方法可以将包装集中的元素取消掉
//$("tr").not("tr#abc").css("color","#f00");
//获取tr中位置小于3的元素
//$("tr").filter("tr:lt(3)").css("color","#f00");
//获取tr中的1,3形成一个新的包装集,返回的值就是新的包装集
// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
//从包装集的内部获取相应的元素,返回的值也是新包装集
//$("table").find("tr#abc").css("color","#f00");
//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//alert($("table").is("td:contains('用户')"));
//获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
//$("tbody").children("tr:eq(3)").css("color","#f00");
//找到下一个子元素,只是一个元素,返回新包装集
// $("tr#abc").next().css("color","#ff0");
//找到下一个组兄弟元素,所有元素,返回新包装集
// $("tr#abc").nextAll().css("color","#0f0");
//parent仅仅只是返回上一级的div,返回新包装集
// $("#s1").parent("div").css("color","#0f0");
//返回所有满足条件的父类节点,返回新包装集
// $("#s1").parents("div").css("color","#f00");
//返回第3个tr的所有兄弟节点,返回新包装集
var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");//siblings将自己排除
alert(a);
});
</script>
</head>
<body>
<div id="d1">
cdd
<div>
<span id="s1">abc</span>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03_select</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
//获取tr的元素个数
//alert($("tr").length);
//当执行了get之后得到的结果是一个js的元素
//$($("tr").get(1)).css("color","#f00");
//判断id为abc的tr在包装集的位置
// alert($("tr").index($("tr#abc")));
//在表达式中通过,可以分割多个包装集,
//但是如果包装集太多,而且有时候可以变动的时候,使用这种方式就不好操作
//$("tbody tr:eq(2),tr#abc").css("color","#f00");
/*
* 可以为包装集使用add方法,可以将新加入的元素添加到包装集中
*/
// $("tbody tr:eq(2)").add("thead tr td:eq(2)")
// .add("tr td:contains('3')").css("color","#f00");
//not方法可以将包装集中的元素取消掉
//$("tr").not("tr#abc").css("color","#f00");
//获取tr中位置小于3的元素
//$("tr").filter("tr:lt(3)").css("color","#f00");
//获取tr中的1,3形成一个新的包装集,返回的值就是新的包装集
// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
//从包装集的内部获取相应的元素,返回的值也是新包装集
//$("table").find("tr#abc").css("color","#f00");
//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//alert($("table").is("td:contains('用户')"));
//获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
//$("tbody").children("tr:eq(3)").css("color","#f00");
//找到下一个子元素,只是一个元素,返回新包装集
// $("tr#abc").next().css("color","#ff0");
//找到下一个组兄弟元素,所有元素,返回新包装集
// $("tr#abc").nextAll().css("color","#0f0");
//parent仅仅只是返回上一级的div,返回新包装集
// $("#s1").parent("div").css("color","#0f0");
//返回所有满足条件的父类节点,返回新包装集
// $("#s1").parents("div").css("color","#f00");
//返回第3个tr的所有兄弟节点,返回新包装集
var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");//siblings将自己排除
alert(a);
});
</script>
</head>
<body>
<div id="d1">
cdd
<div>
<span id="s1">abc</span>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱琪</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
相关文章推荐
- jquery(二)js与jquery互转
- jQuery全屏滚动插件fullPage.js
- jquery ajax方式提交form并传递其他非表单中的参数,报表导出并自动下载,jquery ajax提交
- jquery(一)
- jQuery中用来让元素显示和隐藏的函数
- [jQuery学习系列二 ]2-JQuery学习二-数组操作
- 【jQuery Mobile学习】jQuery Mobile页面(二)
- jQuery入门第三
- Jquery实现图片播放
- 动态生成的html中无法使用jquery事件的解决方法
- Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
- jq实现多行文本溢出出现省略号的方法
- 记录看到的一些jquery效率上的问题
- jquery内核解析
- Jquery获取页面的动态元素
- KO和jQuery (或Prototype等)是竞争关系还是能一起使用?
- Jquery对Cookie的操作
- JQuery Uploadify 基于JSP的无刷新上传实例
- jQuery-源码阅读,pushStack()入栈方法
- jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释