后代指的是子，孙，子孙 有两种方法，方法如下：
children()方法：返回被选元素的所有直接子元素，（父亲找儿子）
例如我想选取ul的儿子（li）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery-后代</title> <script src="../jquery-3.6.0.js"></script> <style> body { color: #fff; } .container * { display: block; border: 1px solid black; color: white; padding: 5px; margin: 15px; } .container div{ background-color: #333; } ul{ background-color: #555; } ul li { background-color: #777; } p{ background-color: #999; } </style> </head> <body> <!-- 后代指的是子，孙，子孙 --> <!-- children()、find() --> <!-- children()方法 返回被选元素的所有直接子元素 --> <div class="container" style="width: 300px;"> <div>div <ul>ul <li>第一个li <p>p</p> </li> <li>第二个li</li> </ul> </div> </div> <script> $(function () { $('ul').children().css({ //使用chikdren()方法获取ul元素的子元素 'border': "1px solid red", 'color': "red", 'background-color':'white' }) }) </script> </body> </html>
效果如下图：
当然也可以单独指定一个子元素
只需要在li里面添加个属性然后获取这个属性即可
<div class="container" style="width: 300px;"> <div>div <ul>ul <li class="li1">第一个li <p>p</p> </li> <li class="li2">第二个li</li> </ul> </div> </div> //Jquery $(function () { $('ul').children('li.li1').css({ 'border': "1px solid red", 'color': "red", 'background-color':'white' }) })
效果：
css样式参考上方即可
find() 方法：方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(function () { $('div').find('ul,p,li').css({ //获取ul，p，li 'border': "1px solid red", 'color': "red", 'background-color':'white' }) })
效果如图：
当然也可以获取所有的后代：
$('.container').find('*').css({ }）
