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>