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