4.存儲數(shù)據(jù)
使用data方法可以避免在DOM中存儲數(shù)據(jù),有些前端開發(fā)er喜歡使用HTML的屬性來存儲數(shù)據(jù):
$('selector').attr('alt', 'data being stored'); //之后可以這樣讀取數(shù)據(jù): $('selector').attr('alt');
使用”alt”屬性來作為參數(shù)名存儲數(shù)據(jù)其實對于HTML來說是不符合語義的,我們可以使用jQuery的data方法來為頁面中的某個元素存儲數(shù)據(jù):
$('selector').data('參數(shù)名', '要存儲的數(shù)據(jù)'); //之后這樣取得數(shù)據(jù): $('selector').data('參數(shù)');
這個data方法能讓你自己明明數(shù)據(jù)的參數(shù),更語義更靈活,你可以在頁面上的任何元素存儲數(shù)據(jù)信息。如果想了解更多關(guān)于data()和removeData()方法的介紹,可以看看jQuery官方講解
這個方法的經(jīng)典應用是給input域一個默認值,然后在聚焦的時候清空它:
HTML部分:
<form id="testform"> <input type="text" class="clear" value="Always cleared" /> <input type="text" class="clear once" value="Cleared only once" /> <input type="text" value="Normal text" /> </form>
JavaSript部分:
$(function() { //取出有clear類的input域 //(注: "clear once" 是兩個class clear 和 once) $('#testform input.clear').each(function(){ //使用data方法存儲數(shù)據(jù) $(this).data( "txt", $.trim($(this).val()) ); }).focus(function(){ // 獲得焦點時判斷域內(nèi)的值是否和默認值相同,如果相同則清空 if ( $.trim($(this).val()) === $(this).data("txt") ) { $(this).val(""); } }).blur(function(){ // 為有class clear的域添加blur時間來恢復默認值 // 但如果class是once則忽略 if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) { //Restore saved data $(this).val( $(this).data("txt") ); } }); });
查看Demo
5.jQuery手冊常備身邊
大多數(shù)人都很難記住所有的編程細節(jié),即使再好的程序員也會有對某個程序語言的疏忽大意,所以把相關(guān)的手冊打印出來或隨時放在桌面上進行查閱絕對是可以提高編程效率的。 oscarotero jquery 1.3 (壁紙版)
出處:彬Go
責任編輯:bluehearts
上一頁 jQuery代碼的14條改善技巧 [1] 下一頁 jQuery代碼的14條改善技巧 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|