jQuery——parent(),parents(),offsetParent(),closets()方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery——parent(),parents(),offsetParent(),closets()方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
.parent()
作用：選中指定元素的直接父元素
【例】點擊按鈕，改變其父元素的背景顏色，效果如下
代碼
<html lang="en"> <head><style>div {width: 100px;height: 50px;text-align: center;background-color: steelblue;position: absolute;}div.demo {left: 113px;top: 8px;}.active {background-color: teal;}</style> </head> <body><div><span>span-1</span><button>點一下</button></div><div class="demo"><span>span-2</span><button>點一下</button></div> </body> <script src="./jquery.js"></script> <script>$('button').click(function () {if ($(this).parent().hasClass('active')) {$(this).parent().removeClass('active');} else {$(this).parent().addClass('active');}}) </script> </html>.parents()
作用：獲取指定元素的所有父元素
【例】點擊按鈕，給按鈕的第二層的父元素添加樣式，效果如下
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {width: 250px;height: 100px;color: #fff;background-color: #fff;margin-bottom: 5px;position: relative;border-radius: 15px;}.wrapper .demo {margin: 0 auto;width: 200px;height: 50px;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -25px;text-align: center;}.wrapper .demo span {display: block;margin-bottom: 3px;}.wrapper button {border: none;outline: none;background-color: #eee;border-radius: 3px;color: #424242;cursor: pointer;}.active {background-color: #424242;}</style> </head> <body><div class="wrapper"><div class="demo"><span>黑夜之中，才見繁星</span><button>點擊</button></div></div><div class="wrapper"><div class="demo"><span>風過云散，星光遍地</span><button>點擊</button></div></div> </body> <script src="./jquery.js"></script> <script>$('button').click(function () {$(this).parents('.wrapper').addClass('active');});console.log($('button').parents()); </script> </html>打印結果如下
由打印結果可知，該方法可選擇他所有的父級元素節點，包括body和html，且共同的父級只選中一次
.offsetParent()
作用：選擇最近的有定位的父級，若沒有定位的父級，則選中html
【例】點擊一次按鈕，給對應的父級添加定位，然后用offsetParent方法尋找有定位的父級，給其添加背景顏色，例子舉得有點牽強，主要是為了練習jQuery的鏈式調用和一些方法，代碼效果如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}button {width: 50px;height: 50px;}.box {width: 50px;height: 50px;padding: 50px;background-color: black;}.content {width: 150px;height: 150px;padding: 50px;background-color: black;}.wrapper {width: 250px;height: 250px;padding: 50px;background-color: black;margin: 20px;}.active {position: relative;}.color {background-color: cadetblue;}</style> </head> <body><div class="wrapper"><div class="content"><div class="box"><button></button></div></div></div> </body> <script src="./jquery.js"></script> <script>var i = 0;$('button').click(function () {var len = $('button').parents('div').size();if (i>len-1) { //注i=0;}$('button').parents('div').removeClass('active').eq(i++).addClass('active').end().removeClass('color').end().offsetParent().addClass('color');}) </script> </html>【注】兩個注意點：offsetParent方法不接受任何參數；代碼中若if條件設置i>len，則當經過3次點擊后，i=3，值不大于3，則執行最后60行代碼時，i=3，而由于在parents方法中只選擇了是div的父級給其添加定位，因此，此時沒有有定位的父級，故offsetParent直接選中html去添加背景顏色，具體效果如下
可以看到第四次點擊的時候選中了文檔，且再點擊沒有移除文檔的背景顏色，還是因為parents方法沒有選中html的原因
.closets()
作用：若參數選中ul，則該方法選擇離指定元素最近的是ul的父級
【例】選擇離按鈕最近的ul父級，改變其背景顏色，代碼效果
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;border-radius: 8px;}.wrapper {margin: 20px;width: 200px;height: 200px;background-color: cadetblue;}ul {list-style: none;}.content>li {width: 100%;height: 90px;margin-bottom: 20px;}.content>li .box {width: 200px;height: 40px;margin-bottom: 10px;}.content>li .box li {width: 100%;height: 100%;}button {width: 40px;height: 40px;line-height: 40px;border: none;outline: none;cursor: pointer;}.active {background-color: darkseagreen;}</style> </head> <body><div class="wrapper"><ul class="content"><li><ul class="box"><li><button>btn1</button></li></ul><ul class="box"><li><button>btn3</button></li></ul></li><li><button>btn4</button></li></ul></div> </body> <script src="./jquery.js"></script> <script>$('button').click(function () {$('ul').removeClass('active');$(this).closest('ul').addClass('active');}) </script> </html>?
總結
以上是生活随笔為你收集整理的jQuery——parent(),parents(),offsetParent(),closets()方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery——siblings()方法
- 下一篇： jQuery——插入元素节点的方法