attr与prop区别

$(function() {
    //渲染页面
    load()
    $("#title").on("keydown", function(event) {
            if (event.keyCode === 13) {
                var local = getDate()
                    // 把最新的数据追加个local数组
                local.push({ title: $(this).val(), done: false })
                saveDate(local)
            }
            load()
        })
        // 删除操作
    $("ol").on("click", "a", function() {
        var data = getDate()

        var index = $(this).attr("id")
            // splice：删除数组的元素
        data.splice(index, 1)
        saveDate(data)
        load()
    })
    $("ol,ul").on("click", "input", function() {
            var data = getDate()
            var index = $(this).siblings("a").attr("id")
                // 固有属性使用prop，自定义属性使用attr
            data[index].done = $(this).prop("checked")
        })
        // 读取本地存储的数据
    function getDate() {
        var data = localStorage.getItem("todolist")

        if (data !== null) {
            // 本地存储里面的数据是字符串格式的，需要使用JSON.parse转成对象格式
            return JSON.parse(data)
        } else {
            return []
        }
    }
    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data))
    }
    // 渲染加载数据
    function load() {
        var data = getDate()
            // 遍历之前先要清空ol里面的元素
        $("ol").empty()
            //通过.each遍历这个数据 
        $.each(data, function(i, n) {
            $("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "></a></li>")
        })
    }
})

id为a标签自定义的属性，在jQuery中使用attr调用该自定义的属性

复选框checkbox的自有属性checked，则使用prop

 

这是其中的一个li（里面包含复选框和a标签，为兄弟节点）可以使用siblings用对应a标签的id来代表复选框的id