5分钟搞定jQuery+zepto.js+面向对象插件
2024-10-19 06:17:12
今天分享一下快速使用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)
希望大家多多练习,积累自己知识点
最新文章
- redux-amrc:用更少的代码发起异步 action
- 深入浅出Mybatis系列(三)---配置详解之properties与environments(mybatis源码篇)
- 对C语言的知识与能力予以自评
- WCF大文件传输
- C++指针和引用
- Haskell高阶函数
- UVA 246 10-20-30
- sharepoint 2013 userprofile 用户信息
- .NET Framework 4.7 安装
- 使用外部容器运行spring-boot项目:不使用spring-boot内置容器让spring-boot项目运行在外部tomcat容器中
- jmeter性能测试 套路二
- Problem B: 开个餐馆算算账
- VirtualBox报错:不能为虚拟电脑XXX打开一个新任务
- java Concurrent并发容器类 小结
- Face Aging with Conditional Generative Adversarial Network 论文笔记
- SWUST OJ(952)
- Codeforces 1107 简要题解
- adb命令查看app的日志
- 使用python+selenium对web进行自动化测试
- 终端内容输出的同时保存到文件 tee
热门文章
- WebStorm 最新版本激活方式
- 使用win10自带邮件应用发送文件
- h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗
- CentOS7启动Tomcat报错:./startup.sh: Permission denied
- Java之Socket网络编程实践
- (转)MySQL 5.6 OOM 问题解决分享
- wildfly8+jpa EntityBean 简单入门
- js验证整数,浮点数
- tomcat启动(五)Catalina分析-service.init
- MySQL查询时区分大小写