学习笔记之初识Jquery插件

Jquery的一些插件用得多了，就感觉插件有时候的优势挺明显的，便于扩展和维护以及复用。

想到就去尝试做，所以第一步先从网上了解一些相关的基础知识

大致阅读后，了解到部分规范，以及类级别，对象级别的概念。似懂非懂的先搞难一点或者说复杂一点的 从对象级别入手。

从这里开始

(function ($) {
  $.fn.myPlugin = function () {
    //你自己的插件代码
  };
})(jQuery);

依葫芦画瓢，先来设置一个标签内的文字颜色和大小，没想到很顺利的就成了。

(function ($) {
  $.fn.font = function (options) {
  	//默认值
  	var defualts = {
  		color:"#f00",
  		size:'14px'
  	};
  	//最终值
    var opts = $.extend({}, defualts, options);
    //对象
    var obj = $(this);
    obj.css({
    	'color':opts.color,
    	'font-size':opts.size
    });
  };
})(jQuery);

$('#header').font({
	color:'blue',
	size:'60px'
});

然后再把一个比较常用到的页面滚动时头部置顶的js代码套了一下，也比较顺利。

//原来它是长这样的
/*$(function(){
  //获取要定位元素距离浏览器顶部的距离
  var navH = $("#header").offset().top;
  //alert(navH);
  //滚动条事件
  $(window).scroll(function(){
    //获取滚动条的滑动距离
    var scroH = $(this).scrollTop();
    //滚动条的滑动距离大于定位元素距离浏览器顶部的距离，就固定，反之就不固定
    if(scroH>navH){
      $("#header").addClass('fixed');
    }else if(scroH<=navH){
      $("#header").removeClass('fixed');
    }
  })
});*/


//改写后，第一种方法
(function ($) {
  jQuery.scrollFixed = function (param) {

  	//获取要定位元素距离浏览器顶部的距离
	  var navH = $(param).offset().top;
	  //alert(navH);
	  //滚动条事件
	  $(window).scroll(function(){
	    //获取滚动条的滑动距离
	    var scroH = $(this).scrollTop();
	    //滚动条的滑动距离大于定位元素距离浏览器顶部的距离，就固定，反之就不固定
	    if(scroH>navH){
	      $(param).addClass('fixed');
	    }else if(scroH<=navH){
	      $(param).removeClass('fixed');
	    }
	  })
  };
})(jQuery);

//用法
//jQuery.scrollFixed('#header'); //改写后，第二种方法
(function ($) {
  $.fn.scrollFixed = function () {

  	var obj = $(this);
  	//获取要定位元素距离浏览器顶部的距离
	  var navH = obj.offset().top;
	  //alert(navH);
	  //滚动条事件
	  $(window).scroll(function(){
	    //获取滚动条的滑动距离
	    var scroH = $(this).scrollTop();
	    //滚动条的滑动距离大于定位元素距离浏览器顶部的距离，就固定，反之就不固定
	    if(scroH>navH){
	      obj.addClass('fixed');
	    }else if(scroH<=navH){
	      obj.removeClass('fixed');
	    }
	  })
  };
})(jQuery);

//用法
//$('#header').scrollFixed();

-- The End --