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

最新推荐文章于 2024-09-25 11:27:22 发布
最新推荐文章于 2024-09-25 11:27:22 发布
阅读量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

前端小狮
关注
专栏目录
面向对象封装插件思想 jquery
刀锋麒麟
05-05 2433
写了很多年的js  对于封装成一个通用的插件 用过很多种方法  现在来一一来记录下 所谓积累便是进步 每天一点点  每天就是一大步 废话不多说我来看下 1.常用的jq 申明表达式 进行封装的对象 看起来是不是很清晰 又不污染变量 var  a = function (){ return { auto:function(pm){ var loader = { num:"3" } va
前端面试基础合集——JQ
HarryHY的博客
12-27 631
1.html5新特性和css3的新特性有哪些？ html5新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 localStorage&sessionStorage 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、emai...
JQ面向对象的封装步骤
Facing_the_Giants的博客
07-16 2317
一：函数自己调用自己/*CSS页面*/ #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; ba
jQ封装接口
peijiajing的博客
10-14 612
封装完毕以后，用起来和vue的axios一样 $(function(){ // 封装$.ajax window.jQuery.axios=(options)=>{ return new Promise((resolve,reject)=>{ $.ajax({ url:options.url, method:options.method, data:options.data, success:res=>{ resolve($.trim(
面向对象的封装性
最新发布
zxx的博客
09-25 766
面向对象封装性的详细介绍
jq接口的封装方法
weixin_45293868的博客
12-05 480
$(function() { // Authentication & Configuration var accessToken = $.cookie(‘Abp.AuthToken’); var myRole = $.cookie(‘Abp.MyRole’); var apiServer = window.hthrefs; // || ‘http://localhost:5634’; var appDomain = ‘localhost’; var expires = 1; // day $.ext
jQuery的封装
kokkoko的博客
05-03 329
jQuery的封装ajax请求 在 jQuery中 给我们封装了 Ajax请求 不要考虑兼容，跨域等问题，jQuery全部解决，只需要在设定请求时，设定不同的参数，就可以完成不同的请求 jQuery中 封装的 ajax请求 有3种 1，$.get() get请求方式 参数有4个，必填参数是 url地址 其他参数都是选填参数，可以没有 参数的形式是对象形式 $.get({ ​ url:地址（必填） ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
Jquery考试面试题（二）
yangyabing2020的博客
06-17 7661
一、单选题（共30题，每题2分） 得分：2.0分 1. Jq中找到指定div元素id为user错误的 A $("#user") B $("#"+“user”) C $(“div[id=user]”) D $(“div[id==user]”) 正确答案: D 解析: 元素获取 得分：2.0分 2. 有代码 function foo(){ var a=10; return function(){ console.log(a++) } } foo()(); 运行之后，会在控制台中打
JavaScript笔记
shine_my的博客
03-13 3407
JavaScript笔记
原生JS 面试题 （基础）（概率大）
m0_64191440的博客
08-30 7817
2022 最新 前端面试题 持续更新中
jQuery js代码封装对象
love_zhang_xin的专栏
08-20 1546
jQuery封装对象，首先要创建一个object对象 var alarmMain = new Object(); alarmMain.todayAlarmsList = function(){ alert(1); } 引用改js后，调用方式为 alarmMain.todayAlarmsList（）；  ...
jQuery 对象封装
qq_38641399的博客
09-24 460
原生js 封装 function Person (info){ this._init_(info); } Pserson.prototype = { constructor : Person, _init_ : function(info) { this.name = info.name; this.age = info.age; this.sex = info.sex; } sayHello:function(){
jquery 接口封装
qq_30330579的博客
08-09 947
1.封装接口请求后返回的具体值 // ajax 接口请求封装-返回具体值 ajaxPostVal:function(url,data='') { var rel = ''; $.ajax({ type: 'post', async: false,//同步-自上而下 ...
jq封装方法步骤
weixin_30535913的博客
12-03 146
例子如下：(function($) { var compiled = {}; $.fn.handlebars = function(template, data) { if (template instanceof jQuery) { template = $(template).html(); } ...
封装http接口地址-----灵活应付服务器变更(JQ版+原生版)
weixin_47886687的博客
10-10 477
<font color=#999AAA >开发过程中有可能经历本地、测试、上线等情况，时常需要更换不同服务器的情况，如果ajax请求过多对后期维护是大工程。
Jquery封装对象实例
u010548226的博客
05-14 489
jQuery自定义类封装 jQuery自定义类封装： (function ($) { $.DragField = function (arg) { var name = "你好"; //这个是私有变量，外部无法访问 this.testFun = function () { //this.testFun方法，加上了this，就...
4、jQuery面向对象之简单的插件开发
u012416045的博客
10-13 390
1、alert例子 (function($){ $.alert = function(msg){ window.alert(msg); } $.fn.alert = function(msg){ window.alert(msg); } })($); $().ready(function(){
JavaScript面向对象（一）基础详解及封装
nuanxiasuiyuan的博客
04-28 716
一、类和对象1.1、类：类型的简称，数据类型的简称；是一个概念、代号，如人、电脑、飞机等等 1.2、对象：类的某个具体的实例，是一个实际存在的物体，如陈伟霆、dell电脑、波音747 1.3、类和对象，是面向对象编程的基础。二、面向对象？2、1概念：面向对象不是技术，而是一种处理问题的思路，一种编程思想。 2.2特点：1、对零散数据的封装，避免了数据之间产生互相影响的情况。 2、提高代码的复用
原生Ajax封装模仿JQ实现详解
资源摘要信息:"本文档内容主要关注如何模仿jQuery的ajax操作，通过封装原生JavaScript中的XMLHttpRequest对象，实现一个功能与jQuery ajax类似的自定义函数。该函数被设计来简化异步HTTP请求的发送过程，并处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值