手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

jquery中closest的用法

时间:2024-10-15 21:33:26

1、第一步 引入jquey,写入demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>ul,li,span{ display: block; border: 2px solid black; color: black; padding: 5px; margin: 15px;}</style> </head> <body> <ul>ul (第一祖先 - 第一祖先节点) <li>li (直接父节点) <span>span</span> </li> </ul> <script src="../../js/jquery.js"></script> <script> $(function(){ $("span").closest("li").css({"color":"red","border":"2px solid red"});});</script> </body></html>在这里我们发现li的颜色变红了

2、第二步 我们把closest("li")改成closest("ul")$("span").closest("ul").css({"color":"red","border":"2px solid red"});我们会发现只有ul变红了代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>ul,li,span{ display: block; border: 2px solid black; color: black; padding: 5px; margin: 15px;}</style> </head> <body> <ul>ul (第一祖先 - 第一祖先节点) <li>li (直接父节点) <span>span</span> </li> </ul> <script src="../../js/jquery.js"></script> <script> $(function(){ $("span").closest("ul").css({"color":"red","border":"2px solid red"});});</script> </body></html>

3、第三步 我们在li加入一个li元素,代码改成原来试一试这时,我们会发现这个 <u盟敢势袂l>ul (第一祖先 - 溟猫钽吟第一祖先节点) <li>li (直接父节点) <span>span</span> </li> <li>北京</li> </ul>结构中只有紧挨这个span的li变红代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>ul,li,span{ display: block; border: 2px solid black; color: black; padding: 5px; margin: 15px;}</style> </head> <body> <ul>ul (第一祖先 - 第一祖先节点) <li>li (直接父节点) <span>span</span> </li> <li>北京</li> </ul> <script src="../../js/jquery.js"></script> <script> $(function(){ $("span").closest("li").css({"color":"red","border":"2px solid red"});});</script> </body></html>

4、第四步 我们把<ul>ul (第一祖先 - 第一祖先节点)<li>盟敢势袂li (直接父节点)<sp锾攒揉敫an>span</span></li><li>北京</li></ul>中北京的li加上一个class="beijing"试一试,代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>ul,li,span{ display: block; border: 2px solid black; color: black; padding: 5px; margin: 15px;}</style> </head> <body> <ul>ul (第一祖先 - 第一祖先节点) <li>li (直接父节点) <span>span</span> </li> <li class="beijing">北京</li> </ul> <script src="../../js/jquery.js"></script> <script> $(function(){ $("span").closest("beijing").css({"color":"red","border":"2px solid red"});});</script> </body></html>什么都没变总结:这说明closest只对与它紧挨它的上一级才有效果,否则无效。这就好比一个走丢的孩子,去找他的亲人,他不是找他的叔叔,姑姑,而是去找他亲生爸妈是一个道理,而如果是爸爸的上一级,便是爸爸的亲生爸爸。

© 手抄报圈