jQuery.extend(object):扩展jQuery对象本身,主要是用来扩展jQuery全局函数 ,调用时直接$.函数名(参数),如下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.extend(object)</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<script type="text/javascript">
jQuery.extend({
//求两个数的最大值
max:function(x,y){
return x > y? x: y;
},
//求两个数的最小值
min:function(x,y){
return x < y? x: y;
}
});
//测试上面扩展的jQuery全局函数
alert($.max(12,23));
</script>
</body>
</html>
在网页中运行结果如下:
jQuery.fn.extend(object):扩展 jQuery 元素集,主要用于扩展jQuery插件,调用时需要先创建jQuery对象,然后才能调用相应的函数,如下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.extend(object)</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
</head>
<body>
<form>
<p>请选择您的性别:</p>
<input type="radio" name="gender" value="男" />男<br />
<input type="radio" name="gender" value="女" />女<br />
<input type="button" value="确认" onclick="t()" />
</form>
<script type="text/javascript">
jQuery.fn.extend({
//为该匿名对象的属性values赋值一个匿名函数,并将此匿名对象添加到jQuery中
values:function(){
var gender = "您未选择性别";
this.each(function(){
if(this.checked){
gender ="您的性别是" + this.value;
}
});
return gender;
}
});
function t(){
var gender = $("[type='radio']").values();
alert(gender);
}
</script>
</body>
</html>
在浏览器中运行该程序,并点击“确认”按钮会出现下面的提示:
当选择“女”并点击确认会出现下面的提示: