重写submit提交事件

//需求1：点击 submit按钮时，检查是否选择 type ，若没有选择则给出提示：“清选择类型”；
//             检查文本框中是否有输入（可以去除前后空格），若没有则给出提示：“请输入内容”；
//              若选择都通过，则在相应的 ul 节点中添加对应的 li 节点。
//需求2：使包括新增的 li 都能响应 onclick 事件：弹出 li 的文本值。
$(function(){

    function showContent(li){
        alert($(li).text());
    }

    $("li").click(function(){
        showContent(this);
    });

    $(":submit").click(function(){
        var $type = $(":radio[name='type']:checked");
        if($type.length == 0){
            alert("请选择类型");
            return false;
        }

        var type = $type.val();

        var $name = $(":text[name='name']");
        var name = $name,val();

        //$.trim(str)方法可以去除字符串 str 的前后空格。
        name = $.trim(name);
        $name.val(name);

        if(name == ""){
            alert("请输入内容");
            return false;
        }

        $("<li>" + name + "</li>").appendTo($("#" + type))
                                   .click(function(){
                                       showContent(this);
                                   });

        //取消 submit 的默认行为
        return false;
});
})

总结：

1. 同 JS 的响应事件一样， jQuery 对象的响应函数若返回 false ，可以取消指定元素的默认行为，比如submit , a 等；
2. val()方法相当于attr(“value”)，获取表单的 value 属性值。例如：$(“:radio[name=’type’]:checked”)；这句就是一个选择器，选择name值为type的、被选中的（checked）radio对象。
3. $.trim(str)：可以去除 str 的前后空格；
4. jQuery 对象的方法的连缀：调用一个方法的返回值还是调用的对象，于是可以在调用方法的后面再次调用先前对象的其他方法。