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)
希望大家多多练习,积累自己知识点
5分钟搞定jQuery+zepto.js+面向对象插件的更多相关文章
- JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- 五分钟搞定Go.js
五分钟搞定Go.js 1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...
- 一分钟搞定AlloyTouch图片轮播
一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,A ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- 一分钟搞定Java高频面试题
一分钟搞定Java高频面试题 一.变量赋值和计算 题目: public static void main(String[] args) { int i = 1; i = i++; int j = i+ ...
- Spring Boot 返回 XML 数据,一分钟搞定!
Spring Boot 返回 XML 数据,前提必须已经搭建了 Spring Boot 项目,所以这一块代码就不贴了,可以点击查看之前分享的 Spring Boot 返回 JSON 数据,一分钟搞定! ...
- zookeeper-架构设计与角色分工-《每日五分钟搞定大数据》
本篇文章阅读时间5分钟左右 点击看<每日五分钟搞定大数据>完整思维导图 zookeeper作为一个分布式协调系统,很多组件都会依赖它,那么此时它的可用性就非常重要了,那么保证可用性的同 ...
- zookeeper核心-zab协议-《每日五分钟搞定大数据》
上篇文章<paxos与一致性>说到zab是在paxos的基础上做了重要的改造,解决了一系列的问题,这一篇我们就来说下这个zab. zab协议的全称是ZooKeeper Atomic Bro ...
- windows+mysql集群搭建-三分钟搞定集群
注:本文来源: 陈晓婵 < windows+mysql集群搭建-三分钟搞定集群 > 一:mysql集群搭建教程-基础篇 计算机一级考试系统要用集群,目标是把集群搭建起来,保证一 ...
随机推荐
- HTML+Javascript制作拼图小游戏详解(一)
本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区, ...
- 【xsy2111】 【CODECHEF】Chef and Churus 分块+树状数组
题目大意:给你一个长度为$n$的数列$a_i$,定义$f_i=\sum_{j=l_i}^{r_i} num_j$. 有$m$个操作: 操作1:询问一个区间$l,r$请你求出$\sum_{i=l}^{r ...
- TCP-IP 端口号
FTP服务器的TCP端口号 21 Telnet服务器的TCP端口号 23 TETP(简单文件传输协议)服务器的UDP端口号 69 任何TCP/IP实现所提供的服务都用1-1023之间的端口号 至 ...
- 移动端h5直播项目|html5直播实战开发|h5仿陌陌
最近一些直播.小视频什么的都比较火,像陌陌.抖音.火山短视频… 于是空闲时间自己也利用html5技术也试着倒腾了下直播项目,使用到了h5+css3+iscroll+zepot+swiper+wlsPo ...
- error "Can only specify query options (orderby, where, take, skip) after last navigation" when fetching a List<string>
Question I use OData v3 and WCF in visual studio 2012. I want to return List<string> using the ...
- [WiX]Component Rules 101
原文:http://robmensching.com/blog/posts/2003/10/18/component-rules-101 I've been debating with myself ...
- centos6 和 centos7 网络配置
centos 6配置,1 vim /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE="eth0" BOOTPROTO="st ...
- 【es6】class
class是es6引入的最重要特性之一.在没有class之前,我们只能通过原型链来模拟类. 基本用法 如果你用过java这样的纯面向对象语言,那么你会对class的语法非常熟悉. class Peop ...
- 《Mysql技术内幕,Innodb存储引擎》——事物
事物 事物中的操作要么都成功要么都不做,这是事物的目的,也是事物模型与文件系统的重要特征之一. 扁平事物(Flat Transactions) 所有操作都处于同一层次,要么都做要么都执行要么都回滚,无 ...
- YAOLEI
http://www.cnblogs.com/skyblue/p/3356933.html