jQuery学习06---节点遍历,评分控件还有简单选择器
2013-06-19 23:31
537 查看
节点遍历
评分控件
简单选择器
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <link rel="stylesheet" type="text/css" href="table.css"> <title></title> <script src="../jquery-1.8.2.js" type="text/javascript"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function() { //next()查找下一个紧邻的节点next("#x")查找下一个紧邻的id为x的节点 $("#d4").next().css("background-color","red"); //nextAll()之后的所有节点.之后的所有的div标签nextAll("div") $("#d4").nextAll().css("background-color","red"); //之前的紧邻节点 $("#d4").prev().css("background-color","red"); //之前的所有节点 $("#d4").prevAll().css("background-color","red"); //查找所有的兄弟节点 $("#d4").siblings().css("background-color","red"); //查找本节点和本节点之后的节点,end()返回上一次jQuery对象被破坏之前的状态 $("#d4").nextAll().css("background-color","red").end().css("background-color","red"); $("#d4").nextAll().andSelf().css("background-color","red"); $("#d4").nextAll().andSelf().end().css("background-color","red"); }); </script> </head> <body> <div>11111111</div> <div>22222222</div> <div>33333333</div> <div id="d4">44444444</div> <p>55555555</p> <div>66666666</div> <div>77777777</div> <div>88888888</div> <div>99999999</div> </body> </html>
评分控件
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <link rel="stylesheet" type="text/css" href="table.css"> <title></title> <script src="../jquery-1.8.2.js" type="text/javascript"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function() { $("#rating span").mouseover(function() { //$(this).prevAll.andSelf().text("★"); //$(this).nextAll.text("★"); $(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆"); }); }); </script> </head> <body> <div id="rating"> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> </div> </body> </html>
简单选择器
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <link rel="stylesheet" type="text/css" href="table.css"> <title></title> <script src="../jquery-1.8.2.js" type="text/javascript"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function() { //第一个 //$("input:first").css("background-color","red"); //最后一个 //$("input:last").css("background-color","red"); //排除id为t1和class为myClass的 //$("input:not(.myClass):not(#t1)").css("background-color","red"); //odd是奇数,even是偶数但下标从0开始 //$("input:odd").css("background-color","red"); //第三项 //$("input:eq(2)").css("background-color","red"); //小于3的项 //$("input:lt(3)").css("background-color","red"); //大于3的项 //$("input:gt(3)").css("background-color","red"); //最后3个 var num = $("input").length-4; $("input:eq("+num+")").nextAll().css("background-color","red"); }); </script> </head> <body> <input id="t1" type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> <input class="myClass" type="text" /><br /> <input class="myClass" type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> </body> </html>
相关文章推荐
- jquery选择器中的find和空格,children和>的区别、及父节点兄弟节点,还有判断是否存在的写法
- jQuery学习10---属性过滤选择器,表单选择器,遍历复选框
- jquery学习随笔(简单选择器)
- JQuery学习三(隐式迭代和节点遍历)
- Jquery选择器的概念以及选择器的学习一(基本、层级、简单,另有简单动画效果代码)
- jQuery学习笔记- - 节点遍历
- 黑马程序员_学习日记62_709jQuery1(map()和each()、选择器、节点遍历、设置样式)
- jquery学习之1.6-选择器小练习,遍历复选框
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- jquery 简单过滤选择器 遍历集合
- jquery 简单过滤选择器 遍历集合
- jQuery中的遍历节点(作用与选择器类似)
- jQuery基础教程之DOM操作-遍历节点-siblings()方法
- (转)jQuery框架学习第二天:jQuery中万能的选择器
- JQuery简单日历控件
- WeifenLuo.WinFormsUI.Docking 控件的简单使用学习
- jQuery学习二-简单动画-淡入淡出
- 从零开始学习jQuery (二) 万能的选择器
- 遍历简单XML节点
- 从零开始学习jQuery (二) 万能的选择器