JQuery-- 链式编程、静态函数,自己制作jQuery插件
一.链式编程 为什么jQuery运行链式编程 ，让我们的代码（方法）连续不间断书写（连续调用）其实主要还是jQuery很多的函数执行完毕之后，
都会返回一个jQuery对象
因为获取操作的时候，会返回获取到的相应的值，无法返回jQuery对象
其实函数内部返回的就是一个jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bd{
border:10px solid #f00;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(document).ready(function () {
$('.box').css({width:200,height:200,background:'pink'})
.addClass('bd')
.animate({width:400})
.attr({title:'鼠标提示文本'})// 设置
.attr('title') // 获取的值是一个字符串 ，所以不能连续书写了
});
/*每次选择完盒子都会有一个jQuery对象*/
console.log($(' $(\'.box\')',$('.box')));
console.log($(' $(\'.box\').addClass(\'bd\')',$('.box').addClass('bd'))); /* jS函数，执行完毕之后，默认返回值undefined*/
var obj = {
name : '小明',
age : 18,
sayHi : function () {
alert(this.name+'说，我今年'+this.age+'岁了');
return this; // 链式编程秘密
}, // 设置的时候，我们可以return this实现链式编程
setAttr:function (key,val) {
this[key] = val;
return this;
} , // 获取的时候,由于你要返回之歌属性的值,return 被占用了,所以就不可以连续书写了
getAttr:function (key) {
return this[key];
}
} //console.log(obj);
obj.sayHi(); // 返回undefined
// obj.sayHi().sayHi(); // 没有设置返回值前会报错, underfined.sayHi() 报错
// 解决方法
// 在obj 里面sayHi设置返回值 return this;
obj.sayHi().sayHi();// 不报错
// 没有设置返回值前会报错
obj.sayHi().sayHi().setAttr('sex',"男").setAttr('number',"666"); // 报错
/*解决方法*/
// 在setAttr里面设置返回值
obj.sayHi().sayHi().setAttr('sex',"男").setAttr('number',"666"); // 没有报错了
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
二.自己制作jQuery插件
1."沙箱"函数的4种写法：
;(function () {
// alert("11");
})();
;(function () {
// alert("11");
}()); // 括号写在外面里面都行
;(function ($) {
// console.log($ === jQuery);
})($); // 写两个$是确定内部$就是jQuery对象
;(function ($) {
// console.log($ === jQuery);
})(jQuery);
2.静态方法的定义,创建和使用
/**
* $.method = fn 静态方法 （不需要实例，直接调用）
* 如: $.trim(str)
* $.fn.method = fn 实例方法(使用的时候需要先实例对象)
* $('div) 这个操作其实就是实例了一个jQuery对象
* */
;(function ($) { //静态方法的创建
$.add = function (a,b) {
return a+b ;
}
})(jQuery); </script>
<script>
$(function () {
console.log($.add(5, 6));
});
</script>
3.一个简单的自定义插件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: deepskyblue;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
/**
* $.method = fn 静态方法 （不需要实例，直接调用）
* 如: $.trim(str)
* $.fn.method = fn 实例方法(使用的时候需要先实例对象)
* $('div) 这个操作其实就是实例了一个jQuery对象
* */
$(function ($) {
// 希望封装后的函数可以这样调用
// 功能一: 设置背景颜色 $('div').backgroundColor('pink')
// 功能二: 获取背景颜色 $('div').backgroundColor();
$.fn.backgroundColor = function (color) {
console.log(this); // this相当于$(this)
if(arguments.length == 0){
// 没传参数代表获取return是返回结果
return this.css('backgroundColor');
}else{
// 传参数设置
this.css('backgroundColor',color);
/*设置的内部页return this 方便链式编程*/
return this;
} }
})(jQuery);
</script>
<script>
$(function () {
//内部实现原理
//$('div').css('backgroundColor');// 获取背景颜色
$('div').backgroundColor('pink');
});
</script>
</head>
<body>
<div></div>
</body>
</html>
4.JQuery版tab栏切换封装成jQuery插件
jQ普通版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
} </style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(document).ready(function () { // Tab分为上下两部分
$('.tab-item').click(function () {
// 当点击那个选项卡，那个选项卡就变成红色，其他的变成一般
$(this).addClass('active')
.siblings().removeClass('active');
// 选中所有的main分区，通过<eq>和<当前元素索引号>实现对应切换效果
$('.products .main').eq( $(this).index() ).addClass('selected')
.siblings().removeClass('selected');
}); });
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> </body>
</html>
jQ插件版：
tab插件：jQuery.myTab.js
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 10:45
* Email : 1031219129@qq.com
*/
;(function ($) {
$.tab = function (tabItem,tabItemClassName,tabMain,tabMainClassName) {
// Tab分为上下两部分
$(tabItem).click(function () {
// 当点击那个选项卡，那个选项卡就变成红色，其他的变成一般
$(this).addClass(tabItemClassName)
.siblings().removeClass(tabItemClassName);
// 选中所有的main分区，通过<eq>和<当前元素索引号>实现对应切换效果
$(tabMain).eq( $(this).index() ).addClass(tabMainClassName)
.siblings().removeClass(tabMainClassName);
}); } ;
})(jQuery);
jQtab栏插件版：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
} .tablan .item.on{
background-color: palegreen;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script src="jQuery.myTab.js"></script>
<script>
$(document).ready(function () {
$.tab('tab-item','active','.products .main','selected');
$.tab('.tablan .item','on','.products .main','selected');
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> <div class="wrapper">
<ul class="tablan">
<li class="item on">国际大牌<span>◆</span></li>
<li class="item">国妆名牌<span>◆</span></li>
<li class="item">清洁用品<span>◆</span></li>
<li class="item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
jQtab栏链式编程插件版：
jQuery.myTab.js
;(function ($) {
$.tab = function (options) {
var defaults = {
tabItem:'.tab-item',
tabItemClassName:'active',
tabMain:'.products .main',
tabMainClassName:'selected'
};
for(var key in options) {
defaults[key] = options[key] ;
}
// Tab分为上下两部分
$(defaults.tabItem).click(function () {
// 当点击那个选项卡，那个选项卡就变成红色，其他的变成一般
$(this).addClass(defaults.tabItemClassName)
.siblings().removeClass(defaults.tabItemClassName);
// 选中所有的main分区，通过<eq>和<当前元素索引号>实现对应切换效果
$(defaults.tabMain).eq( $(this).index() ).addClass(defaults.tabMainClassName)
.siblings().removeClass(defaults.tabMainClassName);
});
} ;
})(jQuery);
jQtab栏链式编程插件版html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
} .tablan .item.on{
background-color: palegreen;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<!--<script src="jQuery.myTab.js"></script>-->
<script>
$(document).ready(function () {
$.tab({
tabItemClassName:'on'
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> </body>
</html>
extend方法
重复的代替，不重复的留下，形成新的对象
<script>
var settings = {validate:false ,limit:5,name:'foo'};
var options = {validate:true ,name:'bar',age:18} ;
$.extend(settings,options);
console.log(settings); //{validate: true, limit: 5, name: "bar", age: 18}
</script>
用extend代替jQuery.myTab.js中的for循环取值存值
for(var key in options) {
defaults[key] = options[key] ;
}
// 上面的for循环等价于
$.extend(defaults,options);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
}
.tab li.on {
border-color: skyblue;
border-bottom: 0;
font-size: 18px;
} .tablan .item.on{
background-color: palegreen;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<!--<script src="jQuery.myTab.js"></script>-->
<script>
$(document).ready(function () { ;(function ($) {
$.tab = function (options) {
var defaults = {
tabItem:'.tab-item',
tabItemClassName:'active',
tabMain:'.products .main',
tabMainClassName:'selected'
};
/* for(var key in options) {
defaults[key] = options[key] ;
}*/
$.extend(defaults,options); // Tab分为上下两部分
$(defaults.tabItem).click(function () {
// 当点击那个选项卡，那个选项卡就变成红色，其他的变成一般
$(this).addClass(defaults.tabItemClassName)
.siblings().removeClass(defaults.tabItemClassName);
// 选中所有的main分区，通过<eq>和<当前元素索引号>实现对应切换效果
$(defaults.tabMain).eq( $(this).index() ).addClass(defaults.tabMainClassName)
.siblings().removeClass(defaults.tabMainClassName);
}); } ; })(jQuery); $.tab({
tabItemClassName:'on'
}); });
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> </body>
</html>
$.each()方法
定义：
用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.12.2.js"></script> <script>
$.each(["张三","李四","王五"],function (index,item) {
console.log("Item#" + index + ":" + item); }) ; $('button').each(function (index,item) { });
$.each($('button'),function (index,item) { });
</script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border: 1px solid hotpink;
width: 500px;
border-collapse: collapse;
}
table td, table th {
border: 1px solid hotpink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(document).ready(function () { /*$.table = function (defaultData,tableWrap) {
var htmlStr = ''; htmlStr += '<table>' +
' <tr>';
// th 需要循环遍历创建
$.each(defaultData.header,function (index,item) {
htmlStr +='<th>'+item+'</th>'
});
htmlStr +='</tr>'; // 先循环外面的tr
$.each(defaultData.body,function (index,item) {
htmlStr +='<tr>';
// 再循环里面的td
$.each(item,function (index,item) {
htmlStr += '<td>'+item+'</td>';
});
htmlStr +='</tr>\n';
});
htmlStr +='</tr>\n';
$(tableWrap).append(htmlStr);
} ; $.table({
header: ['序号', '姓名', '年龄', '工资'],
body: [
{id:0,n: 'xy', age: 20, s: 10},
{id:1,n: 'wy', age: 10, s: 8},
{id:2,n: 'pl', age: 11, s: 9}
]});
},'#myTable');
*/
$.fn.table = function (defaultData) {
var htmlStr = ''; htmlStr += '<table>' +
' <tr>';
// th 需要循环遍历创建
$.each(defaultData.header,function (index,item) {
htmlStr +='<th>'+item+'</th>'
});
htmlStr +='</tr>'; // 先循环外面的tr
$.each(defaultData.body,function (index,item) {
htmlStr +='<tr>';
// 再循环里面的td
$.each(item,function (index,item) {
htmlStr += '<td>'+item+'</td>';
});
htmlStr +='</tr>\n';
});
htmlStr +='</tr>\n';
this.append(htmlStr);
return this;
} ; $('#myTable').table({
header: ['序号', '姓名', '年龄', '工资'],
body: [
{id:0,n: 'xy', age: 20, s: 10},
{id:1,n: 'wy', age: 10, s: 8},
{id:2,n: 'pl', age: 11, s: 9}
]});
});
</script>
</head>
<body>
<div id="myTable">
<!--<table>
<tr>
<th>序号</th> <th>姓名</th> <th>年龄</th> <th>工资</th>
</tr>
<tr>
<td>1</td> <td>xy</td> <td>20</td> <td>10</td>
</tr>
<tr>
<td>2</td> <td>wy</td> <td>10</td> <td>8</td>
</tr>
<tr>
<td>3</td> <td>pl</td> <td>11</td> <td>9</td>
</tr>
</table>-->
</div> </body>
</html>
JQuery-- 链式编程、静态函数,自己制作jQuery插件的更多相关文章
- Jquery链式编程及Index()详解
Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...
- jQuery——链式编程与隐式迭代
链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...
- jQuery链式编程
链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...
- jQuery链式编程时修复断开的链
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [jQuery]jQuery链式编程(六)
链式编程 节约代码量 <button>快速</button> <button>快速</button> <button>快速</butt ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 原生JS实现jquery的链式编程。
这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...
- jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
随机推荐
- 前缀数组O(n^3)做法
前缀数组O(n^3)做法 s.substr()的应用非常方便 令string s = "; ); //只有一个数字5表示从下标为5开始一直到结尾:sub1 = "56789&quo ...
- linux平台进行c语言源码安装
安装c源程序的步骤: 1. ./configure --prefix 执行编译检测 指定安装路径 2. make 编译 3. sudo make install 编译后安装 前两步可以合成一步(mak ...
- mysql高级教程(一)-----逻辑架构、查询流程、索引
mysql逻辑架构 和其它数据库相比,MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提 ...
- Idea SSH框架整合基础代码
第一步 pom.xml注入jar包依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...
- leyou_01_环境搭建
1.乐优商城项目搭建 前端技术: 基础的HTML.CSS.JavaScript(基于ES6标准) JQuery Vue.js 2.0以及基于Vue的框架:Vuetify 前端构建工具:WebPack ...
- SSM-8FastDfs搭建
1. 图片服务器的安装 1.存储空间可扩展. 2.提供一个统一的访问方式. 使用FastDFS,分布式文件系统.存储空间可以横向扩展,可以实现服务器的高可用.支持每个节点有备份机. 1.1. 什么是F ...
- CentOS7 下的 firewall 用法
1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disab ...
- JSP内置对象解析
out对象:(PrintWriter类的实例) 用来向客户端输出信息,除了输出各种信息外还负责对缓冲区进行管理: 主要方法: print / println void 输出数据 newLine() v ...
- flask的基本操作
常用的SQLAlchemy字段类型 # coding:utf-8 from flask import Flask from flask_sqlalchemy import SQLAlchemy app ...
- Redis数据库在ubuntu16.04下的安装
1.安装 sudo apt-get install redis-server 2.启动 sudo service redis-server start 3.查看 ps aux|grep redis 4 ...