点击这里使用RSS订阅本Blog: rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />
一个 菜单伸缩效果,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
>
摘编自【http://bbs.blueidea.com/thread-2778641-2-1.html】
续上文jQuery 示例集锦
一个 菜单伸缩效果,js代码加一起,包括$(document).ready一共6句话
























































$("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输入框的例子



























































































































































































摘编自【http://bbs.blueidea.com/thread-2778641-2-1.html】
<script type="text/javascript" src="http://www.google.com/reader/ui/publis<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=grc_p(%7bc%3a%22green%22%2ct%3a%22%5cu8fd9%5cu4e9b%5cu6587%5cu7ae0%5cu4e5f%5cu503c%5cu5f97%5cu4e00%5cu770b%22%2cs%3a%22false%22%7d)%3bnew%20grc"></script>se%22%7D)%3Bnew%20GRC">