一、parents方法的介绍
jQuery的parents方法可以选取当前元素的所有祖先元素，“一路”向上直到文档的根元素，也可以传递参数进行选择性筛选。parents的参数可以是选择器，也可以是元素、jQuery对象，甚至可以是HTML字符串。
// 选择当前元素的所有祖先元素
$("selector").parents()
// 选择当前元素的某个祖先元素
$("selector").parents("selector")
如果parents没有传递参数，那么将会选取当前元素的所有祖先元素。如果传递了参数，则选取符合条件的祖先元素。
二、parents方法的应用
1、获取某个祖先元素的属性值
假设我们想要获取某个符合条件的祖先元素的data属性值，可以采用下面的方式：
// 获取ID为test的祖先元素中的data属性值
$("#test").parents("#parent").data("data-name");
2、给某个祖先元素添加样式
假设我们想要给某个符合条件的祖先元素添加样式，可以采用下面的方式：
// 给ID为parent的祖先元素添加样式
$("#test").parents("#parent").css("background-color", "green");
三、parent方法的介绍
jQuery的parent方法选取当前元素的父级元素，可以传递参数进行选择性筛选。
// 选择当前元素的父元素
$("selector").parent()
// 选择当前元素的某个父元素
$("selector").parent("selector")
如果parent没有传递参数，那么将会选取当前元素的直接父元素。如果传递了参数，则选取符合条件的父元素。
四、parent方法的应用
1、给父元素添加样式
假设我们想要给当前元素的父元素添加样式，可以采用下面的方式：
// 给当前元素的父元素添加样式
$("selector").parent().css("background-color", "red");
2、获取父元素的某个属性值
假设我们想要获取当前元素的父元素中的某个属性值，可以采用下面的方式：
// 获取当前元素的父元素中的data属性值
$("selector").parent().data("data-name");
五、parents方法和parent方法的区别
1、选取范围不同
parents方法把当前元素的所有祖先元素都选出来，而parent方法只选取当前元素的直接父元素。
2、传递参数的方式不同
parents方法传递参数的方式可以是选择器、元素、jQuery对象、HTML字符串等；而parent方法只能传递选择器。
3、返回值不同
parents方法返回的是一个包含所有符合条件祖先元素的jQuery对象，而parent方法返回的是一个包含所有符合条件父元素的jQuery对象。
六、总结
jQuery的parents方法和parent方法都是用来选取父元素的，但是它们的选取范围、传递参数的方式以及返回值都有所不同。熟悉它们的使用方法，可以帮助我们更加方便地操作页面上的元素。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151064.html
微信扫一扫 
支付宝扫一扫 