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() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）】。