首页 > 其他分享 >标签属性修改attr与prop

标签属性修改attr与prop

时间:2022-10-23 17:22:10浏览次数:42  
标签:console log 标签 prop attr 属性

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
 

标签:console,log,标签,prop,attr,属性
From: https://www.cnblogs.com/Dollom/p/16818935.html

相关文章