JQ面向对象的封装步骤（实用写法）

电玩女神 2022-05-22 10:34 175阅读 0赞

一：函数自己调用自己

/*CSS页面*/
        #box1{ width: 200px; height: 200px; background: red; margin :100px auto; }
        .box2{ width: 200px; height: 200px; background: blue; margin: 200px auto; }

<div id="box1"></div>
        <div class="box2"></div>

// JS 页面 (面向对象封装)
    // 1.创建构造函数
    var Silder = function(ele){ 
        this.$ele = $(ele)
    }
    //2.写面向对象的方法 ===> 函数
    Silder.prototype = {
        initialize:function(){ 
            this.$ele.click(function(){ 
                console.log(1)
            })
        }
    }
    // 调用自己函数
        var silder = new Silder(this)
        silder.initialize();
    
    // 打开页面后直接console 一个

二：使用JQ元素进行调用函数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素的调用</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style type="text/css"> #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; background: blue; margin: 200px auto; } </style>
    </head>
    <body>
        <div id="box1"></div>
        <div class="box2"></div>
    </body>
    </html>
    <script type="text/javascript"> // 1.创建构造函数 // ele 是元素 opt 是 文档(jq所有内容) var Silder = function (ele,opt) { //元素 属性 this.$ele = $(ele); } //2.方法 ===> 函数 Silder.prototype = { // 初始化函数 页面加载之前就要添加所有的事件 initialize:function() { this.$ele.click(function () { console.log(1) }) } } //3. 类方法返回对象 $.fn.playsee = function (option) { var silder = new Silder(this) return silder.initialize(); } //4.调用 $('#box1').playsee() </script>

三：自定义变量的改变与初始化

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义变量的调用</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style type="text/css"> #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; background: blue; margin: 200px auto; } </style>
    </head>
    <body>
        <div id="box1"></div>
        <div class="box2"></div>
    </body>
    </html>
    <script type="text/javascript"> // 1.创建构造函数 // ele 是元素 opt 是 文档(jq所有内容) var Silder = function (ele,opt,name,age) { //元素 属性 this.$ele = $(ele); //定义用户可更改的默认值 ===> 以后用的变量(不确定的值或者说是数据) this.defaults = { 'name': 'red', 'age':18 }; //定义并接受合成设置的值 this.settings = $.extend({}, this.defaults, opt); } //2.方法 ===> 函数 Silder.prototype = { // 初始化函数 页面加载之前就要添加所有的事件 initialize:function() { var _this = this; this.$ele.click(function () { console.log(1) console.log(_this.settings.name) console.log(_this.settings.age) }) } } //3. 类方法返回对象 $.fn.playsee = function (option) { var silder = new Silder(this,option) return silder.initialize(); } //4.调用 //第一个div $('#box1').playsee() //第二个div $('.box2').playsee({ 'name':'杨宝', 'age':18 }) </script>

四：封装一个轮播（插件）

