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,一经查实,立即删除!

相关文章

使用JavaConfig的SpringMVC4 + Spring Data JPA + SpringSecurity配置

在本文中&#xff0c;我们将看到如何使用JavaConfig配置和集成SpringMVC4&#xff0c;带有Hibernate的Spring Data JPA和SpringSecurity。 1.首先让我们在pom.xml中配置所有必要的依赖项 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"htt…

阅读《Google成功七堂课》

最近拜读了罗耀宗的《Google成功七堂课》&#xff0c;其中的观点很是不错&#xff0c;这里记录一下。第一课&#xff1a;打破规则第二课&#xff1a;打造更好的新产品第三课&#xff1a;以世界为实验室第四课&#xff1a;以用户的体验为念第五课&#xff1a;创造与分享价值第六…

mysql主从安装配置_如何安装和配置mysql主从同步

1)安装mysql&#xff1a;略2)启动mysqld:mysqld3)修改mysql的root 用户的password&#xff1a;mysql -u rootuse mysqlupdate user set passwordpassword(“”) where user”root”;grant all privileges on *.* to root’%’ identified by ‘’ with grant option;flush priv…

R语言中级--自定义方程

#求电费&#xff0c;&#xff1c;50,85折&#xff0c;50--120,50元/度&#xff0c;&#xff1e;120,1.15倍 myfunction <- function(deg,price 50){if(deg>120)energyprice deg*price*1.15else if(deg<80)energyprice deg*price*0.85else energyprice deg*pricere…

docker pull 镜像报错

[rootlocalhost ~]# docker pull ningx Using default tag: latest Trying to pull repository docker.io/library/ningx ... Get https://registry-1.docker.io/v2/: x509: certificate has expired or is not yet valid 上述的这种错误是时间有问题&#xff0c;更新一下时间…

mysql单表索引个数_MySQL性能:多个表与单个表和分区上的索引

小编典典创建20,000个表是一个坏主意。您很快将需要40,000个表&#xff0c;然后更多。我在《SQL反模式》一书中将此综合症称为Metadata Tribbles。您每次计划创建“每X表格”或“每X列”时都会看到这种情况。当您有成千上万个表时&#xff0c;这确实会导致实际的性能问题。每个…

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

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

Web控件TreeView展开无闪烁的两个解决方法

已经无数次见到有人提出这个问题了。。。。。 第一种。。。。。 用.net控件TreeView而展开时不刷新的变通方法主要有以下步骤&#xff1a; 1。在Page_Load中为你的TreeView添加以下属性&#xff0c;这句话为TreeView添加Click时的回发事件。 TreeView1.Attributes["On…

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

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

Spring boot 上传文件大小限制

1.spring boot 1.x 版本 application.properties 文件中 位置在&#xff08;resources下&#xff09; spring.http.multipart.maxFileSize 10Mb spring.http.multipart.maxRequestSize100Mb 2.spring boot 2.x 版本 application.properties 文件中 位置在&#xff08;resourc…

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

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

电脑注册表被停用

“开始→运行”&#xff0c;输入“Gpedit&#xff0e;msc”后回车&#xff0c;打开“组策略”。然后依次展开“用户配置→管理模板→系统”&#xff0c;双击右侧窗口中的“阻止访问注册表编辑工具”&#xff0c;在弹出的窗口中选择“已禁用”&#xff0c;“确定”后再退出“组策…

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

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

jsp 上传转码_最完整的处理jsp处理乱码问题步骤,不需要手工转码

以编码格式为UTF-8为例1&#xff0c;jsp页面文件编码格式&#xff0c;在eclipse右键-》properties-》resource-》text file encode修改该UTF-82&#xff0c;jsp页面上的跟上面一样&#xff0c;为文件存储格式&#xff0c;按此格式存储文件&#xff0c;并编译里面汉字3&#xff…

CSS未知宽高元素水平垂直居中

方法一 &#xff1a;table、cell-table 思路&#xff1a;显示设置父元素为&#xff1a;table&#xff0c;子元素为&#xff1a;cell-table&#xff0c;这样就可以使用vertical-align: center&#xff0c;实现水平居中优点&#xff1a;父元素&#xff08;parent&#xff09;可以…

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

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

数据分析方法论

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

链接服务器

使用sql-server进行分布式查询&#xff08;链接服务器&#xff09; 可以使用sql-server企业管理器进行建立&#xff0c;注意其中的rpc及rpc out两项&#xff0c;也可以使用sql语句来完成定义&#xff0c;主要涉及到三个存储过程sp_addlinkedserver&#xff0c;sp_serveroption和…

mysql表级别的操作_MySql 库/表级操作 及 数据类型 - 纪宇

数据库分类关系型数据库(SQL)&#xff1a;存储方式固定&#xff0c;安全非关系型数据库(NoSQL)&#xff1a;存储方式比较灵活&#xff0c;存储数据的效率比较高&#xff0c;不太安全MySQL是一种关系型数据库管理系统(采用关系模型来组织管理数据的数据库系统)注意事项大小写&am…

具有Java 8支持的Spring Framework 4.0.3和Spring Data Redis 1.2.1

Spring Framework 4.0.3 正如Spring社区宣布的那样&#xff0c;Spring Framework 4.0.3现在可用。 它是上周Java 8发布后框架的第一个版本&#xff0c;因此它是使用OpenJDK 8 GA构建的&#xff0c;并包含最新的ASM 5.0.1。 Spring Framework 4.0.3为WebSockets带来了重要的增强…