5分钟搞定jQuery zepto.js 面向对象插件

今天分享一下快速使用jQuery zepto.js的技巧，需要的记得收藏

1.jQuery的引入：本地下载jQuery(后面简称jq)的源文件，开发版本使用非min版，线上使用min版，zepto.js类似，同样的一些基于jq的插件也是如此用法，如果使用requreJs也就是模块化加载注意插件的依赖性；zepto.js（可以认为是移动端简版jq,用法基本相同，唯一不同的是点击事件的触发，一个是click,一个touch)

2.注意事项点：jq的使用是基于我们的选择器去绑定方法从而实现交互效果的。jq常用的方法如下：

$('选择器').html()，如果html不传值则是获取这个选择器的html文本，如果传值'',是去掉选择器包裹的html,相同的用法是text()
$('选择器').hide() 隐藏选择器的dom结点，其实质就是行内添加样式style='display:none';show(),相反的效果，toggle(),则是两者来回切换，但是一般用于显示时，需要触发其他显示和隐藏，比如点击tab切换；
修改class的操作 addClass(),removeClass(),toggleClass() 切换类 hasClass()是否有类型：boolear
修改标签的属性attr()：添加自定义属性，removeAttr()：删除属性
修改样式的操作css() :其传入值是key,value键值对，或者对象
dom选择 parent() :父级元素；。prev()前面的元素;next()后面的元素；after(),before()方法在被选元素前插入指定的内容 ;slibings() 兄弟元素；remove(),删除
数据请求：ajax()

3.面向对象的封装

面向对象的思想其实不是很复杂，就是根据我们的业务或者开发划分的模块，比如nav，swiper,toats,登录验证等；从字面入手，面向对象首先需要我们暴露一个对象出来，供大家使用，这个暴露的对象依赖谁很重要，下面转盘插件以示例说一下我们如何封装一个插件对象（感谢懒人之家）

我们需要再自己的独立的js中加入立即执行函数，这个插件是依赖于jq的，所以传入了jQuery,利用$.fn.extend()绑定我们新的属性和方法，如果插件中需要传入一下参数，我们也可以使用这个方法生成我们最后的对象

以上是一种，还有一种简单的粗暴的写法

;(function(exports){
var keyBoard = function(params){
var defaults = {
width:100,
height:100,
};
//合并使用插件初始化参数
var optionsCur = extend(defaults,params);
//初始化,
keyBoard.prototype.init = function(optionsCur){
}
// 这个我们可以添加其他的方法，依据插件的功能
exports.KeyBoard = keyBoard;
}
})(window)

希望大家多多练习，积累自己知识点

更多专业前端知识，请上【猿2048】www.mk2048.com

5分钟搞定jQuery zepto.js 面向对象插件相关推荐

JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
正则表达式里转义字符_五分钟搞定正则表达式，如果没搞定，再加两分钟
五分钟搞定正则表达式,如果没搞定,再加两分钟 [这是 ZY 第 18 篇原创文章] 文章概览一.正则表达式介绍正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简 ...
三步10分钟搞定数据库版本的降迁（将后台数据库SQL2008R2降为SQL2005版本）
三步10分钟搞定数据库版本的降迁 (将SQL2008R2降为SQL2005版本) 转载原文,并注明出处!虽无多少技术含量,毕竟是作者心血原创,希望理解. 转自 http://blog.csdn.net ...
启程 - 《每日五分钟搞定大数据》
<每日五分钟搞定大数据>原创系列,每周不定期更新.欢迎关注公众号:大叔据想了很久,准备开始写一系列的文章,记录这些年来的所得所想,感觉内容比较多不知从哪里开始,画了个思维导图确定了大 ...
python使用教程pandas-十分钟搞定pandas(入门教程)
本文是对pandas官方网站上<10Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯上 ...
3 分钟搞定 Android Push
在 Android 上,要实现 Push 功能可没有那么简单! 众所周知的原因是,Android 官方的推送服务 GCM 在国内手机上用不了.所以很多国内的开发者,不得不去使用 AndroidPN 这 ...
（8）小白又如何？3分钟搞定一个 C# 知识点
本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课程也将 ...
（7）3分钟搞定 C# 逻辑运算
本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课程也将 ...
《看聊天记录都学不会C语言？太菜了吧》（15）你学了一节课的函数我5分钟搞定了，还很熟
好消息2020年4月13日晚7.30我在CSDN开播,等你来聊天预约连接:https://live.csdn.net/room/A757291228/MJWK0Gem 本系列文章将会以通俗易懂的对话 ...

5分钟搞定jQuery zepto.js 面向对象插件

5分钟搞定jQuery zepto.js 面向对象插件相关推荐

最新文章

热门文章