// 1.创建构造函数
    // ele 是元素 opt 是 文档(jq所有内容)
    var Silder = function (ele,opt) { 
            //1-1 元素 属性
            this.$ele = $(ele);
            //1-2 常量 不变的值
            this.config = {
                // 图片列表
                'lis':this.$ele.find('ul li'),
                //左右按钮
                'prev':this.$ele.find('.left'),
                'next':this.$ele.find('.right'),
                // 下标
                'icoNav':this.$ele.find('ol li span'),
                'index':0,
                'timer':null
            }
            //1-3 定义用户可更改的默认值 ===> 以后用的变量(不确定的值或者说是数据)
            this.defaults = {
                // 列表数据添加
                'cArr': [],
                // 选中下标样式
                'iconClass':'',
                // 列表长度
                'lisNum':7,
                // 速度
                'speed':1000,
                'play':true,
                'onbox':true,
                'onimg':false
            };
            //1-4 定义并接受合成设置的值
            this.settings = $.extend({}, this.defaults, opt);
        }
    //2.方法 ===> 函数
        Silder.prototype = { 
            // 初始化函数 页面加载之前就要添加所有的事件
            initialize:function() { 
                var _this = this;
                // 判断是否 添加定时器
                if (this.settings.play) {
                    this.play();
                };
                //判断是否移到box上停止定时器
                if (this.settings.onbox) {
                    this.$ele.mouseover(function(){ 
                        _this.clear();
                    });
                    this.$ele.mouseout(function(){ 
                        _this.play();
                    });
                }
                //判断是否给图片添加点击事件
                if (this.settings.onimg) {
                    this.$ele.on("click","."+this.settings.cArr[3],function(){ 
                        _this.left();
                    });
                    this.$ele.on("click","."+this.settings.cArr[5],function(){ 
                        _this.right();
                    });
                }
                // 左右按钮点击函数
                this.config.prev.click(function () { 
                    _this.left();
                })
                this.config.next.click(function () { 
                    _this.right();
                })
                // 下标点击函数
                this.config.icoNav.each(function (i,elem) { 
                    $(elem).click(function () { 
                        _this.byIndexInto(i)
                    })
                })
    
    
            },
            left:function () { 
                var _this = this;
                this.settings.cArr.unshift(this.settings.cArr[this.settings.lisNum-1]);
                this.settings.cArr.pop();
                this.config.lis.each(function (i,elem) { 
                    $(elem).removeClass().addClass(_this.settings.cArr[i]);
                })
                this.config.index -- ;
                if (this.config.index < 0 ) {
                    this.config.index = this.settings.lisNum-1
                }
                this.show();
            },
            right:function () { 
                var _this = this;
                this.settings.cArr.push(this.settings.cArr[0]);
                this.settings.cArr.shift();
                this.config.lis.each(function (i,elem) { 
                    $(elem).removeClass().addClass(_this.settings.cArr[i]);
                })
                this.config.index ++ ;
                if (this.config.index > this.settings.lisNum-1 ) {
                    this.config.index = 0
                }
                this.show();
            },
            byIndexInto:function (index) { 
                // 传递的index是 下标的 0 1 2 3 4 5 6 
                var _this = this;
                var textindex = index;
                var num = textindex-this.config.index;
                if (num==0) {
                    return;
                } else if (num>0) {
                    var newarr = this.settings.cArr.splice(0,num);
                    this.settings.cArr=$.merge(this.settings.cArr,newarr);
                    this.config.lis.each(function (i,elem) { 
                        $(elem).removeClass().addClass(_this.settings.cArr[i]);
                    })
                    this.config.index=textindex;
                    this.show();
                } else if (num<0) {
                    this.settings.cArr.reverse();
                    var oldarr=this.settings.cArr.splice(0,-num)
                    this.settings.cArr=$.merge(this.settings.cArr,oldarr);
                    this.settings.cArr.reverse();
                    this.config.lis.each(function(i,elem){ 
                        $(elem).removeClass().addClass(_this.settings.cArr[i]);
                    })
                    this.config.index=textindex;
                    this.show();
                }
            },
            // 清除定时器
            clear:function () { 
                clearInterval(this.config.timer)
            },
            play:function () { 
                this.config.timer = setInterval(()=>{
       this.right()},this.settings.speed)
            },
            show:function () { 
                this.config.icoNav.eq(this.config.index).addClass('blue').parent().siblings().children().removeClass('blue')
            }
        }
        //3. 类方法返回对象
        $.fn.LunBo = function (option) { 
            var silder = new Silder(this,option)
            return silder.initialize();
        }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;padding: 0; } #box{ width: 100%; height: 340px; margin-top: 100px; position: relative; background-color: #FFFFFF; } li{ list-style: none; transition: all 0.3s ease-out; opacity: 0; } #box>ul>li{ position: absolute; top: 0; left: 0; } #box>ul{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px; } #box>ol{ width: 1200px; height: 30px; position: absolute; bottom: 0; left: 50%; margin-left: -600px; text-align: center; padding-top: 8px; /*background: red;*/ } #box>a{ position: absolute; top: 50%; width: 60px; height: 100px; line-height: 100px; font-size: 30px; color: #fff; text-decoration: none; background: rgba(0,255,0,0.5); margin-top: -50px; text-align: center; } .right{ right: 0; } img{ width: 751px; height: 300px; border: none; float: left; } #box>ol>li{ display: inline-block; width: 35px; height: 5px; padding-top: 4px; /*background: red;*/ opacity: 1; } #box>ol>li>span{ display: block; width: 35px; height:10px; background: red; cursor: pointer; } .p1{ transform: :translate(1120px,0) scale(0.81); } .p2{ transform:translate(896px,0) scale(0.81); } .p3{ transform:translate(672px,0) scale(0.81); } .p4{ transform:translate(448px,0) scale(0.81); transform-origin:100% 50%; opacity: 0.8;z-index: 2;} .p5{ transform:translate(224px,0) scale(1); z-index: 3;opacity: 1; } .p6{ transform:translate(0px,0) scale(0.81); transform-origin:0 50%; opacity: 0.8;z-index: 2; } .p7{ transform:translate(-224px,0) scale(0.81); } #box>ol>li>span.blue{ background: blue; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="FacingtheGiants.js"></script> </head> <body> <div id="box"> <ul> <li class="p1"><img src="img/11.png"></li> <li class="p2"><img src="img/22.png"></li> <li class="p3"><img src="img/33.png"></li> <li class="p4"><img src="img/44.jpg"></li> <li class="p5"><img src="img/55.jpg"></li> <li class="p6"><img src="img/66.jpg"></li> <li class="p7"><img src="img/77.jpg"></li> </ul> <a href="javascript:;"class="left" style="z-index: 99"><</a> <a href="javascript:;"class="right" style="z-index: 99">></a> <ol> <li><span class="blue"></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ol> </div> </body> </html> <script type="text/javascript"> $(function () { $('#box').LunBo({ //图片列表 'cArr':["p1","p2","p3","p4","p5","p6","p7"], // 是否自动播放(添加定时器) 'play':true, // 定时器的时间 'speed':5000, // 下标的颜色 'iconClass':'blue', // 是否移到整个div上停止定时器 'onbox':true, // 是否给图片添加点击事件 'onimg':false, // cArr的长度 'lisNum':7 }) }) </script>

转自：[https://blog.csdn.net/Facing\_the\_Giants/article/details/75206260][https_blog.csdn.net_Facing_the_Giants_article_details_75206260]

[https_blog.csdn.net_Facing_the_Giants_article_details_75206260]: https://blog.csdn.net/Facing_the_Giants/article/details/75206260