jQuery中offsetParent()方法用法實(shí)例
本文實(shí)例講述了jQuery中offsetParent()方法用法。分享給大家供大家參考。具體分析如下:
此方法可以返回匹配元素所有祖先元素中第一個采用定位的祖先元素。
所謂采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法僅對可見元素有效。
語法結(jié)構(gòu):
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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元素中所有祖先元素中,第一個采用定位的祖先元素的背景顏色設(shè)置為紅色。
希望本文所述對大家的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)動畫切換
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- jQuery中offset()方法用法實(shí)例
- Jquery中offset()和position()的區(qū)別分析
- 淺談jQuery的offset()方法及示例分享
相關(guān)文章
jquery根據(jù)一個值來選中select下的option實(shí)例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個值來選中select下的option實(shí)例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JSONP 跨域訪問代理API-yahooapis實(shí)現(xiàn)代碼
介紹一個JSONP 跨域訪問代理API-yahooapis,需要的朋友可以參考下2012-12-12jQuery插件FusionWidgets實(shí)現(xiàn)的Cylinder圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Cylinder圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionWidgets結(jié)合swf文件讀取xml數(shù)據(jù)并采用Cylinder圖展示的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁面元素的動態(tài)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件,點(diǎn)擊相冊的縮略圖,就會彈出該相片對應(yīng)的大圖,并且?guī)в袀€性的加載動畫,還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。2015-04-04