温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery插件入门学习—— 学习目标:写一个星级评分插件(jquery插件基础写法)

发布时间:2020-07-28 19:48:10 来源:网络 阅读:763 作者:伊伊吖吖 栏目:web开发

1.jQuery.fn.extend(object);

     对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”,

     比如我们要开发一个星级评分插件,可以这么做

            jQuery.fn.extend({

              ratingStars:function(){   }

            })

           等价与

           jQuery.prototype.extend(ratingStars);

           还等价于:

                jQuery.fn.ratingStars = function( options ) { }

           调用时:

               $(".rating-stars").ratingStars(ratingOptions);

     2. $.extend( { }, defaults, options );    合并参数对象的写法

    3.星级评分插件实现

        步一:页面搭建

               <div class="rating-stars block" id="rating">

                <input type="number" readonly class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">

                <div class="rating-stars-container">

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                </div>

            </div>

                步二:jQuery插件实现过程1:

                     jQuery.fn.ratingStars = function( options ) {

                          //注意:此处为插件配置参数

                           var defaults = {

                                selectors: {

                                   

                                }

                            };

                        var settings = $.extend( { }, defaults, options );

                        //此处为这个插件的对象方法配置

                        var methods={

                            init: function(element){

                             } 

                        } 

                    /*此处返回值为一个循环调用methods对象的init方法来实现,this指向方法在外部获取元素对象实例的HTML: $(".rating-stars"),

                        调用执行时 $(".rating-stars").ratingStars(ratingOptions)调用后,实现星级评分插件的使用,并且可以实现在HTML一个页里调用

                        很多个重复结构

                    */

                     return this.each(function() {

                                    methods.init($(this));

                                });         

             }


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI