jquery插件教程（一）

Posted

最近网站上使用了很多jquery插件，发现jquery插件很好用，这里也开始学习jquery插件的编写。

学习一门技术最好的方法当然是去官方网站上去瞧瞧。官网地址：jQuery-Plugins-Authoring

还记得我们第一次学习c吗？老师第一节课教的 HELLO WORD。呵呵，下面我们也来写个jquery插件的helloword。

代码很简单

(function( $ ) {    //这里是外面的框架格式
  $.fn.myPlugin = function() {    //这个格式也是固定的 myPlugin 是插件名字。你可以随便改

    $(this).click( function () { alert("HELLO WORD"); });    //这句代码的意思是，单击绑定的元素弹出一个框框，框框里面就是HELLO WORD了

  };
})( jQuery );    //这里也是是外面的框架格式

外面的框框的格式是固定的，定义插件名字后面的 function（参数1，参数2，…，参数N）里面可以放参数的，参数在里面用就好了。

把上面的代码复制，保存为sample.js。

这样一个jquery插件就写好了。接下来是使用了。

不管怎样，首先调用jQuery库文件，还有jquery.scrollLoading.js，您可以直接在页面的某处添上如下的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>

这个插件的方法名是 myPlugin 所以

<script type="text/javascript">
$(document).ready(function(){
    $('#clickme').myPlugin();
});
</script>

表示给ID为clickme绑定了我写的方法。

下面是所有的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery插件案例一</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#clickme').myPlugin();
});
</script>
</head>
<body>
<div style="margin: 100px auto;width:700px;">
<a id="clickme" href="#">点我弹框框</a>
</div>
</body>
</html>

示例页面:demo

本文为原创转载请注明出处 83

Comments are closed.