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!="" && !/.+@.+\.[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 });}
原文：https://www.cnblogs.com/mm0708/p/10770417.html