JQuery 根據ID在頁面中定位

2022-10-10 22:12:23 字數 1525 閱讀 8987

比如:

<

a href

="#1"

>1跳轉

a>

<

a name

="1"

>

a>

但是上種方法使用了乙個空標籤,而且有時候會出現錨點失效。所以建議採用id來繫結錨點,**如下:

<

a href

="#1"

>1跳轉

a>

<

a id

="1"

>

a>

通過這種方式,我們可以實現在目錄列表很長,無法一頁完全展示的情況下,設定乙個直達頂部或直達底部(甚至其他位置)的操作,加強使用者體驗感。

直達頂部,可以設定錨點在body之前(或相應元素的位置),同理直達底部也一樣。

示例**如下:

/*

直達頂部

*/$('back to top').insertafter('div.chapter p');

$('').prependto('body');

/*直達底部

*/$('arrive to bottom').insertafter('div.chapter p');

關於#在頁面的製作中,」#」的符號很常見,並且具有通用性。基本上,其表示的含義是id選擇符。例如:css中#header{}就表示id為header的標籤的樣式如何;在jquery中,$(「#header」)表示選擇id為header的標籤為jquery物件;同樣的,在頁面的url中,」#」也可以理解為id選擇符之意,也就是頁面跳轉到含url指向的id的標籤處。

例如輸入乙個位址 

這個位址中末尾有個」#」,這個就相當於告訴瀏覽器要跳轉了,#後面跟著的3表示會在 的頁面中尋找符合」#3」特點的標籤,並且執行跳轉。

關於空錨點指向

如果url中的」#」後面跟隨的字元id在文中找不到,就會有兩種情況:如果是在當前頁面,除了url位址變化了,其它的不會改變,頁面不會有跳轉;如果是從其它頁面跳轉過來,則頁面會在頂部顯示,」#」基本就是聾子的耳朵——擺設。

對於錨點的平滑跳轉,在一般的商業性質的**上,權衡來說,要謹慎使用。

例如:讓頁面平滑滾動到乙個id為box的元素處,則jquery**只要一句話,關鍵位置 如下:

$(「html,body」).animate(,1000)

其中animate為jquery的自定義動畫方法,$(「#box」).offset().top表示id為box的jquery物件距離頁面頂部的偏移值,1000表示平滑動畫執行的時間為1000毫秒,也就是1秒。

關於錨點重新整理失效

錨點重新整理失效就是指當按下重新整理鍵f5時,即使此時url的後面就隨錨點,此錨點也是不起作用的。

在jquery中,不難實現。可以根據url獲取錨點,從而進一步獲得對應錨點物件,然後再讓頁面的滾動高度為其距離頁面頂部的偏移值就可以了。使得頁面無論是重新載入還是其重新整理,其後面的錨點都起作用。

其js**如下:

$(function

()});

在頁面中定位元素

使用getboundingclientrect獲取元素的邊界矩形的大小和位置,然後訪問其top和left值以確定位置 在頁面中定位元素 function positionobject obj 元素定位是根據該元素的左上角相對於其視口和祖先元素的位置或偏移量來確定的。元素的位置是相對於其他的元素的,並...

jquery怎麼根據id移除元素

jquery根據id移除元素的方法 1 通過id屬性值選中指定元素,語法 id屬性值 會返回乙個包含指定元素的jquery物件 2 用remove 方法移除被選的元素物件即可,語法 指定id元素物件.remove 本教程操作環境 windows7系統 jquery1.10.2版本 dell g3電腦...

jquery 在頁面中按回車 響應 事件

為了使用者方便我們往往會在使用者回車之後做一些事,比如登陸的時候,填完表單過後,我們習慣性的會直接按回車,當然要處理這個,jquery是很簡單的,我們來看看怎麼做吧。1 document ready function 9 10 11 12 btnanchorlogin click function ...