jQuery 示例集锦【续之一】

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" /> <script language="javascript"> </script> <script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&out_html=true"></script>

 

续上文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 > &nbsp; </ td >
             < td > &nbsp; </ td >
             < td > &nbsp; </ td >
           </ tr >
           < tr >
             < td > &nbsp; </ td >
             < td > &nbsp; </ td >
             < td > &nbsp; </ td >
           </ tr >
           < tr >
             < td > &nbsp; </ td >
             < td > &nbsp; </ td >
             < td > &nbsp; </ 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 > &nbsp; </ td >
             < td > &nbsp; </ td >
             < td > 002 </ td >
           </ tr >
           < tr >
             < td > &nbsp; </ td >
             < td > &nbsp; </ 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】

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script> <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>