jQuery 示例集锦【续之一】

最新推荐文章于 2023-06-15 00:53:11 发布

系统信息

最新推荐文章于 2023-06-15 00:53:11 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java体系文章标签： jquery function input border html tutorials

本文链接：https://blog.youkuaiyun.com/softwave/article/details/2099587

Java体系专栏收录该内容

380 篇文章

订阅专栏

本文介绍使用jQuery实现的两个实用效果：一是简洁的菜单伸缩功能，通过简单的代码即可实现菜单项的展开与收起；二是表格内文本编辑功能，允许用户直接在表格单元格中进行编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

续上文jQuery 示例集锦

一个菜单伸缩效果，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 >

</ tr >

< tr >

< td >   </ td >

</ tr >

< tr >

< 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 > 002 </ td >

</ tr >

< tr >

< 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】