jQuery中offsetParent()方法用法實(shí)例
本文實(shí)例講述了jQuery中offsetParent()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以返回匹配元素所有祖先元素中第一個(gè)采用定位的祖先元素。
所謂采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法僅對(duì)可見(jiàn)元素有效。
語(yǔ)法結(jié)構(gòu):
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<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/
- Jquery中的offset()和position()深入剖析
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery offset函數(shù)應(yīng)用實(shí)例
- jquery用offset()方法獲得元素的xy坐標(biāo)
- jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫(huà)切換
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- jQuery中offset()方法用法實(shí)例
- Jquery中offset()和position()的區(qū)別分析
- 淺談jQuery的offset()方法及示例分享
相關(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)開(kāi)關(guān)效果
這篇文章主要介紹了jQuery+PHP打造滑動(dòng)開(kāi)關(guān)效果,實(shí)現(xiàn)類似360安全衛(wèi)士防火墻開(kāi)啟關(guān)閉的開(kāi)關(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
這篇文章主要為大家詳細(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è)試。通常由撰寫(xiě)程式碼的程式設(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