今天分享一下快速使用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

總結

以上是生活随笔為你收集整理的5分钟搞定jQuery zepto.js 面向对象插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。