鋒利的jQuery第五章 對表單、表格的操作知識點總結
阿新 • • 發佈：2019-05-14
tab 去掉 fonts 獲取字體 添加屬性 col div required color
jQuery對表單、表格的操作及更多應用
5.1表單應用
5.1.1、單行文本框應用：為文本框添加獲取和失去焦點事件
css代碼：
.focus {
border: 1px solid #f00;
background: #fcc;
jQuery代碼：
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val()==this.defaultValue){//默認值 $(this).val(""); } }).blur(function(){ $(this).removeClass("focus"); if($(this).val()==""){ $(this).val(this.defaultValue); } }); })
5.1.2：多行文本框的應用
1.高度變化
jQuery代碼：
$(function(){ var comment = $(‘#comment‘);//獲取評論框 $(".bigger").click(function(){//放大按鈕單擊事件 if(!comment.is(":animated")){//判斷是否處於動畫 if(comment.height()<500){ //comment.height(comment.height()+50);//立即加高 50 //comment.animate({height:"+=50"}, 1000);//加入自定義動畫，緩慢加高 50 comment.animate({scrollTop:"-=50"},1000);//滾動條高度} } }); $(".smaller").click(function(){ if(!comment.is(":animated")){ if(comment.height() >50){ //comment.height(comment.height()-50);//直接減50 //comment.animate({height:"-=50"}, 1000);//加入動畫，緩慢減50 comment.animate({scrollTop:"+=50"},1000);//滾動條向下高度 } } }); }）
2.復選框應用：
按鈕選擇的JQuery代碼：
//全選 $("#CheckedAll").click(function(){ //$(‘[name=items]:checkbox‘).attr(‘checked‘,true); $(‘[name=items]:checkbox‘).prop(‘checked‘,true); }); //全不選 $("#CheckedNo").click(function(){ //$(‘[name=items]:checkbox‘).attr(‘checked‘,false); $(‘[name=items]:checkbox‘).prop(‘checked‘,false); }); //反選 $("#CheckedRev").click(function(){ $(‘[name=items]:checkbox‘).each(function(){ //$(this).attr("checked",!$(this).attr("checked")); this.checked=!this.checked;//直接使用JS原生代碼，簡單實用 }); }); //輸出值 $("#send").click(function(){ var str="你選中的是:\r\n"; $(‘[type=checkbox]:checkbox:checked‘).each(function(){ str += $(this).val()+"\r\n"; }); alert(str); }); }）
復選框控制的jQuery代碼：
//全選復選框 $("#CheckedAll1").click(function(){ //if(this.checked){ // $(‘[name=items]:checkbox‘).attr(‘checked‘,true); //}else{ // $(‘[name=items]:checkbox‘).attr(‘checked‘,false); //} $(‘[name=items]:checkbox‘).attr(‘checked‘,this.checked); });
//全選復選框的聯動第一種方法 $("[name=items]:checkbox").click(function(){ var flag=true; $("[name=items]:checkbox").each(function(){ if(!this.checked){ flag=false; } }); if(flag){ $("#CheckedAll1").attr("checked",true); }else{ $("#CheckedAll1").attr("checked",false); } });
//全選復選框的聯動第二種方法 $("[name=items]:checkbox").click(function(){ var tmp=$(‘[name=items]:checkbox‘); $("#CheckedAll1").attr(‘checked‘,tmp.length == tmp.filter(‘:checked‘).length); $("#CheckedAll1").prop(‘checked‘,tmp.length == tmp.filter(‘:checked‘).length); });
//輸出值 $("#send1").click(function(){ var str="你選中的是：\r\n"; $(‘[name=items]:checkbox:checked‘).each(function(){ str += $(this).val() +"\r\n"; }); alert(str); //attr() 變成 prop() //第一個原則：只添加屬性名稱該屬性就會生效 //第二個原則：只存在true/false的屬性 }); })
5.1.4、下拉框應用
選中的添加到右邊或者左邊：
$(function(){ //將左邊的添加到右邊 $(‘#add‘).click(function(){ var options= $(‘#select1 option:selected‘); options.appendTo(‘#select2‘); //var remove = options.remove(); //remove.appendTo(‘#select2‘); }); //將全部的添加到右邊 $(‘#add_all‘).click(function(){ $(‘#select1 option‘).appendTo(‘#select2‘); }); //雙擊添加到右邊 $(‘#select1‘).dblclick(function(){ $("option:selected",this).appendTo(‘#select2‘); }); //將右邊的刪除到左邊 $(‘#remove‘).click(function(){ $(‘#select2 option:selected‘).appendTo(‘#select1‘); }); //將全部刪除到左邊 $(‘#remove_all‘).click(function(){ $(‘#select2 option‘).appendTo(‘#select1‘); }); //雙擊添加到左邊 $(‘#select2‘).dblclick(function(){ $(‘option:selected‘,this).appendTo(‘#select1‘); }); })
5.1.5、表單驗證：
$(function(){ $("form :input.required").each(function(){ $(this).parent().append($("<strong class=‘high‘>*</strong>")); }); $("form :input").blur(function(){ var parent = $(this).parent(); parent.find(".formtips").remove(); //驗證用戶名 if($(this).is(‘#username‘)){ if(this.value=="" || this.value.length < 6){ var errorMsg = ‘請輸入至少六位的用戶名.‘; parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘); }else{ var okMsg = ‘輸入正確.‘; parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘); } } //驗證郵箱 if($(this).is(‘#Email‘)){ if(this.value==""||(this.value!="" && !/[email protected]+\.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg = ‘請輸入正確的E-Mail地址.‘; parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘); }else{ var okMsg = ‘輸入正確.‘; parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); //最終驗證 $(‘#send‘).click(function(){ $("form .required:input").trigger(‘blur‘); var numError = $(‘form .onError‘).length; if(numError){ return false; } alert("註冊成功,密碼已發到你的郵箱,請查收."); }); //重置 $("#res").click(function(){ $(".formtips").remove(); }); });
5.2 表格應用
1.表格變色-radio單選的
$(function(){ $("tbody>tr:odd").addClass("odd");//給奇數行添加樣式 $("tbody>tr:even").addClass("even");//給偶數行添加樣式 //$("tr:contains(‘王五‘)").addClass("selected");//添加高亮模式 $("tbody>tr").click(function(){ $(this).addClass(‘selected‘) .siblings().removeClass(‘selected‘) .end() .find(‘:radio‘).attr(‘checked‘,true); }); //$(‘table :radio:checked‘).parents().parents().addClass(‘selected‘); //$(‘table :radio:checked‘).parents("tr").addClass(‘selected‘);//parents().parents()簡化成parents("tr") $("tbody>tr:has(:checked)").addClass(‘selected‘); // parents通過has選擇器簡化 })
表格變色-復選框高亮模式
$(function(){ $("tbody>tr:odd").addClass("odd");//給奇數行添加樣式 $("tbody>tr:even").addClass("even");//給偶數行添加樣式 //為選中行添加高亮模式1 // $(‘tbody>tr‘).click(function(){ // if($(this).hasClass(‘selected‘)){ // $(this).removeClass(‘selected‘) // .find(‘:checkbox‘).attr(‘checked‘,false); // }else{ // $(this).addClass(‘selected‘) // .find(‘:checkbox‘).attr(‘checked‘,true); // } // }); //為選中行添加高亮模式簡寫 $("tbody>tr").click(function(){ var hasSelected=$(this).hasClass(‘selected‘); $(this)[hasSelected?"removeClass":"addClass"](‘selected‘) .find(":checkbox").attr("checked",!hasSelected); }); $(‘tbody>tr:has(:checked)‘).addClass(‘selected‘); })
2.表格的展開關閉
$(function(){ $(‘tr.parent‘).click(function(){ $(this).toggleClass("selected")//添加高亮模式 .siblings(‘.child_‘+this.id).toggle();//隱藏/顯示子行 }).click(); $("tr:contains(‘王五‘)").addClass("selected");//contains選擇器，能匹配包含指定文本的元素 })
3.表格的內容篩選
$(function(){ $("#filterName").keyup(function(){ $("table tbody tr").hide() .filter(":contains(‘"+($(this).val())+"‘)").show(); }).keyup(); // $("table tbody tr") // .hide() // .filter(":contains(‘湖南長沙‘)") // .show(); })
5.3 其他應用
1.網頁字體大小
$(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size");//獲取字體大小 var textFontSize = parseInt(thisEle,10);//去掉單位px var unit = thisEle.slice(-2);//獲取單位px var cName = $(this).attr("class");//獲取當前屬性 if(cName == "bigger"){ //賦值 if(textFontSize <=22){ textFontSize += 2; } }else if(cName == "smaller"){ if(textFontSize >=12){ textFontSize -= 2; } } $("#para").css("font-size", textFontSize + unit); //添加新字體+單位 }); });
2.網頁選項卡
$(function(){ var div_li = $("div.tab_menu ul li"); div_li.click(function(){ $(this).addClass("selected") .siblings().removeClass("selected"); var index = div_li.index(this); $("div.tab_box > div") .eq(index).show() .siblings().hide(); }).hover(function(){//鼠標滑入滑出事件 $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); });
3.網頁換膚
方法一：
$(function(){ $("#skin li").click(function(){ $("#"+this.id).addClass("selected") .siblings().removeClass("selected"); $("#cssfile").attr("href","css/"+this.id+".css");//改變href屬性設置不同的值 $.cookie("MyCssSkin",this.id,{path:‘/‘,expires:10});//計入cookie }); var cookie_skin = $.cookie("MyCssSkin"); if(cookie_skin){ $("#"+cookie_skin).addClass("selected").siblings.removeClass("selected"); $("#cssfile").attr("href","css/"+ cookie_skin +".css"); $.cookie("MyCssSkin" , cookie_skin , {path: ‘/‘,expires:10}); } });
方法二：
$(function(){ var li = $("#skin li"); li.click(function(){ switchSkin(this.id); }); var cookie_skin = $.cookie("MyCssSkin"); if(cookie_skin){ switchSkin(cookie_skin); } }); function switchSkin(skinName){ $("#"+skinName).addClass("selected").siblings.removeClass("selected"); $("#cssfile").attr("href","css/"+ skinName +".css"); $.cookie( "MyCssSkin" , skinName , { path: ‘/‘, expires: 10 }); }
$(function(){var li = $("#skin li");li.click(function(){switchSkin(this.id);});var cookie_skin = $.cookie("MyCssSkin");if(cookie_skin){switchSkin(cookie_skin);}});function switchSkin(skinName){$("#"+skinName).addClass("selected").siblings.removeClass("selected");$("#cssfile").attr("href","css/"+ skinName +".css");$.cookie( "MyCssSkin" , skinName , { path: ‘/‘, expires: 10 });}
鋒利的jQuery第五章 對表單、表格的操作知識點總結