站長資訊網(wǎng)
修改方法：1、用選擇器獲取指定元素對象，語法“$(selector)”，會返回一個包含指定元素的jquery對象；2、用children()獲取指定元素對象下的子元素，語法“元素對象.children(filter)”；3、用attr()修改子元素的屬性值，語法“子元素.attr("屬性名","新值")”或“子元素.attr({屬性1:"新值",屬性2:"新值"…})”。
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6版本、Dell G3電腦。
在jquery中，可以使用children()和attr()函數(shù)來修改子元素的屬性值。
實現(xiàn)步驟：
步驟1：使用jquery選擇器獲取指定元素對象
$(selector)
登錄后復(fù)制
-
會返回一個包含指定元素的jquery對象
步驟2：使用children()函數(shù)獲取指定元素對象下的直接子元素
元素對象.children(filter)
登錄后復(fù)制
| 參數(shù) | 描述 |
|---|---|
| filter | 可選。規(guī)定縮小搜索子元素范圍的選擇器表達式。 |
-
會返回指定元素對象下的子元素
步驟3：使用attr()函數(shù)修改子元素的屬性值
//單個屬性 子元素對象.attr("屬性名","新屬性值"); //多個個屬性 子元素對象.attr({屬性1:"新值",屬性2:"新值"....});
登錄后復(fù)制
實現(xiàn)示例：
修改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 (父節(jié)點) <ul>ul (指定元素) <li>li (子節(jié)點1) <span>span (孫節(jié)點1)</span> </li> <li>li (子節(jié)點2) <span>span (孫節(jié)點2)</span> </li> <li>li (子節(jié)點3) <span>span (孫節(jié)點3)</span> </li> </ul> </div> <button>修改ul的子元素li的class屬性值</button> </body> </html>
登錄后復(fù)制
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
