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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在JDK 8中可通过反射获得构造函数/方法参数元数据

JDK 8较不为人所知的一项新 功能是在编译的Java类中包含参数元数据的可选功能[JDK增强建议( JEP ) 118 ]。 此功能允许Java应用程序在运行时通过反射访问此参数元数据信息。 Java Tutorial的Reflection API路径包括一个名为“ 获取方法参数的名称”的课…

基于面向对象的图片轮播(js原生代码)

无论你想走多远,你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平。废话不多说,进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所…

C#定义只能处理枚举类型的泛型类型

1 internal sealed class GenericTypeThatRequireAnEnum<T>2 {3 public static int age 12; //该 static 字段在不同的封闭类型之间是独立不共享的4 5 //静态构造器针对每个封闭类型都会执行一次&#xff0c;泛型类型定义静态构造器的目的就是为了保证传递的类…

Spring应用程序与JNDI连接池的集成测试

我们都知道&#xff0c;无论何时连接到数据库&#xff0c;都需要使用连接池。 所有使用JDBC 4类的现代驱动程序都支持它。 在本文中&#xff0c;我们将概述Spring应用程序中的连接池&#xff0c;以及如何在非JEE环境&#xff08;例如测试&#xff09;中处理相同的上下文。 在S…

在java web工程中jsp页面中使用kindeditor

在这之前我们用Notepad写过kindeditor 在Java web工程里也差不多 首先我们复制之前的thml代码粘贴到工程里 然后把样式也复制进去 然后就可以运行了 转载于:https://www.cnblogs.com/q2546/p/11066539.html

数据分析方法论

把零散的报表整成数据监控体系 把每次拍脑袋的评估整成数据考核体系 在推荐、广告等算法上有所突破&#xff0c;而不是自己瞎捣鼓个没人看的聚类分析 在推送响应等有业绩的地方产出产品&#xff0c;而不是每次用时间序列法预测个销量走势再被业务喷回来。 分析自己的现状&am…

Markdown的使用笔记

Markdown的使用笔记 Markdown在我看是一种使用几种标记符号就可以完成清晰排版的一种标记语言&#xff0c;是写笔记文章的一大利器&#xff0c;使用简单、方便&#xff0c;上手快&#xff0c;而且可以很好的兼容html&#xff0c;即html中的标签在markdown中也同样试用。这边文章…

多项式孤儿桶

巨佬制作人们大家好&#xff0c;我是练习多项式两周半的个人练习生lgl。这里总结一下多项式基本操作。 1.多项式加、减、输出 不说了。 时间复杂度$O(n)$。 2.多项式取模 已知多项式$F(x)$&#xff0c;求它对$x^n$取模。 人话&#xff1a;把$n$次及以上的系数清零。 时间复杂度…

python亲密度_Python OpenCV 图像2D直方图,取经之旅第 25 天

Python OpenCV 365 天学习计划&#xff0c;与橡皮擦一起进入图像领域吧。基础知识铺垫在之前的博客中&#xff0c;我们获取图像直方图的方式都是获取一维直方图&#xff0c;简单说就是只获取一个通道的特征&#xff0c;例如灰度&#xff0c;B 通道&#xff0c;R 通道。今天要学…

清除浮动的方式

1、父级div定义伪类&#xff1a;after和zoom <style type"text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#D…

py函数两个返回值_Python 函数为什么会默认返回 None?

Python 有一项默认的做法&#xff0c;很多编程语言都没有——它的所有函数都会有一个返回值&#xff0c;不管你有没有写 return 语句。本文出自“Python为什么”系列&#xff0c;在正式开始之前&#xff0c;我们就用之前讨论过的 pass语句和 …对象 作为例子&#xff0c;看看 P…

行高 line-height

一、行高的定义line-height(行高)&#xff1a;两行文字基线之间的距离1、什么是基线&#xff1f;2、为何是基线&#xff1f;3、需要两行吗&#xff1f;1、什么是基线&#xff1f;我们上学的时候都用过&#xff0c;抄写英文字母的时候。其中有一条红线&#xff0c;这个红线就是基…

实验七报告

一、实验结论 part1&#xff1a;验证性实验 1.验证性实验2 如果事先不知道学生人数&#xff0c;尝试对line29做如下修改后&#xff0c;程序运行结果是否正确&#xff1f;回答问题&#xff0c;并给出运行结果截图。 运行结果正确// 将file1.txt中小写字母转换成大写后&#xff…

XPath语法规则及实例

XPath语法规则及实例 XPath语法规则一、XPath术语&#xff1a; 1.节点&#xff1a;在XPath中&#xff0c;有七种类型的节点&#xff1a;元素、属性、文本、命名空间、处理指令、注释以及文档&#xff08;根&#xff09;节点。 XML文档是被作为节点树来对待的。树的根被称为文档…

WorkPlus超级APP助力企业节省IT人力成本,实现快速移动化

在信息化时代&#xff0c;移动应用已经成为企业发展的重要组成部分。然而&#xff0c;开发和维护原生客户端的成本却相对较高&#xff0c;需要大量的iOS、安卓和桌面端工程师。为了解决这一问题&#xff0c;WorkPlus作为一个功能完备的超级APP&#xff0c;为企业节约了大量的IT…

addEventListener的click和onclick的区别

前两节都和addEventListener的click有关&#xff0c;于是在想它与onclick有什么区别呢&#xff0c;自己调试了一下&#xff0c;网上也有相关资料 事件绑定 onclick绑定方式 优点&#xff1a; - 简洁 - 处理事件的this关键字指向当前元素 缺点&#xff1a; - 不能对事件捕获或…

ApiCloud利用NVTabBar模块快速搭建起APP的框架

废话不说&#xff0c;直接上代码 模块地址&#xff1a;https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar 代码实例&#xff1a; <!doctype html> <html><head><meta charset"utf-8"><meta name"viewport" content"…

Java 8中新的并行API:Glitz和Glamour的背后

我是一个出色的多任务处理者。 即使我在写这篇文章&#xff0c;我仍然可以为昨天在一个大家都对我陌生的聚会上发表的言论感到尴尬。 好消息是&#xff0c;我并不孤单– Java 8在多任务处理方面也相当出色。 让我们看看如何。 Java 8中引入的关键新功能之一是并行数组操作。 这…

ASP.NET 中执行 URL 重写

作者&#xff1a;overred 来源&#xff1a;原创URL 重写就是把URL地址重新改写&#xff08;汗^_^&#xff09;。详情&#xff1a;http://www.microsoft.com/china/msdn/library/webservices/asp.net/URLRewriting.mspx优点&#xff1a;把url缩短等用法&#xff1a;1.下载ms的…

nine

nine Scarpy爬虫框架https://www.cnblogs.com/kermitjam/articles/10147261.html?tdsourcetags_pctim_aiomsg 高并发的爬虫框架 Runspider只能执行某个 爬虫程序.py文件 将项目根目录导入 Xpath语法 获取内容&#xff08;‘./text()’) 发送请求 ---> 获取响应数据 --->…