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

最新推荐文章于 2021-12-01 14:16:59 发布
最新推荐文章于 2021-12-01 14:16:59 发布
阅读量3.6k 收藏 5
点赞数 2
分类专栏： jq 文章标签： jq插件 面向对象插件

一：函数自己调用自己

/*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  一个

二：使用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>

转自：https://blog.csdn.net/Facing_the_Giants/article/details/75206260

前端小狮
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js面向对象
starry__sty的博客
09-22 148
1：什么是对象？ a:对象就是由若干个键值对，无须组成的数据类型，被称之为对象。 b:简单理解，提供了特有的方法和属性就是对象！ c:“对象”是一个容器，封装了“属性”（property）和“方法”（method）。 举例： var o={ name:'tom', age:12, fun:function(){ alert(1) } } 2:键值对？ 花括号里面冒号前被称之为键，冒号后被称之为值，通过键获取值。 3：什么是面向对象？ 面向对象是一种编程思想，通过这种思想来完成代码的编程。(oo
JQ面向对象
weixin_30820151的博客
11-05 159
静态方法：某种类型才有的方法，这个方法干的事情只有类型本身有关，不受具体实例对象的影响，在C#语言中，它用static表示，VB中用share表示，而在jq中我们一般用$或者JQuery表示JQ类型，而静态方法扩展一般用$.extend。 实例方法：当类型被表示为具体事物时，它被称为对象，或者实例对象，它所拥有的行为（方法）我们称为实例方法（一般书上不这样叫，一般都叫方法，但我比较...
JQ面向对象的封装步骤
Facing_the_Giants的博客
07-16 2284
一：函数自己调用自己/*CSS页面*/ #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; ba
jquery 面向对象写法
热门推荐
陈雨
07-17 1万+
C语言是面向过程的编程思想，C++是面向对象的编程思想。但是这也不妨碍C使用面向对象的方法编程。这里C不是重点，就不说了。 这里要说一下jquery--javascript的一个最好的库，没有之一。从最初的2000多行发展到现在的上万行，极大丰富了JavaScript的操作方式。 第一次看jquery源码时，可以说是感觉无法看下去，各种设计模式，正则表达式，看的想把源码删了。不
JQ 插件简单实用步骤条
10-30
JQ 插件简单实用步骤条
jquery实现烟花效果(面向对象)
11-20
本文实例为大家分享了jquery...烟花效果(面向对象)</title> <style type="text/css"> *{padding: 0;margin: 0} body{overflow: hidden;width: 100%;height: 100%;background: #000; } div{position: a
jq带节点的步骤进度条
09-24
该功能是利用jq实现的步骤进度条，包括两种样式，输入步骤，展示事件进行到第几步，方便查看，简易上手的网页步骤流程进度条代码
jq封装放大镜.rar
06-18
jquery封装类购物车中图片放大特效，方法灵活，工场模式，适合新手借鉴参考，对于新手有很好的学习价值。
jq简单实用的封装插件，轮播图
11-10
自己写的一个比较简单实用的轮播图插件，大家可以借鉴一下
对jquery的ajax封装
05-03
对常用jquery的ajax函数进行封装，便于调用，会有不同错误的错误提醒
js面向过程与面向对象编程示例（使用jquery库）
xiongqiangwin1314的专栏
08-02 2801
js面向对象与面向过程编程的示例，拿常见的鼠标移动移出操作，显示与隐藏div作为示例。
jquery面向对象编程
tmaic的专栏
10-09 1万+
最近又在搞前端的一些交互，对js面向对象编程又有了一些新的理解; 情景如下： 现在页面中有3个区域：A,B,C;点击不同的tab切换不同的层。看一下HTML代码: A B C tab内容显示与隐藏，用的样式css控制的： #switch
JavaScript04
RamboRMB的博客
11-17 321
JavaScript04 1.操作BOM对象（重点） 浏览器介绍 BOM：浏览器对象模型 //location代表当前页面的URL信息 host:"www.baidu.com" href:"https://www.baidu.com/" protocol:"https:" reload:f reload() //刷新网页 //设置新的地址 location.assign('https://blog.kuangstudy.com/') //document代表当前的页面，HTML DOM文件树 docu
jquery中面向对象的函数
xixibandian的博客
12-01 386
$(function () { var getDataList ={ init​:fun​ction​()​{​ this.addListenner(); }​​ addListenner:function(){ var self = this var url = bpmUrl + "/workflow/anonData/g...
面向对象编写jQuery插件
vcxiaohan的博客
12-15 1671
/** * jquery.timeline.js plugin * * * * */ ;(function($, window, document, undefined) { var plugName = "timeline", defaults = { name: "hwb" }; function TimeLine(data,el,options) { this
jQuery 面向对象编程
sqyNick
08-08 2710
1.jQuery代码 $(function(){ //创建对象,将对象命名为sun var sun =new Object(); //公有属性 sun.name="sqy"; //公有方法 sun.getName=function(){ return sun.name; }; //私有属性 var age=2
jq的$封装实现和css()方法实现(全在代码里)
qq_31906983的博客
11-14 3820
//传入window是为了: //1.减少对window的搜索过程 //2.有利于代码压缩 //传入undefined是为了: //防止在ie678中,undefined可以被传入数值改变 (function (window, undefined) { var jQuery = function (sele...
jq判断对象是否为空
最新发布
09-22
jq判断对象是否为空的方法有几种。首先，可以使用jQuery的isEmptyObject方法。例如，通过调用$.isEmptyObject(data)来判断对象data是否为空。第二种方法是使用选择器来判断对象是否存在。例如，可以使用$("#target_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值