今天分享一下快速使用jQuery zepto.js的技巧，需要的記得收藏

1.jQuery的引入：本地下載jQuery(后面簡(jiǎn)稱jq)的源文件，開(kāi)發(fā)版本使用非min版，線上使用min版，zepto.js類似，同樣的一些基于jq的插件也是如此用法，如果使用requreJs也就是模塊化加載注意插件的依賴性；zepto.js（可以認(rèn)為是移動(dòng)端簡(jiǎn)版jq,用法基本相同，唯一不同的是點(diǎn)擊事件的觸發(fā)，一個(gè)是click,一個(gè)touch)

2.注意事項(xiàng)點(diǎn)：jq的使用是基于我們的選擇器去綁定方法從而實(shí)現(xiàn)交互效果的。jq常用的方法如下：

• $('選擇器').html()，如果html不傳值則是獲取這個(gè)選擇器的html文本，如果傳值'',是去掉選擇器包裹的html,相同的用法是text()
• $('選擇器').hide()? 隱藏選擇器的dom結(jié)點(diǎn)，其實(shí)質(zhì)就是行內(nèi)添加樣式style='display:none';show(),相反的效果，toggle(),則是兩者來(lái)回切換，但是一般用于顯示時(shí)，需要觸發(fā)其他顯示和隱藏，比如點(diǎn)擊tab切換；
• 修改class的操作?addClass(),removeClass(),toggleClass() 切換類 hasClass()是否有類型：boolear
• 修改標(biāo)簽的屬性attr()：添加自定義屬性，removeAttr()：刪除屬性
• 修改樣式的操作css() :其傳入值是key,value鍵值對(duì)，或者對(duì)象
• dom選擇?parent() :父級(jí)元素 ；。prev()前面的元素;next()后面的元素；after(),before()方法在被選元素前插入指定的內(nèi)容 ;slibings() 兄弟元素；remove(),刪除
• 數(shù)據(jù)請(qǐng)求：ajax()

3.面向?qū)ο蟮姆庋b

? 面向?qū)ο蟮乃枷肫鋵?shí)不是很復(fù)雜，就是根據(jù)我們的業(yè)務(wù)或者開(kāi)發(fā)劃分的模塊，比如nav，swiper,toats,登錄驗(yàn)證等；從字面入手，面向?qū)ο笫紫刃枰覀儽┞兑粋€(gè)對(duì)象出來(lái)，供大家使用，這個(gè)暴露的對(duì)象依賴誰(shuí)很重要，下面轉(zhuǎn)盤插件以示例說(shuō)一下我們?nèi)绾畏庋b一個(gè)插件對(duì)象（感謝懶人之家）

我們需要再自己的獨(dú)立的js中加入立即執(zhí)行函數(shù)，這個(gè)插件是依賴于jq的，所以傳入了jQuery,利用$.fn.extend()綁定我們新的屬性和方法，如果插件中需要傳入一下參數(shù)，我們也可以使用這個(gè)方法生成我們最后的對(duì)象

以上是一種，還有一種簡(jiǎn)單的粗暴的寫(xiě)法

;(function(exports){ var keyBoard = function(params){var defaults = {width:100,height:100,};//合并使用插件初始化參數(shù)var optionsCur = extend(defaults,params);//初始化,keyBoard.prototype.init = function(optionsCur){}// 這個(gè)我們可以添加其他的方法，依據(jù)插件的功能exports.KeyBoard = keyBoard; } })(window)　　

?

希望大家多多練習(xí)，積累自己知識(shí)點(diǎn)

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。