| jQuery示例集锦【续之一】 |
| 作者：小李 来源：blog 整理日期：2008-4-24 |
一个菜单伸缩效果，js代码加一起，包括$(document).ready一共6句话
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>DL Demo</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>...
$(document).ready(function()...{
$("dd:not(:first)").hide();
$("dt a").click(function()...{
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
<style>...
body {...}{ font-family: Arial; font-size: 16px; }
dl {...}{ width: 300px; }
dl,dd {...}{ margin: 0; }
dt {...}{ background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a {...}{ color: #FFF; }
dd a {...}{ color: #000; }
ul {...}{ list-style: none; padding: 5px; }
</style>
</head>
<body>
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="/src/">Download</a></li>
<li><a href="/docs/">Documentation</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Community</a></dt>
<dd>
<ul>
<li><a href="/discuss/">Mailing List</a></li>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/demos/">Demos</a></li>
<li><a href="/plugins/">Plugins</a></li>
</ul>
</dd>
<dt><a href="/dev/">Development</a></dt>
<dd>
<ul>
<li><a href="/src/">Source Code</a></li>
<li><a href="/dev/bugs/">Bug Tracking</a></li>
<li><a href="/dev/recent/">Recent Changes</a></li>
</ul>
</dd>
</dl>
</body>
</html>
第一句：
$("dd:not(:first)").hide(); //标签为dd的不是第一个的都给我藏好了
第二句：
$("dt a").click(function(){ //标签为dt，带链接的，还被点了的，给我听好了
第三句：
$("dd:visible").slideUp("slow"); //标签为dd的，能看见的，给我慢慢的向上跑
第四句：
$(this).parent().next().slideDown("slow"); //我的父母的左邻给我慢慢的向下滑
第五句：
return false; //你点了我，我也不给你转到指定的链接
哦，差点忘了最开头那句：
$(document).ready(function(){
同志们，都准备好了吗，我要发号施令啦。
=======================================================
一个特殊text输入框的例子
<html>
<head>
<title>表格数据</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>...
<!--
//当DOM载入就绪后执行
$(document).ready(
function()...{
//获取在tbody下的td，并设置onclick事件；
$("tbody td").click(
function()...{
//获取该对象的文本值
var t = $(this).text();
//更换该对象的innerHTML
$(this).html("<input type=text value ="+t+" />");
//将焦点放置到input对象上
$("td input").focus();
//设置input对象失去焦点时的事件
$("td input").blur(
function()...{
//获取该对象的值
var t = $(this).val();
//更换td对象的innerTEXT
$(this).parent().text(t);
}
);
}
);
}
);
-->
</script>
<style>...
<!--
td,th{...}{
width:92px;
height: 26px;
border:1px groove #000000;
}
tbody td{...}{
border:1px solid #CCCCCC;
}
input{...}{
width:90px;
margin: 0px;
}
-->
</style>
</head>
<body>
<table summary="表格数据 测试">
<caption>
表格数据
</caption>
<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>
</tbody>
<tfoot>
<tr>
<td>姓名</td>
<td>性别</td>
<td>号码</td>
</tr>
</tfoot>
</table>
</body>
</html>
以下是上面代码的改进，解决：如果有一个TD处于编辑状态，这个时候鼠标在输入框里点击的
话，输入框里的内容就被清空了。
<html>
<head>
<title>表格数据</title>
<script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script>
<script>...
<!--
var isEdit=false;
//当DOM载入就绪后执行
$(document).ready(
function()...{
//获取在tbody下的td，并设置onclick事件；
$("tbody td").click(
function()...{
if(isEdit)return;//如果是编辑状态，则返回
isEdit=true;//把标志位设置为编辑状态
//获取该对象的文本值
var t = $(this).text();
//更换该对象的innerHTML
$(this).html("<input type=text value ="+t+" />");
//将焦点放置到input对象上
$("td input").focus();
//设置input对象失去焦点时的事件
$("td input").blur(
function()...{
//获取该对象的值
var t = $(this).val();
//更换td对象的innerTEXT
$(this).parent().text(t);
isEdit=false;//把标志位设置为未编辑状态
}
);
}
);
}
);
-->
</script>
<style>...
<!--
td,th{...}{
width:92px;
height: 26px;
border:1px groove #000000;
}
tbody td{...}{
border:1px solid #CCCCCC;
}
input{...}{
width:90px;
margin: 0px;
}
-->
</style>
</head>
<body>
<table summary="表格数据 测试">
<caption>
表格数据
</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>号码</th>
</tr>
</thead>
<tbody>
<tr>
<td>杜有发</td>
<td>男</td>
<td>001</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>002</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>003</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>姓名</td>
<td>性别</td>
<td>号码</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
|
|
