代码描述:jQuery parents()和parent()。jQuery parents()和parent()源码下载
标题中的两个函数在jQuery代码中非常的常见,下面就简单介绍一下它们两者的区别,希望能够对初学者有所帮助。 这两个函数的区别其实非常饿明显,先从名称上进行区别: parents()函数比parent()函数在名称多了一个"s",有点英语常识的话,很快就可能意识到parents()函数获取的元素可能不止一个,parent()函数则可能只能够获取一个元素,注意这里一个元素并非说此函数的返回的jQuery对象中只有一个元素,而是说parent()只会获取匹配元素集合中每一个元素的一级父元素。 看一段实例代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> div{padding:20px;} .main{ width:200px; height:200px; background:green; margin-bottom:5px; } .box{ width:150px; height:150px; background:red; } p{ width:50px; height:50px; background:blue; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").parent().css("background-color","yellow"); }) </script> </head> <body> <div class="main"> <div class="box"> <p></p> </div> </div> <div class="main"> <div class="box"> <p></p> </div> </div> </body> </html>
将p的父元素box的背景颜色设置为黄色,这说明parent()函数是将匹配元素集合中每一个p元素的一级父元素的背景颜色设置为黄色。 再来看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> div{padding:20px;} .main{ width:200px; height:200px; background:green; margin-bottom:5px; } .box{ width:150px; height:150px; background:red; } p{ width:50px; height:50px; background:blue; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").parents().css("background-color","yellow"); }) </script> </head> <body> <div class="main"> <div class="box"> <p></p> </div> </div> <div class="main"> <div class="box"> <p></p> </div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能