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 6var _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
迈不过友情╰
还没有评论，来说两句吧...