Jquery操作基本筛选过滤器

<!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;}

转载于:https://www.cnblogs.com/benjamin77/p/9162375.html

Jquery操作基本筛选过滤器相关推荐

jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
html表格统计表,jQuery操作表格（table）的常用方法、技巧汇总
以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 $('#table1 tr').hover(function(){ $(this).children('td').addCl ...
jQuery: 操作select option方法集合
每一次操作select的时候,总是要谷歌一下资料,真是太不爽了, 在这里记录一下. 公共select代码 <select id="sel"><option val ...
JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏目录视图摘要视图订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作运行图片目录路径连连看水果方块版.html 连连看算法进行下一个游戏的开发! 注意事项我会把html文件.css文件提供下载地址,文件夹路径也展 ...
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
jQuery操作Select
jQuery是如何控制和操作select的.先看下面的html代码 <select id="test"><option value="1"&g ...
jquery 使用jquery操作Dom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

Jquery操作基本筛选过滤器

Jquery操作基本筛选过滤器相关推荐

最新文章

热门文章