鍏充簬javascript涓殑dataset
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鍏充簬javascript涓殑dataset相关的知识，希望对你有一定的参考价值。
鏍囩锛?/p>
DataSet鏄疉DO.NET鐨勪腑蹇冩蹇点€傚彲浠ユ妸DataSet褰撴垚鍐呭瓨涓殑鏁版嵁搴擄紝DataSet鏄笉渚濊禆浜庢暟鎹簱鐨勭嫭绔嬫暟鎹泦鍚堛€傛墍璋撶嫭绔嬶紝灏辨槸璇达紝鍗充娇鏂紑鏁版嵁閾捐矾锛屾垨鑰呭叧闂暟鎹簱锛孌ataSet渚濈劧鏄彲鐢ㄧ殑锛孌ataSet鍦ㄥ唴閮ㄦ槸鐢╔ML鏉ユ弿杩版暟鎹殑锛岀敱浜嶺ML鏄竴绉嶄笌骞冲彴鏃犲叧銆佷笌璇█鏃犲叧鐨勬暟鎹弿杩拌瑷€锛岃€屼笖鍙互鎻忚堪澶嶆潅鍏崇郴鐨勬暟鎹紝姣斿鐖跺瓙鍏崇郴鐨勬暟鎹紝鎵€浠ataSet瀹為檯涓婂彲浠ュ绾冲叿鏈夊鏉傚叧绯荤殑鏁版嵁锛岃€屼笖涓嶅啀渚濊禆浜庢暟鎹簱閾捐矾銆?/p>
涓€.鍏充簬dataset
1.html5鑷畾涔夊睘鎬у強鍩虹
html5涓垜浠彲浠ヤ娇鐢╠ata-鍓嶇紑璁剧疆鎴戜滑闇€瑕佺殑鑷畾涔夊睘鎬?鏉ヨ繘琛屼竴浜涙暟鎹殑瀛樻斁,渚嬪鎴戜滑瑕佸湪涓€涓枃瀛楁寜閽笂瀛樻斁鐩稿簲鐨刬d:
<a href="javascript:;" data-id="2312">娴嬭瘯</a>
杩欓噷鐨刣ata-鍓嶇紑灏辫绉颁负data灞炴€?鍏跺彲浠ラ€氳繃鑴氭湰杩涜瀹氫箟,涔熷彲浠ュ簲鐢╟ss灞炴€ч€夋嫨鍣ㄨ繘琛屾牱寮忚缃?鏁伴噺涓嶅彈闄愬埗,鍦ㄦ帶鍒跺拰娓叉煋鏁版嵁鐨勬椂鍊欐彁渚涗簡闈炲父寮哄ぇ鐨勬帶鍒?
涓嬮潰鏄厓绱犲簲鐢╠ata灞炴€х殑涓€涓緥瀛?
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
瑕佹兂鑾峰彇鏌愪釜灞炴€х殑鍊?鍙互鍍忎笅闈㈣繖鏍蜂娇鐢╠ataset瀵硅薄:
|
1
2
3
4
5
|
var expenseday=document.getElementById(鈥榙ay-meal-expense鈥?/code> var typeOfDrink=expenseday.dataset.drink; console.log(typeOfDrink);//tea console.log(expenseday.dataset.food);//noodle console.log(expenseday.dataset.meal);//lunch |
濡傛灉娴忚鍣ㄦ敮鎸乨ataset,鍒欎細寮瑰嚭娉ㄩ噴鍐呭,濡傛灉娴忚鍣ㄤ笉鏀寔dataset鍒欎細鎶ラ敊,鏃犳硶鑾峰彇灞炴€rink/food/meal鐨勫€?瀵硅薄涓簄ull鎴栨湭瀹氫箟(濡侷E9鐗堟湰).
data灞炴€у熀鏈笂鎵€鏈夌殑娴忚鍣ㄩ兘鏄敮鎸佺殑,浣嗘槸dataset瀵硅薄鏀寔鐨勫氨姣旇緝鐗规畩浜?鐩墠浠呭湪Opera 11.1+,Chrome 9+涓嬪彲浠ラ€氳繃javascript,浣跨敤dataset璁块棶浣犺嚜瀹氫箟鐨刣ata灞炴€?鑷充簬鍏朵粬娴忚鍣?FireFox 6+(鏈嚭)浠ュ強Safari 6+(鏈嚭)浼氭敮鎸乨ataset瀵硅薄,鑷充簬IE娴忚鍣?鐩墠鐪嬫潵杩樻槸閬ラ仴鏃犳湡鐨勮秼鍔?
闇€瑕佹敞鎰忕殑鏄甫杈瑰瓧绗﹁繛鎺ョ殑鍚嶇О鍦ㄤ娇鐢ㄧ殑鏃跺€欓渶瑕佸懡鍚嶉┘宄板寲,鍗冲ぇ灏忓啓缁勫悎涔﹀啓,杩欎笌搴旂敤鍏冪礌鐨剆tyle瀵硅薄绫讳技,dom.style.borderColor.渚嬪,涓婇潰鐨勪緥瀛愪腑鐜版湁濡備笅data灞炴€?data-meal-time,鍒欐垜浠鑾峰彇鐩稿簲鐨勫€煎彲浠ヤ娇鐢?expenseday.dataset.mealTime
2.涓轰綍瑕佷娇鐢╠ataset
濡傛灉浣跨敤浼犵粺鐨勬柟娉曡幏鍙栧睘鎬у€煎簲璇ヤ細绫讳技涓嬮潰:
var typeOfDrink=document.getElementById(鈥榙ay-meal-expense鈥?.getAttribute(鈥榙ata-drink鈥?;
鐜板湪,濡傛灉鎴戜滑瑕佽幏寰楀涓嚜瀹氫箟鐨勫睘鎬у€?灏辫鐢ㄤ笅闈琛屼唬鐮佹潵瀹炵幇浜?
|
1
2
3
4
5
6
|
var attrs=expenseday.attributes, expense={},i,j;for (i=0,j=attrs.length;i<j;i++){ if(attrs[i].name.substring(0,5)==鈥榙ata-鈥?/code> expense[attrs[i].name.substring(5)]=attrs[i].value; }} |
鑰屼娇鐢╠ataset灞炴€?鎴戜滑鏍规湰涓嶉渶瑕佷换浣曞惊鐜幓鑾峰彇浣犳兂瑕佺殑閭ｄ釜鍊?鐩存帴绉掓潃:
expense=document.getElementById(鈥榙ay-meal-expense鈥?.dataset;
dataset骞朵笉鏄吀鍨嬫剰涔変笂鐨凧avaScript瀵硅薄,鑰屾槸涓狣OMStringMap瀵硅薄,DOMStringMap鏄疕TML5涓€绉嶆柊鐨勫惈鏈夊涓悕-鍊煎鐨勪氦浜掑彉閲?
3.dataset鐨勬搷浣?/strong>
鍙互鍍忎笅闈㈣繖鏍锋搷浣滃悕-鍊煎:
|
1
2
3
4
|
charInput=[]; for(var item in expenseday){ charInput.push(expenseday[item]); } |
涓婇潰杩欏嚑鍗冧唬鐮佺殑浣滅敤鏄鎵€鏈夌殑鑷畾涔夊睘鎬у鍒颁竴涓暟缁勪腑.
濡傛灉浣犳兂鍒犻櫎涓€涓猟ata灞炴€?鍙互杩欎箞鍋?
|
1
2
|
delete expenseday.dataset.meal; console.log(expenseday.dataset.meal)//undefined |
濡傛灉浣犳兂缁欏厓绱犳坊鍔犱竴涓睘鎬?鍙互杩欎箞鍋?
|
1
2
|
expenseday.dataset.dessert=鈥榠cecream鈥?/code> console.log(expenseday.dataset.dessert);//icecream |
4.璺焔etAttribute鐩告瘮鐨勯€熷害
浣跨敤dataset鎿嶄綔data瑕佹瘮浣跨敤getAttribute绋嶅井鎱簺.
浣嗘槸,濡傛灉鎴戜滑鍙槸澶勭悊灏戦噺鐨刣ata鏁版嵁,杩欑閫熷害涓婄殑宸紓閫犳垚鐨勫奖鍝嶆槸鍩烘湰涓婃病鏈夌殑.鍙嶈€?鎴戜滑搴旇鐪嬪埌,浣跨敤dataset鎿嶄綔鑷€傚簲灞炴€ц姣斿叾浠栫被浼糶etAttribute鐨勫舰寮忚灏戝緢澶氳浜哄ご鐤肩殑楹荤儲,骞朵笖鏇村叿鏈夊彲璇绘€?鍥犳,鏉冭 鏉ョ湅,鎿嶄綔鑷畾涔夊睘鎬?dataset鎿嶄綔鏄笂閫?
5.浠€涔堝湴鏂逛娇鐢╠ataset
姣忔浣犱娇鐢ㄨ嚜瀹氫箟data灞炴€х殑鏃跺€?浣跨敤dataset鍘昏幏鍙栧悕-鍊煎灏辨槸涓笉閿欑殑閫夋嫨.鑰冭檻鍒扮幇鍦ㄥ緢澶氭祻瑙堝櫒杩樻槸鎶奷ataset褰撲綔涓嶈璇嗙殑澶栨槦鐢熺墿鐪嬪緟,鎵€浠?鍦ㄥ疄闄呬娇鐢ㄧ殑鏃跺€?鏈夊繀瑕佽繘琛屼竴涓嬬壒寰佹娴?鐪嬬湅鏄惁鏀寔dataset,绫讳技涓嬮潰鐨勪娇鐢?
|
1
2
3
4
5
|
if(expenseday.dataset){ expenseday.dataset.dessert=鈥榠cecream鈥?/code> }else{ expenseday.setAttribute(鈥榙ata-dessert鈥?/code> } |
娉ㄦ剰:濡傛灉浣犵殑搴旂敤绋嬪簭浼氶绻佹洿鏂癲ata灞炴€?寤鸿浣跨敤JavaScript瀵硅薄杩涜鏁版嵁绠＄悊,鑰屼笉鏄瘡娆￠兘缁忕敱data灞炴€ц繘琛屾洿鏂?
浜?鍏充簬瀛楅潰閲忚祴鍊?鏁扮粍璧嬪€?/p>
|
1
2
3
4
5
6
7
|
var a=1,b=2;var c=[a,b];console.log(c);//[1,2]var b=3;console.log(c);//[1,2]var c=[a,b];console.log(c);//[1,3] |
涓婇潰璧嬬粰a,b鐨勫€奸兘鏄暟瀛?c鏄敱a鍜宐缁勬垚鐨勬暟缁?鐢变簬a,b鐨勫€煎氨鏄?鍜?,鎵€浠ar c=[a,b]灏辩瓑浜巚ar c=[1,2];涔嬪悗a鍜宐鐨勫€煎啀鎬庝箞鏀瑰彉鍙樹笌c=[1,2]鏃犲叧浜?
浠ヤ笂鍐呭鏄叧浜巎avascript涓璬ataset鐨勯棶棰樺皬缁擄紝甯屾湜瀵瑰ぇ瀹跺涔犳湁鎵€甯姪銆?/p>
以上是关于鍏充簬javascript涓殑dataset的主要内容，如果未能解决你的问题，请参考以下文章