本文详解jQuery扩展对象的两种核心方式：对jQuery类本身的扩展（$.extend）与对jQuery对象实例的扩展（$.fn.extend）。通过一个右下角滑动提示框ShowMsg的完整代码示例，演示如何定义参数、控制动画效果及自动关闭逻辑，帮助开发者理解并应用这两种扩展模式。
jQuery扩展对象方法实战
本文通过具体实例解析jQuery扩展对象的方法，提供可参考的代码实现。
根据项目实际需求，需要对jQuery进行功能扩展，具体需求如下。
项目要求在浏览器右下角显示操作错误或系统提示信息，并具备滑动移出及手动关闭效果。为此，自定义了一个表现良好的弹出框组件，并通过给jQuery添加ShowMsg方法来实现。
首先展示相关代码实现。
$.fn.extend({
ShowMsg: function (width, height, msgTitle_, msgContent_) {
var TopY = 0; //初始化元素距父元素的距离
$("#messageTitle").html(msgTitle_);
$("#messageResDes").html(msgContent_);
$(this).css("width", width + "px").css("height", height + "px"); //设置消息框的大小
$(this).slideDown(1000); //弹出
$("#messageTool").css("margin-top", -height); //为内容部分创建高度 溢出
$("#message_close").click(function () {//当点击关闭按钮的时候
if (TopY == 0) {
$("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
}
else {
$("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样
}
return false;
});
$(window).scroll(function () {
$("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //当滚动条滚动的时候始终在屏幕的右下角
TopY = $("#message").offset().top; //当滚动条滚动的时候随时设置元素距父原素距离
});
setTimeout(function () {
if (TopY == 0) {
$("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
}
else {
$("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时 ie下和Firefox效果一样
}
return false;
}, 8000); //8s后自动滑动关闭
}
})
代码逻辑清晰且注释详细，接下来重点讲解jQuery扩展的具体实现方式。
上述示例使用了$.fn.extend进行扩展，这属于对jQuery原生对象的方法扩展。jQuery的扩展机制主要分为两类：一是对jQuery类本身进行扩展（JQuery.extend），二是对jQuery对象实例进行方法扩展（$.fn.extend）。下文将分别说明。
1、使用JQuery.extent对jQuery类本身进行扩展：
jQuery类本身的扩展：$.extend
JQuery.extend({
showInfor:function(0{
//do something
}
});
具体调用方式见下文示例。
$.showInfor();//这样就调用到了
2、使用$.fn.extend进行对象方法扩展：
本文开头的示例即采用此方式，直接查看调用代码即可。
jQuery对象方法的扩展：$.fn.extend
$("#messageBox").ShowMsg(230,100,"系统提示","提示信息");
说明：$.fn.extend用于为所有jQuery对象扩展方法。只要jQuery能够定位到DOM元素，即可直接调用该方法。因此，只需先选中目标对象，随后直接调用扩展方法即可。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述内容对大家掌握jQuery程序设计有所帮助。