jquery插件小试牛刀：文本框为空时默认文字显示，获得焦点后默认文字消失

　　最近粗略学习了一下jQuery插件制作的基本原理和方法，再次感受到jQuery的方便和强大之处。本着“现学现用”的精神，马上动手做了个非常简单的文本框插件，就当练手了。目标效果很简单：一个文本框，当没有内容且失去焦点时显示默认文字（可以加点样式以突出显示跟正常输入文字的区别），获得焦点时去掉默认文字。相信大家经常看到这种效果，尤其在搜索框中比较常用。废话不多讲，直接贴代码。

(function ($) {
    
    $.fn.smartFocus = function (options) {
        var defaults = { defaultText: '请输入文字' };
        var opt = $.extend(defaults, options);
        return this.each(function () {
            $(this).focus(function () {
                var text = $(this).val();
                if (text == opt.defaultText) {
                    $(this).val('');
                }
            }).blur(function () {
                var text = $(this).val();
                if (text == '') {
                    $(this).val(opt.defaultText).css("font-style", "italic");
                }
                else {
                    $(this).css("font-style", "normal");
                }
            });
            if ($(this).val() == '') {
                $(this).val(opt.defaultText).css("font-style", "italic"); ;
            }
            else {
                $(this).css("font-style", "normal");
            }
        });
    };
   
})(jQuery);

　　稍微解释下代码。代码最外层是写jQuery插件的惯用伎俩：匿名函数。

(function($){

})(jQuery)

定义好后立即传入jQuery对象调用它。写插件的基本原理是扩展jQuery对象。$.fn.extendName=function(args){...}，extendName即为插件的名字。另外值得一提的是$.extend函数，它有多个重载版本，这里用的就是将第一个参数之后的对象合并到第一个参数并返回合并后的值。为什么要合并呢？这样方便使用时传入自定义参数，没有参数时使用默认的。return this.each(function(){...})最为关键了，它返回jQuery选择器选中的对象，里面的函数就是对选中的对象进行各种操作。以上就是对jQuery插件的基本写法的介绍。至于插件本身，就很简单了。就是文本框的focus和blur事件处理，具体看看代码就清楚了。

　　调用方法：$("#txtName").smartFocus({ defaultText: '请输入姓名' });

　　效果如下图所示：

　　初次写jQuery插件，只是实现了最基本的功能。就当写个备忘录，也希望对初学者有点帮助。

我的网站www.zoneky.com/

转载于:https://www.cnblogs.com/lzkwin/archive/2012/08/18/2645337.html