标签属性修改attr与prop

attr()---------------自定义标签属性(自定义的属性拥有自定义的值)

在自定义标签属性中---------只能使用attr

prop()---------------原生的标签属性(原型链上带有的属性)

在原生的表单元素的标签属性 prop更好用

 

需求:标签属性的修改点击按钮切换a标签的href和target属性

    console.log("---------修改原生的非表单元素的标签属性--------");
​
    // attr()法  
    $("button").click(function() {
        // 原理版
        // 当写为键值对时即为对所选定对象进行修改
         $("a").attr("href", "http://www.jd.com")
         $("a").attr("target", "_blank")
         $("a").text("京东")
​
        // 简化版
        // 当函数都作用于同一对象时 就可以使用链式编程
        // $("a").attr("href", "http://www.jd.com").attr("target", "_blank").text("京东")
​
​
        // 对象传参法
        // 当使用的功能一致时,可以直接使用对象传参法
        $("a").attr({
            "target": "_blank",
            "href": "http://www.jd.com",
        }).text("京东")
    })

 

    console.log("----------------原生的表单元素----------------");
    //prop()---------在原生的表单元素的标签属性 prop更好用
    console.log($("#a1").attr("checked")); //undefined
    console.log($("#a2").attr("checked")); //checked
    console.log($("#a1").prop("checked")); //false
    console.log($("#a2").prop("checked")); //true

 

 console.log("----------------自定义标签属性----------------");
 // 在自定义标签属性中---------只能使用attr
 console.log($("button").attr("gg")); //书写的自定义属性
 console.log($("button").prop("gg")); //undefined