JQ面向对象的封装步骤
一：函数自己调用自己
/*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 一个 1 二：使用JQ元素进行调用函数
<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>
三：自定义变量的改变与初始化
<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();
}
<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>