代码改变世界

Jquery 几个小实列

2013-03-21 13:39  功夫猫  阅读(197)  评论(0)    收藏  举报

一.收缩列表

1.jquery.js

$(document).ready(function(){

    $(".p").click(function (){

        $(this).find(".c").toggle(); 

        if($(".a").html() =="+") {
            $(".a").html("-"); 
        }else{
            $(".a").html("+"); 
        }
    });
});

2.aa.css 

将class="c" 设置为隐藏；

　　.c {

　　　　color: red;
　　　　display:none;
　　　　}

3.index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->


    <script type="text/javascript" src="./JS/jquery.js"></script>
    <script type="text/javascript" src="./JS/myjquery.js"></script>
    <link rel="stylesheet" type="text/css" href="./CSS/aa.css">

  </head>
  
  <body>

           <div class="p" ><span class="a">+</span>中国新闻
               &nbsp;&nbsp;&nbsp;&nbsp;<div class="c" >中国新闻11</div>
               &nbsp;&nbsp;&nbsp;&nbsp;<div class="c" >中国新闻22</div>
           </div>
           <div class="p" ><span class="a">+</span>美国新闻
               &nbsp;&nbsp;&nbsp;&nbsp;<div class="c" >美国新闻11</div>
               &nbsp;&nbsp;&nbsp;&nbsp;<div class="c" >美国新闻22</div>
        </div>
  </body>
</html>

二、直接修改表格上面的内容，并保存；

index.jsp 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>


    <script type="text/javascript" src="./JS/jquery.js"></script>
    <script type="text/javascript" src="./JS/myjquery.js"></script>
<!--     <link rel="stylesheet" type="text/css" href="./CSS/aa.css"> -->

  </head>
  
  <body>

    <table border="1px" width="300" align="center" >
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td><div class="n">张三</div></td>
            <td><div class="n">19</div></td>
        </tr>
        <tr>
            <td><div class="n">李四</div></td>
            <td><div class="n">20</div></td>
        </tr>
    </table>
    
  </body>
</html>
$(document).ready(function (){

//$(document).ready()相当于<body onload="$(".n").click(replace);">    
// 一加载页面，为class="n"标签注册.click()事件；
    $(".n").click(replace);
});

function replace() {
    var str = $(this).html();
//解除绑定事件；    
    $(this).unbind("click");
    $(this).empty();
//    $("<input>")创建标签对；$("input")提取input标签对；$("input").html()或是$("input").val();
    var objstr = $("<input>");
//    把所有匹配的元素追加到另一个、指定的元素元素集合中。    
    //objstr.appendTo($(this));
    $(this).html(objstr);
    objstr.val(str);
    
    objstr.keypress(function (event) {
        if (event.keyCode == 13) {
            var strInput = $(this).val();
            var objDiv = $(this).parent();
            objDiv.empty();
//将strInput的值添加到<div></div>标签对里面，不同于objDiv.appendTo(strInput),
//append是追加，html是完全替换;            
            objDiv.html(strInput);
            //重新注册.click()事件；
            objDiv.click(replace);
        }
    });
}