xiangqian0505
- 浏览: 317095 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
ayidaweiwei：
上面已经写得很清楚了,吧里data 里面的数据定义成一个Bea ...
json对象转换成复杂Bean（包括bean、list<Bean>、Object） -
chaohua2012：
你好，如果json是这种形式呢"type" ...
json对象转换成复杂Bean（包括bean、list<Bean>、Object） -
a6892509：
大神呀
Java异常处理心得 -
liubaolin123：
请问有源码么？
restlet2.0.6+spring3.2.2+mybatis3.2.3 集成 -
xiangqian0505：
xiangqian0505 写道duan_1991 写道文章不 ...
Java异常处理心得
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);
});
//-->
</SCRIPT>
<style type="text/css">
h1 { font:bold 20px/26px Arial;}
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;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);
});
//-->
</SCRIPT>
<style type="text/css">
h1 { font:bold 20px/26px Arial;}
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;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
- jquery-1_1_.2.1.pack.rar (13.3 KB)
- 下载次数: 2
分享到：
发表评论
-
js 克隆 Clone
2013-06-18 16:39 1021Object.prototype.Clone=functi ... -
使用JavaScript在IE和Firefox下进行iframe的DOM操作
2013-04-27 16:33 1093IE和Firefox对iframe document对象的差 ... -
IE文本框内容右对齐后光标消失
2012-12-20 16:42 1885<input type="text" ... -
jquery多级联动下拉插件chained（附DEMO）
2012-10-29 16:39 1703<!DOCTYPE html PUBLIC " ... -
基于jQuery的Spin Button自定义文本框数值自增或自减（测试案例）
2012-07-23 10:33 1594/** * jquery.spin.js * ... -
AJAX同步 JS方法顺序执行
2012-06-19 09:33 10854//保存前执行的方法,ajax同步调用后台验证包裹单号是否存在 ... -
JS 设置下拉选择框默认值
2012-06-14 10:12 5679//根据下拉对象默认选中后台对应的记录 function ... -
Javascript 汉字转首字母的拼音（支持多音字的选择）
2012-02-27 13:27 11505这是html代码，保存为html格式的文件，将下面的js代码保 ... -
javascript:history.go()和History.back()的区别
2012-02-10 10:35 1423<input type=button value=刷新 ... -
漂亮的时间选择框
2011-12-08 17:09 1741<html> <script langua ... -
时间 分钟 选择框
2011-12-08 17:04 1581功能预览： <html& ... -
关闭窗口产生js的事件
2011-12-05 22:15 1126/************ 关闭窗口，提交评价 **** ... -
js禁止右键、F5刷新 ctrl+回车 js格式化日期
2011-12-05 22:12 1537//js禁止右键、F5刷新 function noAcion ... -
js 弹出提示遮罩层
2011-12-03 01:10 1858<HTML> <body> ... -
js显示动态时间
2011-12-03 00:30 17497Date对象的方法 Date 对象能够使你获得相对于国际标准 ... -
好用的jquery弹出框插件
2011-12-02 23:49 43641. jquery.ui.dialog 官方地址 http ... -
js 事件收集
2011-12-02 21:07 833一般事件 事件 浏览器支持 描述 onClick IE3|N ... -
js性能问题
2011-12-02 21:05 816随着web应用的复杂度日渐提高，JavaScript代码量也变 ... -
JS解决后台 繁体乱码 问题
2011-12-01 18:45 1423脚本处理文本框内容 var name_s= document ... -
js获取复选框的值、根据值查询数据库信息
2011-11-29 15:25 1445//js获取复选框的值 function zhuzhuangt ...
相关推荐
Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.
本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ...
JQ滑动变色菜单_导航条变色滑动显示 JQ滑动变色菜单_导航条变色滑动显示
易语言滑动条变色源码,滑动条变色
隔行,滑动,点击 变色 隔行,滑动,点击 变色.+ 多选框
js图片滑动切换效果，多种特效；js图片滑动切换效果
Android实现沉浸式状态栏及标题栏滑动变色
简单、实用的javascript图片点击左右滑动
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <html> <head> <!-- 引入的css压缩文件 -->...tabl
导航栏js点击可滑动展开剩余项,恩，就这样，做着玩的。
废话不多说了，直接给大家贴js实现鼠标点击导航栏变色代码，具体代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
CSS暖色调菜单，鼠标悬停变色的滑动菜单，以前在网上见到过，基于纯CSS技术实现，运行UL LI属性和一些鼠标属性编写出来的菜单，对于不熟悉JS的朋友来说，这款菜单比较适合你学习使用，请参见截图所示的菜单效果。
JS时间滑动条控件的详细代码 包含各种时间滑动条样式 以及毫秒数与标准时间格式的换算
js代码 点击按钮，图片 向左 向右滑动
javascript的左右滑动代码，纯js，没有用到jquery。简单实用，直接下载html页面放到服务器上运行即可。touchstart->touchmove->touchend 原理参照：...
内容索引:脚本资源,jQuery,jquery排序,表格排序,... Demo1--隔行,滑动,点击 变色. Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色. Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色. Demo4--表格排序.
自动滑动屏幕功能，可以自动滑动微视、抖音等。可以解放双手，让程序自己跑起来。滑动时间也是随机的，模拟人看时间时间。
菜单切换js效果(滑动与点击)
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果