jQuery中offsetParent()方法用法實(shí)例

更新時(shí)間：2015年01月19日 09:26:49 投稿：shichen2014

這篇文章主要介紹了jQuery中offsetParent()方法用法,實(shí)例分析了offsetParent()方法的功能、定義及返回匹配元素所有祖先元素中第一個(gè)采用定位的祖先元素時(shí)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中offsetParent()方法用法。分享給大家供大家參考。具體分析如下：

此方法可以返回匹配元素所有祖先元素中第一個(gè)采用定位的祖先元素。
所謂采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法僅對(duì)可見元素有效。

語(yǔ)法結(jié)構(gòu):

復(fù)制代碼代碼如下:

$(selector).offsetParent()

代碼實(shí)例:

復(fù)制代碼代碼如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="http://www.dhdzp.com/" /> 

<title>offsetParent()函數(shù)-腳本之家</title> 

<style type="text/css"> 

.grandfather

{

  width:200px;

  height:200px;

  background-color:red;

  position:relative;

}

.father

{

  width:150px;

  height:150px;

  background-color:blue;

}

.children

{

  width:50px;

  height:50px;

  background-color:green;

}

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){

    $(".children").offsetParent().css("backgroundColor","yellow"); 

  }) 

}) 

</script> 

</head> 

<body>

<div class="grandfather"> 

<div class="father"> 

  <div class="children"></div> 

</div> 

</div>

<button>查看效果</button> 

</body> 

</html>

以上代碼可以將children元素中所有祖先元素中，第一個(gè)采用定位的祖先元素的背景顏色設(shè)置為紅色。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

本文轉(zhuǎn)自：螞蟻部落http://www.softwhy.com/

您可能感興趣的文章:

相關(guān)文章

基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-04-04
jQuery+PHP打造滑動(dòng)開關(guān)效果
這篇文章主要介紹了jQuery+PHP打造滑動(dòng)開關(guān)效果,實(shí)現(xiàn)類似360安全衛(wèi)士防火墻開啟關(guān)閉的開關(guān),非常的實(shí)用，這里推薦給大家
2014-12-12
Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery自定義事件的簡(jiǎn)單實(shí)現(xiàn)代碼
本篇文章只要是對(duì)jQuery自定義事件的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
jquery submit()不能提交表單的解決方法
這篇文章主要為大家詳細(xì)介紹了jquery submit()不能提交表單的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱為模塊測(cè)試，是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來(lái)檢驗(yàn)程式的內(nèi)部邏輯，也稱為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。
2010-02-02
Java框架SSH結(jié)合Easyui控件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)示例解析
這篇文章主要為大家詳細(xì)介紹了Java框架SSH結(jié)合Easyui控件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請(qǐng)求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請(qǐng)求的方法,需要的朋友可以參考下
2017-01-01
jquery控制listbox中項(xiàng)的移動(dòng)并排序
以下是用jquery控制ASP.NET中的兩個(gè)asp:listbox控件中選擇項(xiàng)的移動(dòng)。
2009-11-11
jquery UI Datepicker時(shí)間控件沖突問(wèn)題解決
這篇文章主要介紹了jquery UI Datepicker時(shí)間控件沖突問(wèn)題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12