JQ面向对象的封装步骤

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Facing_the_Giants/article/details/75206260

一:函数自己调用自己

/*CSS页面*/
    #box1{
        width: 200px;
        height: 200px;
        background: red;
        margin :100px auto;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: blue;
        margin:  200px auto;
    }
<!-- HTML页面 -->
    <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  一个 1 

二:使用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>
<!-- 页面点击 #box  后 console  一个  1 --> 

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

<!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>
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页