本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html

 

明日在玩jquery,今日就把这几天的读书做3个总计。

率先jquery开发自定义的控件分两大类(作者要好那样分的),第三就是不带参数的插件,还有一类便是带参数的jquery插件了。

先从不难的开始。首先我们要打听一下怎么叫jquery,jquery是对js的一密密麻麻的分装,说白了他正是js的分装以往的产物。然则大家用jquery来兑现会愈发的有利。使用jquery的插件也很简单。只须求jquery的官网下载最新版本的jquery,然后再大家的网页的head上面引用一下就好了。例如:

jQuery 1😉

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery引用放的位子</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
      <!--这里写自己插件的地方-->
</script>
</head>

jQuery 2😉

这里有少数亟需规定,正是jquery的引用的地点一定在您本人插件的地点前边,因为浏览器在条分缕析你的html的时候,是从上到下的,也正是说若是您先写插件后引用jquery,那么浏览器根本就不认识您的插件中的标示符。
无参jquery插件的模板:

jQuery 3😉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不带参数的jquery插件开发</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.extend({
                myPlugName:function(){
                    $(this).click(function(){
                        alert($(this).val());    
                    });    
                }
            });    
        })(jQuery);
    </script>
</head>

<body>
    <input type="button" value="点击我" id="btn" /> </body>

    <script type="text/javascript">
          $("#btn").myPlugName();
    </script>
</html

jQuery 4😉

无参的格式为:

jQuery 5😉

(function($){
     $.fn.extend({
         myPlugName:function(){<!--myPlugName你的插件的名字,根据自己的情况来命名-->
             //dosomethings
         });    
     }
     });    
})(jQuery);

jQuery 6😉

此处大致的解释一下,$.fn.extend是1个实例的恢宏,不过$.extend是类的恢宏,假如不通晓多看一下解说,大概是去api.jquery.com看一下jquery的法定手册。jQuery和$是等价的,你能够认为是小名。myPlugName这一个是插件的名字,根据本人的事态来命名自身的拆建吧!接着正是写一些您想要做的事体了!不会细小略吗!哈哈

带参数的jquery插件 首先看一下代码:

按 Ctrl+C 复制代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html
xmlns=”http://www.w3.org/1999/xhtml"&gt; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文书档案</title> <script
src=”http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
<script type=”text/javascript”> (function($){
$.fn.hilight=function(options){ var defaults={ foreground:’red’,
background:’yellow’ }; var opts = $.extend(defaults,options);
$(this).css(“background-color”,opts.background);
$(this).css(“color”,opts.foreground); }; })(jQuery); </script>
</head> <body> <div id=”myDiv”>This is a Params
JQuery!</div> </body> <script type=”text/javascript”>
$(“#myDiv”).hilight({foreground:’blue’}); </script> </html>

按 Ctrl+C 复制代码

此地和不带参数的jquery插件大致,不过还有稍稍的不等,最终$(“#myDiv”).hilight({foreground:’blue’});来给jquery传递参数!假使不写的话,那就用jquery自带的暗中认可的值。jquery插件在那之中的一个正式模板为:

jQuery 7😉

(function($){
            $.fn.hilight=function(options){
                var defaults={
                    foreground:'red',
                    background:'yellow'    
                };
                var opts = $.extend(defaults,options);
                //dosomethings
            };
        })(jQuery);

jQuery 8😉

此间须求专注一句话,var opts =
$.extend(defaults,options);那句话的意味是吧defaults的性质和options的性质合并并保留到opts中。不懂的话参考:http://api.jquery.com/jQuery.extend/

此处当然标准的模板不是只是上面这么一种还有不少种,小编只是整理了一种为初学者学习!

最后请允许笔者拷贝一段话,希望对你有效:

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。

Stallman 先生认为最大的兴奋是让祥和前进的软件让大家来行使了!

相关文章

网站地图xml地图