jquery获取html元素的绝对位置和相对位置

  jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:

  绝对位置坐标:
  $("#elem").offset().top
  $("#elem").offset().left

  相对父元素的位置坐标:
  $("#elem").position().top
  $("#elem").position().left

  另:
  static(默认):默认定位方式。
  relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bottom,left,right实现。
  absolute(绝对定位):是相对父元素来说的,如果父元素中有relative,那么该元素的位置是经过计算后的结果。即absolute定位的参照物是“上一个定位过的父元素(static不算)”。绝对定位会使元素从文档流中被删除。
  fixed(固定定位):fixed定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的左上,右上等方位。

时间: 2024-10-13 21:02:16

jquery获取html元素的绝对位置和相对位置的相关文章

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> <li><a href="#">jquery获取父元素&l

jQuery获取当前元素的上一个元素

jQuery获取当前元素的上一个元素: 本章节介绍一下如何利用jquery获取当前元素的下一个元素,如何利用原生js获取下一个元素可以参阅原生js获取当前元素的上一个元素代码实例一章节, 下面直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texia

jQuery -&gt; 获取后代元素的三种方法

如果我们有内容如下的html文件,那么如何选取包含在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住してきた.これによって弥生時代が始まった. 縄文人も南方から伝わった稲を栽培していたが.彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった.しかし.北九州に新たな文化を持って集団が来たのを知った彼らは次第に.水稲工作を受け入れ弥生人へとか分かっていた. html源码如下 <h1>邪馬台国の謎と

jquery获取子元素

Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find()方法:获取该元素下的所有(包括子集的子集)子集元素 分别以以下HTML代码为例: <ul> <li>list1 <ul> <li>list1-1</li> <li>list1-2</li> </ul> <

jQuery 获取兄弟元素的几种方法

jQuery 获取兄弟元素的几种方法. 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2 <div> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section

bobo jquery获取当前元素下的子元素的子元素

<div class="Bg01"><ul><li class="Bold">黑域名告警</li><li>总数:<span class="Mycolor">24条</span></li><li>未处理:<span class="Myred">03条</span></li></ul

jQuery -&gt; 获取兄弟元素

获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2 <div> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section title</h2> &l

jQuery获取某元素下所有的链接元素

jQuery获取某元素下所有的链接元素: 在某些情况下需要获得某些元素下的所有链接,下面就介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落&l

jquery获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> <li><a href="#">jquery