jQuery操作屬性的方法
阿新 • • 發佈：2018-08-10
類名 html標簽 itl -c 2.4 相關 fine 空格 checked
jQuery操作屬性的方法
1、一般屬性的操作方法
1.1、attr()方法 傳一個參數用於獲取傳入的屬性值，如果調用者為一個集合，則返回集合中第一個對象的屬性值 傳兩個參數用於設置屬性值，如果調用者為一個集合，則設置集合中每一個對象的屬性值，如果該屬性不存在，則自動增加該屬性
1.2、removeAttr()方法：傳一個參數，用於移除所有找到的DOM對象的屬性
1.3、prop()方法：用法和作用與attr()方法一致 區別：當作用於布爾類型屬性時（如：checked屬性)，獲取到的是true/false值 而用attr()方法獲取到的是屬性名稱/undefined
1.4、removeProp()方法：用法和作用與removeAttr()方法一致
1.5、註意點：
a.傳入的屬性名和屬性值均為字符串的形式傳入；
b.屬性名和屬性值的寫法和在HTML標簽內的寫法完全一致；
c.重復設置同一屬性會造成覆蓋。
2、操作類屬性相關方法
2.1、addClass(class|fn)添加類
2.2、removeClass([class|fn])刪除類
2.3、toggleClass(class|fn[,sw])切換類：有就刪除，沒有就添加
2.4、註意點：
a.同時操作多個類時，多個類名之間用空格分隔
b.與attr(class,className1[ className2 ...] )的區別：
用attr方法設置class屬性是一次性覆蓋設置，新設置的類會覆蓋掉原有的類 而用上面3個方法操作類屬性時，不會影響原有的其他類。
3、內容/文本操作方法
html()、text()、val()：獲取時不用傳參，設置時傳入需要設置的值作為參數
4、綜合案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .tored{ width:200px; height:30px; background:red; } .togreen{ width:200px; height:30px; background:green; } #div1{ width:250px; height:30px; background:red; } #ddiv1{ width:200px; height:30px; background:green; } </style> <script src="js/jquery.js"></script> </head> <body> <div id="div1">點我設置我的id屬性為ddiv1</div> <div id="div2"></div> <button id="btn1">設置div2style屬性</button><button id="btn2">移除div2style屬性</button> <div id="div3" class="tored">點我切換類</div> <script> $(function(){ $("#div1").click(function(){ $(this).attr("txt1","txt1生效"); $(this).attr("id","ddiv1"); $(this).text("我現在是ddiv1了"); }); $("#btn1").click(function(){ $("#div2").attr("style","width:300px;height:30px;background:red;"); }); $("#btn2").click(function(){ $("#div2").removeAttr("style"); }); $("#div3").click(function(){ $(this).toggleClass("tored togreen"); //$(this).toggleClass("tored").toggleClass("togreen"); 等效 }); }); </script> </body> </html>
jQuery操作屬性的方法