学习笔记之初识Jquery插件

发布于 2016-01-25 作者 [重庆SEO]

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

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

JQuery插件开发入门
http://www.cnblogs.com/FlyFive/archive/2013/06/19/2961470.html
jQuery插件开发入门
http://www.css88.com/archives/4821
深入理解jQuery插件开发
http://blog.jobbole.com/30550/
jQuery插件原来如此简单——jQuery插件的机制及实战
http://www.cnblogs.com/artwl/archive/2012/02/05/2339315.html

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

从这里开始

(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();
DEMO和查看源码:点这里