站長(zhǎng)資訊網(wǎng)
替換標(biāo)簽屬性值的兩種方法：1、使用attr()替換屬性值，語法“$("img").attr({屬性1:"新值",屬性2:"新值"…});”。2、使用prop()替換屬性值，語法“$("img").prop({屬性1:"新值",屬性2:"新值"…});”。
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6版本、Dell G3電腦。
HTML標(biāo)簽的屬性
HTML 中的標(biāo)簽就像關(guān)鍵字一樣，每個(gè)標(biāo)簽都有自己的語義（含義），例如<p>標(biāo)簽代表段落，<b>標(biāo)簽代表加粗。根據(jù)標(biāo)簽的不同，瀏覽器會(huì)使用不同的方式展示標(biāo)簽中的內(nèi)容。
一般情況下，一個(gè) HTML 標(biāo)簽由開始標(biāo)簽、屬性、內(nèi)容和結(jié)束標(biāo)簽組成，標(biāo)簽的名稱不區(qū)分大小寫，但大多數(shù)屬性的值需要區(qū)分大小寫，如下所示：
屬性 ↓ <div class="foo">PHP中文網(wǎng)</div> ↑ ↑ ↑ 開始標(biāo)簽 內(nèi)容 結(jié)束標(biāo)簽
屬性可以為 HTML 標(biāo)簽提供一些額外信息，或者對(duì) HTML 標(biāo)簽進(jìn)行修飾。屬性需要添加在開始標(biāo)簽中，語法格式為：
attr="value"
attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號(hào)" "或者單引號(hào)' '包圍。
注意，雖然雙引號(hào)和單引號(hào)都可以包圍屬性值，但是為了規(guī)范和專業(yè)，請(qǐng)盡量使用雙引號(hào)。
一個(gè)標(biāo)簽可以沒有屬性，也可以有一個(gè)或者多個(gè)屬性。
jquery修改標(biāo)簽屬性值的兩種方法
方法1：使用attr()修改屬性值
attr() 方法可以設(shè)置被選元素的屬性值。
替換語法：
//單個(gè)屬性 $("div").attr("屬性名","新屬性值"); //多個(gè)個(gè)屬性 $("div").attr({屬性1:"新值",屬性2:"新值"....});
示例1：修改div標(biāo)簽style屬性的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("div").attr("style","height:100px;background-color: #AFEEEE;"); }); }); </script> </head> <body> <div style="height: 150px;border: 1px solid red;"></div> <br> <button>修改div的屬性值</button> </body> </html>
示例2：修改width和height屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("img").attr({width:"400",height":"320"}); }); }); </script> </head> <body> <img src="img/1.jpg" alt="多肉" width="200" height="160"><br><br> <button>修改width和height屬性值</button> </body> </html>
方法2：使用prop()修改屬性值
和attr() 方法一樣，prop()方法也可以設(shè)置被選元素的屬性值。
修改語法：
//單個(gè)屬性 $("div").prop("屬性名","新值"); //多個(gè)個(gè)屬性 $("div").prop({屬性1:"新值",屬性2:"新值"....});
示例1：修改div標(biāo)簽class屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("div").attr("class","box2"); }); }); </script> <style> .box1{ height: 150px; background-color: #AFEEEE; } .box2{ height: 100px; background-color: red; } </style> </head> <body> <div class="box1"></div> <br> <button>修改div的屬性值</button> </body> </html>
示例2：修改src和alt屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("img").prop({src:"img/4.jpg",alt:"晚霞"}); }); }); </script> </head> <body> <img src="img/1.jpg" alt="多肉" width="300"><br><br> <button>修改src和alt屬性</button> </body> </html>
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
