Jquery操作基本筛选过滤器
2018-06-10 10:19
633 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" href="../../css/style.css" type="text/css"/> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn1").click(function(){ $("body div:first").css("background-color","red"); }) $("#btn2").click(function(){ $("body div:last").css("background-color","red"); }) $("#btn3").click(function(){ $("body div:odd").css("background-color","red"); }) $("#btn4").click(function(){ $("body div:even").css("background-color","red"); }) }); </script> </head> <body> <input type="button" id="btn1" value="body中的第一个div元素"/> <input type="button" id="btn2" value="body中的最后一个div元素"/> <input type="button" id="btn3" value="选择body中的奇数的div"/> <input type="button" id="btn4" value="选择body中的偶数的div"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form div { margin:5px 0;} .int label { float:left; width:100px; text-align:right;} .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} .sub { padding-left:100px;} .sub input { margin-right:10px; } .formtips{width: 200px;margin:2px;padding:2px;} .onError{ background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center; padding-left:25px; } .onSuccess{ background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center; padding-left:25px; } .high{ color:red; } div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;}
相关文章推荐
- jquery过滤器,过滤器它是在基本选择器与层次选择器获取到一批元素后,再进行过滤操作
- jQuery 基本操作
- jquery对select下拉框的一些基本操作
- ASP.NET学习笔记(6)——jQuery的Ajax基本操作
- jquery中对表单的基本操作代码
- jquery 操作DOM的基本用法
- Jquery表单取值赋值的一些基本操作
- jQuery Table 系列: Jquery Table 的基本操作
- jQuery 對table的基本操作
- [JQuery]:jQuery筛选元素方法、操作CSS样式和处理事件方式
- jquery,html标签及ajax基本操作[基础]
- 计算机基本操作技能 筛选样卷
- jQuery中过滤器的基本用法示例
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- JQuery操作基本选择器
- jquery 初步(三) 基本过滤器
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
- jQuery对select的基本操作
- jquery 的一些基本操作
- Jquery 局部刷新及 表单取值赋值 处理返回json数据 一些基本操作