一. 屬性和屬性節點得區別
1.什么是屬性?
對象身上保存得變量就是屬性
2.如何操作屬性?
設置屬性得值:
方式一: 對象.屬性名稱 = 值;
方式二: 對象["屬性名稱"] = 值;
獲取屬性得值:
方式一: 對象.屬性名稱;
方式二: 對象["屬性名稱"]
代碼如下所示:
//屬性functionStudent(){}vars=newStudent();//設置屬性s.name="xyr";s["age"]=18;//獲取屬性console.log(s.name);console.log(s["age"]);
3.什么是屬性節點?
<span class= "sp"></span>
在編寫HTML代碼時,在HTML標簽中添加得屬性就是屬性節點
在瀏覽器中找到span這個DOM元素之后, 展開看到得都是屬性
在attributes屬性中保存得所有內容都是屬性節點,如下圖所示:
4.如何操作屬性節點?
DOM元素.setAttribute("屬性名稱", "值");
DOM元素.getAttribute("屬性名稱");
5.屬性和屬性節點有什么區別?
任何對象都有屬性, 但是只有DOM對象才有屬性節點
二. JQuery操作屬性節點
1.attr(name|pro|key,val|fn)
作用: 獲取或者設置屬性節點得值,不能夠操作屬性
可以傳遞一個參數, 也可以傳遞兩個參數
如果傳遞一個參數, 代表獲取屬性節點得值
如果傳遞兩個參數, 代表設置屬性節點得值,如果傳遞得是2個以上得屬性,可以使用json格式得數據,代表修改或者新增多個屬性節點得值
注意點:
獲取:無論找到多少個元素,都只會返回第壹個元素指定得屬性節點得值
增加:如果設置得屬性節點不存在,那么系統會自動新增
修改:如果設置得屬性節點存在,找到多少個元素就會修改多少個元素
2.removeAttr(name)
刪除屬性節點
注意點:
會刪除所有找到元素指定得屬性節點
刪除多個屬性節點得時候,每個屬性名稱使用空格隔開
代碼示例如下所示:
1.prop(n|p|k,v|f) 作用: 獲取或者設置屬性得值,但是它也能夠操作屬性節點 特點和attr方法一致 注意: 雖然prop方法能夠操作屬性節點,但是只能夠操作系統屬性節點,不能夠操作自定義屬性節點 2.removeProp(name) 刪除屬性 注意: 刪除系統屬性節點只能夠將值改為undefined 自家推薦在操作屬性節點時,具有 true 和 false 兩個屬性得屬性節點， 如 checked, selected 或者 disabled 使用prop()，其他得使用 attr() 總結: 實際開發中如果操作屬性使用prop,操作屬性節點使用attr,如果屬性節點包含true 和 false 兩個屬性得屬性節點使用prop. 代碼示例如下所示: 3. JQuery操作屬性實現支持得切換 需求: 在輸入框中輸入支持地址,切換支持按鈕即可切換支持 代碼示例如下所示:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JQuery操作屬性節點</title><scriptsrc=http://www.hb0557.com/skin/m04blueskin/image/nopic.gif><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JQuery操作屬性</title><scriptsrc=http://www.hb0557.com/skin/m04blueskin/image/nopic.gif><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JQuery操作屬性實現支持切換</title><scriptsrc=http://www.hb0557.com/skin/m04blueskin/image/nopic.gif>
