37.要点

1.jQuery中attr有个bug,只能第一次设置值需要用prop替代

$(":checkbox[name=hobby]").attr("checked",checked);
    
$(":checkbox[name=hobby]").prop("checked",checked);

2.h5风格自定义属性

h5自定义属性风格:data-属性名 (data-url="哈哈哈啊")

jQuery提供data方法获取h5风格自定义属性值

开发建议:自定义属性值采用h5风格,然后使用data

注意:data后面的属性名一定要全部小写!即使有大写字母出现,在取值的时候也会默认转换成小写,到时候自己写成大写的去取值,会出错

示例代码:

<input type="checkbox" onchange="checkChange(this)" id="checkAll" data-url="http://baidu.com"/>

console.log($("#checkAll").data("url"));

3.find(),找到当前元素的子孙后代

$("#addMore").click(function() {
    var tr = $("tbody tr:first").clone();
    console.log(tr);
    
    //新方法.找当前元素的子孙后代元素
    tr.find(":text").val("0");//找到所有的子孙后代将值复位
    tr.appendTo($("#data"));//追    加到tbody中
});

4.closest()找到当前元素的祖辈

//不用id删除的方式
function delRow(srcEl) {
    console.log(srcEl);
    //closest新知识,从元素本身开始向祖辈寻找,寻找到就停止,并返回最先匹配到的元素
    $(srcEl).closest("tr").remove();
}

5.jQuery中ajax请求-->get

$(function() {
    $("#username").blur(function() {
        //console.log(this);
        $.get("/checkusername.do",{username:$(this).val()},function(data){
            
            if(data.success){
                $("#msg").text(data.msg).css("color","green");
                //console.log(data.msg);
            }else{
                //console.log(data.msg);
                $("#msg").text(data.msg).css("color","red");
            }
        });
    });
});

6.jQuery中ajax请求-->post

$(function() {
    
    $("#submit").click(function() {
        //拿到账号
        var username = $("#username").val();
        //拿到账号
        var password = $("#password").val();
        
        $.post("/login.do",{username:username,password:password},function(data){
            if (data.success) {
                console.log(data.msg);
                $("#msg").text(data.msg).css("color","green");
            }else{
                console.log(data.msg);
                $("#msg").text(data.msg).css("color","red");
            }
        });
    });
    
});