站長資訊網
修改方法：1、用選擇器獲取指定元素對象，語法“$(selector)”，會返回一個包含指定元素的jquery對象；2、用children()獲取指定元素對象下的子元素，語法“元素對象.children(filter)”；3、用attr()修改子元素的屬性值，語法“子元素.attr("屬性名","新值")”或“子元素.attr({屬性1:"新值",屬性2:"新值"…})”。
本教程操作環境：windows7系統、jquery3.6版本、Dell G3電腦。
在jquery中，可以使用children()和attr()函數來修改子元素的屬性值。
實現步驟：
步驟1：使用jquery選擇器獲取指定元素對象
$(selector)
登錄后復制
-
會返回一個包含指定元素的jquery對象
步驟2：使用children()函數獲取指定元素對象下的直接子元素
元素對象.children(filter)
登錄后復制
| 參數 | 描述 |
|---|---|
| filter | 可選。規定縮小搜索子元素范圍的選擇器表達式。 |
-
會返回指定元素對象下的子元素
步驟3：使用attr()函數修改子元素的屬性值
//單個屬性 子元素對象.attr("屬性名","新屬性值"); //多個個屬性 子元素對象.attr({屬性1:"新值",屬性2:"新值"....});
登錄后復制
實現示例：
修改ul的子元素li的class屬性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.6.0.min.js"></script> <style> div * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } li{ color:red; border:2px solid red; } .li{ color:green; border:2px solid green; } </style> <script> $(document).ready(function() { $("button").on("click", function() { $("ul").children("li").attr("class","li"); }); }); </script> </head> <body class="ancestors"> <div style="width:500px;">div (父節點) <ul>ul (指定元素) <li>li (子節點1) <span>span (孫節點1)</span> </li> <li>li (子節點2) <span>span (孫節點2)</span> </li> <li>li (子節點3) <span>span (孫節點3)</span> </li> </ul> </div> <button>修改ul的子元素li的class屬性值</button> </body> </html>
登錄后復制
【推薦學習：jQuery視頻教程、web前端視頻】
