JQ实现简单的图书管理（增删）

首先看到第一张，上半部分一个提交对话框，下面一个列表，通过“添加图书”这个按钮将两部分链接在一起。
首先是上半部分:

<label>请输入书名：</label> <input type="text">    <p><button>添加图书</button> 当前有<span>3</span>本书</p>

这里虽然明显看就是一个表单，但是我没有写form，应为没有实际的页面与WEB服务器交互过程，但是在实际开发中应该是要写进去，这样比较专业；
然后是下半部分，有点基础的应该可以看出使用ul li写的，其实也可以用<div>，这里还是专业问题，虽然用<div>可以实现同样的效果，有可能比用ul li写的跟简单，但是最好还是用ul li写比较好，你想想，既然语言上有这个功能的专用标签，你再不用他，他会伤心的。。。

    <ul>        <li>西游记  <span>删除</span></li>        <li>红楼梦  <span>删除</span></li>        <li>水浒传  <span>删除</span></li>    </ul>

这里默认的就写了三本，然后再用<div> 把这两个部分链接在一起,起个类名 back:
样式定义：

 <style>        div,button,input{ border: 1px  solid #ccc; border-radius: 5px}        .back{ width: 300px; height: 300px; margin: 20px auto; padding: 10px}        input,button,li{ line-height: 30px}        ul{padding: 0; margin: 0; list-style: none}        li{ border-bottom: 1px  dashed #ccc}        li span{float: right}        li span:hover{ color: red; cursor: pointer}    </style>

下面就开始写jq部分：

 $("button").click(function(){        var bookname = $("input").val();        if(bookname == ""){            alert("请输入书名");        }else{            $("ul").append("<li>" + bookname + "<span>删除</span></li>");            $("input").val("");            $("p span").text($("li").length);        }    });

先给button定义一个click方法,通过一个简单的if判断【val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。】

 $("ul").on("click","li span",function(){        $(this).parent().remove();        $("p span").text($("li").length);    });

这一段就是就是定义“删除”，这里要注意的是这里给“删除”定义是不能直接用click，要用on()方法，添加过的图书就是未来元素，来看一下 on()方法的定义【使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）】。