经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » jQuery » 查看文章
5分钟搞定jQuery+zepto.js+面向对象插件
来源:cnblogs  作者:星光笔  时间:2018/9/30 10:56:26  对本文有异议

今天分享一下快速使用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()绑定我们新的属性和方法,如果插件中需要传入一下参数,我们也可以使用这个方法生成我们最后的对象

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

  1. ;(function(exports){
  2. var keyBoard = function(params){
  3. var defaults = {
  4. width:100,
  5. height:100,
  6. };
  7. //合并使用插件初始化参数
  8. var optionsCur = extend(defaults,params);
  9. //初始化,
  10. keyBoard.prototype.init = function(optionsCur){
  11.  
  12. }
  13. // 这个我们可以添加其他的方法,依据插件的功能
  14.  
  15. exports.KeyBoard = keyBoard;
  16. }
  17. })(window)  

 

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号