十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
別人的插件。。
革吉網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),革吉網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為革吉上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的革吉做網(wǎng)站的公司定做!
引用jquery, 引用插件
看你報(bào)的錯(cuò)誤應(yīng)該是你的插件沒引用進(jìn)來
這個(gè)插件看使用方式應(yīng)該是對(duì)jquery的擴(kuò)展,他沒報(bào)$的錯(cuò)誤就說明jquery引用進(jìn)來了,但是他的擴(kuò)展方法提示不是方法,顯然是這個(gè)插件沒引用正確
先別的不看,你綁定的事件是hover這個(gè)是css的事件函數(shù)啊,你可以吧hover換成mouseover試下。這里的die和live的作用相反,live和bind的不同之處就是能夠?qū)髞硖砑拥脑匾材芫哂兄敖壎ǖ哪切┦录傩浴OM杉{
1. 使用了被廢棄的jQuery.fn.live方法
jQuery Migrate庫(kù)對(duì)此錯(cuò)誤也在控制臺(tái)有相應(yīng)的警告:
JQMIGRATE: jQuery.fn.live() is deprecated
live方法原本的作用是設(shè)置事件代理,該方法在jQuery 1.7之后就不推薦使用了,取代之的是jQuery.fn.on函數(shù)。他們的接口分別是:
$(selector).live('click', function(){/* some code */});$(selector).on('click', [selector,] function(){/* some code */});
乍一看,中括號(hào)里面的參數(shù)可以省略掉,倆函數(shù)不是一模一樣么?于是天真地把函數(shù)名live直接替換成on,大部分時(shí)候,這么做好像沒有引起任何異常。但是如果在你調(diào)用on函數(shù)的時(shí)候,前面的$(selector)在當(dāng)前的網(wǎng)頁上根本不匹配任何元素(該元素可能是后面的代碼才加到DOM里的),那是不會(huì)綁定成功的。事實(shí)上,live函數(shù)將$(selector)代理到了document元素上,這個(gè)元素是肯定存在的,所以不會(huì)出現(xiàn)類似情況。正確的替換方法應(yīng)該是:
$(selector).live('click', function(){/* some code */}); 替換為$(document).on('click', selector, function(){/* some code */});
2. 使用了被廢棄的jQuery.fn.die方法
jQuery Migrate對(duì)此錯(cuò)誤的警告是:
JQMIGRATE: jQuery.fn.die() is deprecated
這個(gè)方法和前面的live剛好反過來,取消事件處理函數(shù)的綁定。新版本中應(yīng)該使用off函數(shù)代替之,替換方式類似。
3. 使用了被廢棄的jQuery.fn.toggle函數(shù)
jQuery Migrate對(duì)此錯(cuò)誤的警告是:
JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated
早期jQuery中名字叫toggle的函數(shù)有兩個(gè),一個(gè)是用于控制元素的顯示和隱藏,這個(gè)用途的函數(shù)目前jQuery中依舊存在;另一個(gè)就是上面提到的被廢棄的toggle函數(shù),它用于綁定至少兩個(gè)函數(shù)到同一個(gè)元素,點(diǎn)擊該元素的時(shí)候兩個(gè)函數(shù)交替著執(zhí)行。這兩個(gè)同名函數(shù)功能相差甚遠(yuǎn),為了不引起誤導(dǎo),在jQuery
1.8中就不再建議使用了。替換的方式是把兩個(gè)函數(shù)合并成一個(gè)函數(shù)的if-else兩個(gè)區(qū)段,然后自己設(shè)置一個(gè)boolean變量,控制每次點(diǎn)擊時(shí)應(yīng)該執(zhí)行哪個(gè)區(qū)段即可。
4. 使用了被廢棄的jQuery.browser屬性
jQuery Migrate對(duì)此錯(cuò)誤的警告是:
JQMIGRATE: jQuery.browser is deprecated
在前端開發(fā)中我們經(jīng)常要根據(jù)不同的瀏覽器版本做出不同的處理,jQuery.browser本來是通過瀏覽器的userAgent字段來提取瀏覽器相關(guān)信息的。新版本中已經(jīng)將其廢棄,而是建議使用特征檢測(cè)的方法去判斷,并且給了一個(gè)Modernizr庫(kù)作為推薦。不過,改成這個(gè)庫(kù)可能改動(dòng)成本有點(diǎn)大,如果你還是想沿用jQuery.browser的思路的話,可以自己去實(shí)現(xiàn)一下它。例如,判斷是不是IE瀏覽器,可以用
/msie/.test(navigator.userAgent.toLowerCase());
即自己手動(dòng)獲取userAgent字段,并且做一個(gè)正則表達(dá)式匹配。其他瀏覽器思路類似,都是對(duì)navigator.userAgent做一個(gè)正則匹配。
5. $(html)格式書寫錯(cuò)誤
在jQuery Migrate中,出現(xiàn)以下三種警告中的任何一種,都是屬于這個(gè)錯(cuò)誤:
JQMIGRATE: $(html) HTML strings must start with '' characterJQMIGRATE: $(html) HTML text after last tag is ignoredJQMIGRATE: HTML string cannot start with a '#' character
這個(gè)錯(cuò)誤還是蠻值得注意的,因?yàn)槲覀兾恼麻_頭所說的jQuery低版本有XSS漏洞,其實(shí)就是和這個(gè)錯(cuò)誤有關(guān)系。在javascript中我們經(jīng)常會(huì)直接將一段html格式的字符串寫在jQuery引用里面,比如$('p/p')。按照新版本的jQuery要求,這段html格式的字符串必須是以左尖括號(hào)(小于號(hào))開頭,其他字符都不可以。以下幾種寫法,都是錯(cuò)誤的:
$(" p/p"); //錯(cuò)誤,字符串最開頭有一個(gè)空格,不是以小于號(hào)''開頭的$("p/ptest"); //不標(biāo)準(zhǔn),html標(biāo)簽結(jié)束后后面還有多余的"test",它會(huì)被忽略$("#p/p); //錯(cuò)誤,以井號(hào)開頭并且后面并不是一個(gè)css選擇器
這一點(diǎn)在書寫的時(shí)候注意一下就可以了,其實(shí)還是很容易避免的。其中第三種錯(cuò)誤其實(shí)就不僅僅是警告了,jQuery會(huì)直接拋出一個(gè)錯(cuò)誤,停止javascript代碼的繼續(xù)執(zhí)行。一般情況以井號(hào)開頭,例如$("#test"),其實(shí)就是一個(gè)普通的選擇器,但是上面例子中后面又夾雜著html字符串,這會(huì)被jQuery判斷為潛在的XSS攻擊。
6. jQuery.fn.attr方法的錯(cuò)誤使用(這是個(gè)非常易犯的錯(cuò)誤?。?/p>
jQuery Migrate中,關(guān)于attr方法的警告有以下這些:
JQMIGRATE: jQuery.fn.attr('value', val) no longer sets propertiesJQMIGRATE: jQuery.fn.attr('value') no longer gets propertiesJQMIGRATE: jQuery.fn.attr('checked') may use property instead of attributeJQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated
實(shí)踐中我發(fā)現(xiàn),早期寫的代碼里面,獲取一個(gè)input輸入表單的值時(shí),是怎么獲取的呢?$('input').attr('value');又是怎么設(shè)置的呢?$('input').attr('value',
'helloworld')。這在新版本中都是不正確的!正確的做法應(yīng)該是
$('input').val(); //獲取input表單現(xiàn)在所輸入的值
$('input').val('helloworld'); //設(shè)置input表單輸入的值
到底是獲取還是設(shè)置,只取決于調(diào)用val方法時(shí)有沒有帶著參數(shù)。
如果你想手動(dòng)設(shè)置單選框(例如input
type="radio" )被選中,應(yīng)該怎么設(shè)置呢?老的代碼里面可能會(huì)看到這樣 $('input').attr('checked',
true)或者$('input').attr('checked', 'checked')。這些現(xiàn)在也都是不正確的!正確的做法應(yīng)該是
$('input').prop('checked', true); //把單選框設(shè)為選中狀態(tài)$('input').prop('checked'); //獲取單選框是不是被選中了,返回true或false
這是從jQuery
1.6版本開始使用的寫法。如果設(shè)置disabled和selected屬性,也是使用prop方法。那到底什么時(shí)候使用attr方法呢??jī)烧叩膮^(qū)別是:prop設(shè)置的是某元素固有的屬性,而attr設(shè)置的是寫在html標(biāo)簽上的自定義屬性。舉個(gè)例子:
input type="checkbox" checked="checked" haha="hello" var v1 = $('input').prop("checked"); //返回true/false,是否被選中,隨狀態(tài)改變而改變var v2 = $('input').attr("checked"); //返回"checked",這是你設(shè)置在標(biāo)簽上的,不會(huì)變var v3 = $('input').attr("haha"); //返回"hello",自定義屬性var v4 = $('input').prop("haha"); //返回undefined,根本沒有這個(gè)固有屬性
上面提到的第四個(gè)錯(cuò)誤,jQuery.fn.attr(props, pass) is deprecated這個(gè)警告在真實(shí)項(xiàng)目中從未見到過,看了一下源碼,觸發(fā)該警告的jQuery寫法很少見,可忽略。
7. 向$.parseJSON傳入了非法的參數(shù)
在jQuery Migrate中,該錯(cuò)誤產(chǎn)生如下警告
JQMIGRATE: jQuery.parseJSON requires a valid JSON string
jQuery之所以改這個(gè)接口,是為了和瀏覽器自帶的JSON.parse接口對(duì)齊,從jQuery
1.9開始生效。這個(gè)問題常見于AJAX接收服務(wù)端返回值的時(shí)候。服務(wù)端可能返回一個(gè)空字符串,這時(shí)候調(diào)用該接口會(huì)產(chǎn)生錯(cuò)誤。必須向$.parseJSON傳入合法的JSON字符串。修正方法如下:
var v1 = $.parseJSON(str); 替換為var v1 = $.parseJSON( str ? str : "null" );
8. 使用了被廢棄的'hover'事件字符串
在jQuery Migrate中該錯(cuò)誤產(chǎn)生如下警告
JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'
在注冊(cè)事件處理函數(shù)時(shí),'hover'以前可以看作是'mouseenter mouseleave'兩個(gè)事件的別稱。目前已經(jīng)將該別稱去掉了,所以代碼中請(qǐng)用'mouseenter mouseleave'替換之。
9. jQuery.fn.andSelf已經(jīng)被替換,不能再使用
jQuery Migrate中是這樣的警告:
JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()
兩個(gè)函數(shù)功能是完全一樣的,可以直接替換。
1. jQuery不兼容瀏覽器的怪異模式
這個(gè)錯(cuò)誤的觸發(fā)方式非常簡(jiǎn)單,直接把html頁面最頂端的!DOCTYPE
html標(biāo)簽刪掉就可以了。瀏覽器怪異模式是為了兼容老古董網(wǎng)頁而設(shè)計(jì)的,詳情可參考這篇文章:鏈接。我想現(xiàn)在的WEB程序員應(yīng)該不會(huì)傻到不寫DOCTYPE,也很少使用這種模式下的瀏覽器吧。
jQuery Migrate展示的錯(cuò)誤警告如下:
2. AJAX全局事件必須綁定到document節(jié)點(diǎn)上
jQuery Migrate中的警告如下:
JQMIGRATE: AJAX events should be attached to document: ajaxStart
jQuery中AJAX全局事件包括如下接口ajaxStart,
ajaxStop, ajaxSend, ajaxComplete, ajaxError,
ajaxSuccess。因?yàn)檫@些事件使用的比較少,所以也歸在少見坑當(dāng)中。從jQuery
1.9開始,這些事件只能綁定到$(document)上。改正方法如下(摘自jQuery官網(wǎng)):
$("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); 修改為$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });
3. IE6/7/8瀏覽器不支持修改input表單的type屬性
在jQuery Migrate中是這樣的警告:
JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8
改變input的表單的type屬性,你可以直接把文本框改成單選框,改成多選框等等。雖然我感覺這是一種并不算優(yōu)雅的行為,但是很多瀏覽器都是支持這么做的,除了IE6/7/8。建議在實(shí)際中也是少用這個(gè)功能為好。
4. 使用了被移除的$.clean, $.event.handle, $.attrFn, $.fn.data('events'), jQuery.event.trigger屬性與方法
在jQuery Migrate中是這樣的警告:
JQMIGRATE: jQuery.clean() is deprecatedJQMIGRATE: jQuery.event.handle is undocumented and deprecatedJQMIGRATE: jQuery.attrFn is deprecatedJQMIGRATE: Use of jQuery.fn.data('events') is deprecatedJQMIGRATE: Global events are undocumented and deprecated
如果你在自己的代碼中使用過這五個(gè)接口,那確實(shí)是仔細(xì)研究過jQuery源代碼的高人啊。因?yàn)檫@五個(gè)接口從來沒有出現(xiàn)在jQuery的官方文檔中,并且有些在后續(xù)版本中已經(jīng)刪除,可謂來無影去無蹤。看源代碼的話在早期版本有機(jī)會(huì)找到他們的存在,但是并不建議使用。建議采用其他方法實(shí)現(xiàn)相應(yīng)的功能。什么?你不知道這五個(gè)函數(shù)是什么功能?那最好了,你現(xiàn)在也不需要知道了……
5. 使用了過時(shí)的$.sub()方法
jQuery Migrate中對(duì)本問題的警告如下:
JQMIGRATE: jQuery.sub() is deprecated
這個(gè)接口非常簡(jiǎn)單,不接受任何參數(shù)。它用來創(chuàng)建一個(gè)jQuery的副本。該方法在jQuery 1.7版本開始就已經(jīng)不再使用。
6. 使用了過時(shí)的jQuery.fn.error方法
jQuery Migrate中對(duì)本問題的警告如下:
JQMIGRATE: jQuery.fn.error() is deprecated
在jQuery中,error也是和click一樣的事件。注冊(cè)該事件的處理函數(shù),以前是$(selector).error(function(){}),現(xiàn)在已經(jīng)被廢棄,可以使用$(selector).on('error', function(){})來替代。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
還不支持 blur, focus, mouseenter, mouseleave, change, submit
與bind()不同的是,live()一次只能綁定一個(gè)事件。
這個(gè)方法跟傳統(tǒng)的bind很像,區(qū)別在于用live來綁定事件會(huì)給所有當(dāng)前以及將來在頁面上的元素綁定事件(使用委派的方式)。比如說,如果你給頁面上所有的li用live綁定了click事件。那么當(dāng)在以后增加一個(gè)li到這個(gè)頁面時(shí),對(duì)于這個(gè)新增加的li,其click事件依然可用。而無需重新給這種新增加的元素綁定事件。
用法示例:
div class=”myDiv”/div
jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});
如果使用javascript動(dòng)態(tài)創(chuàng)建一個(gè)class為mydiv的元素,點(diǎn)擊元素依然會(huì)有彈出。為什么使用live后就有了呢?這是因?yàn)閖query利用了事件的冒泡機(jī)制,直接把事件綁定在了document上,然后通過event.target找出事件的來源。這跟jquery.livequery插件不一樣,jquery.livequery每20毫秒做一次檢查,如有新生成則重新綁定一次事件。
使用live當(dāng)然有利也有弊:
好處就是:元素更新時(shí)不用反復(fù)去定義事件。
壞處就是:把事件綁定在document上會(huì)在頁面上每一個(gè)元素都呼叫一次,如使用不當(dāng)會(huì)嚴(yán)重影響性能。而且不支持blur, focus, mouseenter, mouseleave, change, submit。
2.移除live綁定的事件
在Jquery里,使用live來綁定事件,若想移除該事件,要使用die方法。
如:
$(“.myDiv”).die("click");
這樣就好將綁定的click事件移除掉。
補(bǔ)充一下1樓的答案,live是給所有匹配的元素附加一個(gè)事件處理函數(shù),即使這個(gè)元素是以后再添加進(jìn)來的,但on、off方法是不能用來匹配以后添加進(jìn)來的元素的。
比如點(diǎn)擊按鈕用ajax在某個(gè)div(id="xxx")上加載了一些元素(class="yyy"),那么操作這些元素(class="yyy")就不能直接用:
$(".yyy").on("focus",function(){
//?操作
.....
});
應(yīng)該改成:
$("#xxx").on("focus",".yyy",function?()?{
//?操作
.....
});