jQuery.position()方法獲取不到值的安全替換方法
調(diào)用jQuery.position()方法會(huì)返回相對(duì)于父元素的位置，jQuery官方文檔中描述說(shuō)，它跟.offset()方法不一樣，.offset()返回的是相對(duì)于document的位置，而.position()返回的是相對(duì)于父元素的位置。
但事實(shí)上，在使用的過(guò)程中，我們發(fā)現(xiàn).position()返回的值經(jīng)常是0。但事實(shí)不是0。尤其是谷歌瀏覽器和IE瀏覽器里?；鸷鼮g覽器沒(méi)有此問(wèn)題。
究其原因，以基于Webkit的瀏覽器(谷歌瀏覽器和Safari瀏覽器)為例，只有當(dāng)元素(圖片、flash等)完全加載后，瀏覽器才能訪(fǎng)問(wèn)到這些元素的高度和寬度，而火狐瀏覽器是在DOM加載完成后就能訪(fǎng)問(wèn)這些屬性，它不需要知道這個(gè)元素的完整尺寸。而谷歌瀏覽器就不行。因此在谷歌/IE這樣的瀏覽器里，如果你想使用.position()獲取元素的偏移量，往往得到值就是初始值:0。
有一種補(bǔ)救的方法是將你的.position()調(diào)用放到 $(window).load()事件觸發(fā)之后，而不是$(document).ready事件之后。但這種方法也未必可靠。
另外一種變通的方法是用.offset()來(lái)?yè)Q算：
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
這雖然產(chǎn)生了多余的代碼，但比較可靠的多，用的讓人放心。
相關(guān)文章
jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)?lái)一篇jquery tmpl模板(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jquery tablesorter.js 支持中文表格排序改進(jìn)
之前研究過(guò)一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強(qiáng)做了一個(gè)用著。后面發(fā)現(xiàn)當(dāng)動(dòng)態(tài)給單元格加超鏈接，或者列中存在一些空白，就排序不了了。2009-12-12
jquery實(shí)現(xiàn)簡(jiǎn)單的全選和反選功能
我們?cè)谧鲰?xiàng)目的時(shí)候，經(jīng)常需要實(shí)現(xiàn)全選和反選功能，到網(wǎng)上搜了一圈，發(fā)現(xiàn)網(wǎng)上寫(xiě)的全選的代碼，不是完整的，是有bug的。下面結(jié)合自己的項(xiàng)目給大家分享下。2016-01-01
JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
qTip2是一個(gè)灰常強(qiáng)大且精致的jQuery提示信息插件，是qTip的第2版，也是一個(gè)全新的版本，提供了豐富的功能及漂亮的外觀，非常易于使用2012-02-02
jquery下操作HTML控件的實(shí)現(xiàn)代碼
jquery 的操作HTML控件，需要的朋友可以參考下。2010-01-01
在前兩周?chē)?guó)外知名博客WDL先后分享了“2010最佳系列”中的“最佳免費(fèi)WordPress主題”和“最佳免費(fèi)字體”，在這個(gè)星期又發(fā)布了2010年最佳jQuery插件。2010-12-12
dul無(wú)法加載bootstrap實(shí)現(xiàn)unload table/user恢復(fù)
這篇文章主要介紹了dul無(wú)法加載bootstrap實(shí)現(xiàn)unload table/user恢復(fù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
合并table相同單元格的jquery插件分享(很精簡(jiǎn))
正好項(xiàng)目中有個(gè)小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個(gè)數(shù), 然后給第一個(gè)與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解2011-06-06