jQuery如何封装输入框插件

要封装一个jQuery输入框插件，可以遵循以下步骤：

步骤一：定义插件名称和默认参数

//定义插件名称和默认参数
$.fn.myInputPlugin = function(options){
    //合并插件的默认参数和传入的参数
    options = $.extend({}, $.fn.myInputPlugin.defaults, options);
};
//定义默认参数
$.fn.myInputPlugin.defaults = {
  placeholder: '请输入文字',
  textColor: '#333',
  fontSize: '16px'
};

步骤二：遍历每个匹配元素并处理

//遍历每个匹配元素并处理
return this.each(function(){
  var element = $(this);
  //调用options渲染插件
  //...
});

步骤三：渲染输入框插件

//渲染输入框插件
function renderPlugin(){
  var placeholder = options.placeholder;
  var textColor = options.textColor;
  var fontSize = options.fontSize;
  //生成输入框DOM结构
  var inputDom = '<input type="text" placeholder="' + placeholder + '">';
  //渲染输入框样式
  element.css({
    color: textColor,
    fontSize: fontSize
  });
  //插入DOM结构
  element.html(inputDom);
}

示例一：简单的输入框插件

//定义输入框插件
$.fn.myInputPlugin = function(options){
  options = $.extend({}, $.fn.myInputPlugin.defaults, options);
  return this.each(function(){
    var element = $(this);
    renderPlugin();
    //渲染输入框插件
    function renderPlugin(){
      var placeholder = options.placeholder;
      var textColor = options.textColor;
      var fontSize = options.fontSize;
      //生成输入框DOM结构
      var inputDom = '<input type="text" placeholder="' + placeholder + '">';
      //渲染输入框样式
      element.css({
        color: textColor,
        fontSize: fontSize
      });
      //插入DOM结构
      element.html(inputDom);
    }
  });
};
//定义默认参数
$.fn.myInputPlugin.defaults = {
  placeholder: '请输入文字',
  textColor: '#333',
  fontSize: '16px'
};

//调用输入框插件
$(document).ready(function(){
  $('.input-container').myInputPlugin();
});

示例二：带搜索按钮的输入框插件

//定义输入框插件
$.fn.myInputPlugin = function(options){
  options = $.extend({}, $.fn.myInputPlugin.defaults, options);
  return this.each(function(){
    var element = $(this);
    renderPlugin();
    //渲染输入框插件
    function renderPlugin(){
      var placeholder = options.placeholder;
      var textColor = options.textColor;
      var fontSize = options.fontSize;
      //生成输入框DOM结构
      var inputDom = '<input type="text" placeholder="' + placeholder + '"><button class="search-btn">搜索</button>';
      //渲染输入框样式
      element.css({
        color: textColor,
        fontSize: fontSize
      });
      //插入DOM结构
      element.html(inputDom);
      //搜索按钮事件绑定
      $('.search-btn').on('click', function(){
        var keyword = $('input', element).val();
        alert('开始搜索：' + keyword);
      });
    }
  });
};
//定义默认参数
$.fn.myInputPlugin.defaults = {
  placeholder: '请输入文字',
  textColor: '#333',
  fontSize: '16px'
};

//调用输入框插件
$(document).ready(function(){
  $('.input-container').myInputPlugin({
    placeholder: '请输入搜索关键字'
  });
});

这样，使用者只需要在页面中引入jQuery库和自定义的输入框插件，即可轻松地将该插件应用于任意输入框。