jQuery val() 方法扩展与自定义属性同步实现

jQuery val() 方法扩展与自定义属性同步实现

以下提供修改或扩展jQuery内置方法的代码示例。

jQuery作为一款功能强大且易于使用的JavaScript库，深受开发者喜爱。

尽管jQuery应用广泛且表现优异，但它并非万能。在某些特定场景下，原生方法可能无法完全满足需求，因此有时需要对其原有方法进行扩展或修改，同时务必确保保留其原始功能。

具体代码实现如下。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>本站</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
return function () {
var s = this;
var a = "data-property";
var p = s.attr(a);
var isset = arguments.length > 0;
var v = isset ? arguments[0] : null;
         
if (isset&&typeof(base)=="function") {
base.call(s, v);
    } 
} else {
v = base.call(s);
    }
if (p) {
if (isset) {
s.attr(p, v);
return s
      }
} else {
return s.attr(p)
      }
    }
} else {
if (!s.is(":input")){
if (isset) {
s.text(v); return s;
        } 
} else {
return s.text();
        } 
      }
} else {
return isset ? s : v;
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
console.log($("#show").html($("#lbl").val()+"<br>"+$("#txt").val()));
})
</script>
</head>
<body>
<span id="lbl">本站</span>
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<div id="show"></div>
</body>
</html>

上述代码展示了对jQuery的val()方法进行扩展的具体实现，下文将详细解析其工作原理。

代码注释说明：

1. $.prototype.val = function (base) {}(($.prototype.val)，通过闭包方式重新定义jQuery的val()方法，并将原始val()方法作为参数base传入，从而保留原有功能。 2. return function (){}，该方法返回一个新的函数对象。 3. var s = this，将当前jQuery对象实例的引用赋值给变量s，此时this指向jQuery对象。 4. var a = "data-property"，声明变量a并赋值为字符串"data-property"，用于后续操作。 5. var p = s.attr(a)，获取元素上名为data-property的自定义属性值。 6. var isset = arguments.length > 0，判断调用扩展后的val()方法时是否传递了参数。 7. var v = isset ? arguments[0] : null，若传递了参数，则获取第一个参数值，忽略其他参数。 8. if (isset&&typeof(base)=="function") { base.call(s, v); }，若传递了参数且base为函数，则调用base函数以设置元素值。