使用Jquery基本过滤选择器
2016-05-27 22:12
666 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>使用Jquery基本过滤选择器</title> <script src="jquery-1.8.0.js"></script> </head> <style type="text/css"> body{ font-size:12px; text-align:center; } div{ width:241px; height:83px; border:solid 1px #f00; } h1{ font-size:13px; } ul{ list-style-type:none; padding:0px; } .DefClass,.NotClass{ height:23px; width:60px; line-height:23px; float:left; border-top:solid 1px #000; border-bottom:solid 1px #000; } .GetFous{ width:58px; border:solid 1px #666; background-color:#eee; } #spnMove{ width:238px; height:23px; line-height:23px; } </style> <script type="text/javascript"> /* $(function(){ $("li:first").addClass("GetFous"); }); $(function(){ $("li:last").addClass("GetFous"); }); $(function(){ $("li:not(.NotClass)").addClass("GetFous"); }); $(function(){ $("li:even").addClass("GetFous"); }); $(function(){ $("li:odd").addClass("GetFous"); }); $(function(){ $("li:eq(2)").addClass("GetFous"); }); $(function(){ $("li:gt(2)").addClass("GetFous"); }); $(function(){ $("li:lt(4)").addClass("GetFous"); }); $(function(){ $("div h1").css("width","238"); $(":header").addClass("GetFous"); }); */ $(function(){ animateIt(); $("#spnMove:animated").addClass("GetFous"); }); function animateIt(){ $("#spnMove").slideToggle("slow",animateIt); } </script> <body> <div> <h1>基本过程选择器</h1> <ul> <li class="DefClass">Item 0</li> <li class="DefClass">Item 1</li> <li class="NotClass">Item 2</li> <li class="DefClass">Item 3</li> </ul> <span id="spnMove">Span Move</span> </div> </body> </html>
相关文章推荐
- 使用Jquery层次选择器
- 使用Jquery基本选择器
- js、Jquery代码检测页面
- 使用JQuery实现隔行变色
- Jquery控制DOM对象
- jquery的链式写法
- JQuery开发4-当网页内容大于一页时提示返回顶部
- 读jQuery源码释疑笔记3
- jQuery工具方法
- jQuery实现3D幻灯片
- jQuery自定义函数
- jquery动画效果总结
- jquery的each()详细介绍
- 标准Jquery Ajax
- 使用jquery获取url以及jquery获取url参数的方法
- jQuery的deferred对象详解
- jquery选项卡切换
- JQ验证表单
- jquery动态添加数据,实现“推荐产品模块”功能
- 读jQuery源码释疑笔记2