jQuery對(duì)表單、表格的操作及更多應(yīng)用

?

---

?

表單應(yīng)用

一個(gè)表單組成部分：

表單標(biāo)簽、表單域及表單按鈕

• 單行文本框應(yīng)用

獲取和失去焦點(diǎn)事件

?

$(function(){ $(":input").focus(function(){ //獲取焦點(diǎn)觸發(fā)事件 $(this).addClass("focus"); //增加樣式 }).blur(function(){ //失去焦點(diǎn)觸發(fā)事件 $(this).removeClass("focus"); //移除樣式 }); })

?

• 多行文本框應(yīng)用

?

1.高度變化

?

$(function(){ var $comment = $("#comment"); //獲取評(píng)論框 $(".bigger").click(function(){ //放大按鈕綁定單擊事件 if ($comment.height() < 500){ //判斷實(shí)際高度 $comment.height($comment.height() + 50); //放大高度
} }); $(".smaller").click(function(){ //縮小按鈕綁定單擊事件 if (!$comment.is(":animated")){ //判斷是否處于動(dòng)畫(huà)隊(duì)列中，避免堆積動(dòng)畫(huà)隊(duì)列 if ($comment.height() > 500){ //判斷實(shí)際高度 $comment.animate({height:"-=50"},400); //以動(dòng)畫(huà)方式縮小高度，在原有基礎(chǔ)上減50 } } }); });

?

2.滾動(dòng)條高度變化

?

?

$(function(){ var $comment = $("#comment"); //獲取評(píng)論框 #(".up").click(function(){ //點(diǎn)擊向上滾動(dòng)按鈕(.up)觸發(fā)事件 if(!$comment.is(":animated")){ //判斷是否處于動(dòng)畫(huà)隊(duì)列中，避免堆積動(dòng)畫(huà)隊(duì)列 $comment.animate({scrollTop:"-=50"},400); //以動(dòng)畫(huà)方式向上滾動(dòng)滾動(dòng)條 } }); });

?

• 復(fù)選框應(yīng)用

?

最基本應(yīng)用就是全選、反選和全不選等操作

?

$(function(){ $("#checkedAll").click(function(){ //點(diǎn)擊觸發(fā)全選事件 $('[name=items]:checkbox').attr('checked',true);//使用attr方法更改checked屬性（注意屬性選擇器），全不選選設(shè)置false值即可 }); $("#checkedRev").click(function(){ //點(diǎn)擊觸發(fā)反選事件 $('[name=items]:checkbox').each(function(){ //循環(huán)每一個(gè)復(fù)選框 $(this).attr("checked", !$(this).attr("checked")); //設(shè)置反值（jQuery方法） }); }); }); //如下使用原生JavaScript設(shè)置反選更簡(jiǎn)單 $(function(){ $("checkedRev").click(function(){ $('[name=items]:checkbox').each(function(){ //循環(huán)每一個(gè)復(fù)選框 this.checked = !this.checked; //設(shè)置反值（JS原生方法） }); }); })

?

• 下拉框應(yīng)用

?

將選中選項(xiàng)添加給對(duì)方，將全部選項(xiàng)添加給對(duì)方，雙擊某個(gè)選項(xiàng)將其添加給對(duì)方

?

$('#add').click(function(){ var $options = $('#select1 option:selected'); //獲取選中項(xiàng) $options.appendTo('#select2'); //追加給另一個(gè)下拉框 }); $('#addAll').click(function(){ var $options = $('#select1 option'); //獲取全部項(xiàng) $options.appendTo('#select2'); //追加給另一個(gè)下拉框 }); $('#select1').dblclick(function(){ //雙擊某個(gè)選項(xiàng)將其追加給另一個(gè)下拉框 var $options = $("option:selected",this); //獲取選中項(xiàng)（注意選擇器） $options.appendTo('#select2'); //追加給另一個(gè)下拉框 })

?

• 表單驗(yàn)證

?

在每一個(gè)有requred類的文本框后加入“*”以提示必填項(xiàng)

?

$("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); //創(chuàng)建元素 $(this).parent().append($required); //追加到文檔中，注意parent()方法的使用 })

?

驗(yàn)證表單的用戶名和郵箱格式是否正確

?

?

$('form :input').blur(function(){ //失去焦點(diǎn)事件 var $parent = $(this).parent(); //定義臨時(shí)變量 $parent.find(".formtips").remove(); //刪除以前的提醒元素，避免堆積重復(fù)提醒 //驗(yàn)證用戶名 if ($(this).is('#username')){ if (this.value=="" || this.value.length < 6){ //判斷 var errorMsg = '請(qǐng)輸入至少6位的用戶名.'; $parent.append('<span class="onError formtips">' + errorMsg + '</span>'); //追加錯(cuò)誤提示樣式 }else{ var okMsg = '輸入正確.'; $parent.append('<span class="onSuccess formtips">' + okMsg + '</span>'); //追加正確提示樣式 } } // 驗(yàn)證郵箱 if ($(this).is("#email")){ if (this.value=="" || (this.value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ //判斷 var errorMsg = '請(qǐng)輸入正確的E-mail地址.'; $parent.append('<span class="onError formtips">' + errorMsg + '</span>'); //追加錯(cuò)誤提示樣式 }else{ var okMsg = '輸入正確.'; $parent.append('<span class="onSuccess formtips">' + okMsg + '</span>'); //追加正確提示樣式 } } })

?

驗(yàn)證表單，阻止提交

?

?

$('send').click(function(){ $("form .required:input").trigger('blur'); //模擬觸發(fā)blur()事件 var numError = $('form .onError').length; //定義numError變量 if (numError){ return false; //判斷錯(cuò)誤提示個(gè)數(shù)（長(zhǎng)度），如大于0（即存在錯(cuò)誤提示）則阻止提交 } alert("注冊(cè)成功！"); })

實(shí)時(shí)驗(yàn)證（輸入時(shí)驗(yàn)證，比blur()驗(yàn)證更及時(shí)）

?

$('form :input').blur(function(){ //驗(yàn)證代碼，見(jiàn)前文 }).keyup(function(){ $(this).triggerHandler("blur"); //每次松開(kāi)按鍵時(shí)模擬觸發(fā)blur()事件以實(shí)時(shí)驗(yàn)證 }).focus(function(){ $(this).triggerHandler("blur"); //每次得到焦點(diǎn)時(shí)模擬觸發(fā)blur()事件以實(shí)時(shí)驗(yàn)證

?

---

?

表格應(yīng)用

?

• 表格變色

普通隔行變色

?

$(function(){$("tbody>tr:odd").addClass("odd"); //給tbody中的奇數(shù)行添加樣式$("tbody>tr:even").addClass("even"); //給tbody中的偶數(shù)行添加樣式 }) //其中addClass()中的odd和even是css樣式，選擇器中的索引是從0開(kāi)始的，因此第一行是偶數(shù)

?

設(shè)定含有指定文字內(nèi)容的某一行變色

$(function(){ $("tr:contains('內(nèi)容')").addClass("selected"); })

單選框控制表格行高亮 find()方法；:radio，:checked，:has選擇器

?

?

//DOM如：<table><tr><td><input type="radio" /></td></tr>...</table> $(function(){ $("tr").click(function(){ $(this).addClass("selected").siblings().removeClass("selected").end() .find(":radio").attr("checked",true); $("table :radio:checked").parent().parent().addClass("selected"); //初始化表格時(shí)如有單選框默認(rèn)選中也需要處理 //也可寫(xiě)作$("table :radio:checked").parent("tr").addClass("selected"); //或者$("tbody>tr:has(:checked)").addClass("selected"); }); })

?

復(fù)選框控制表格高亮 :has選擇器；使用hasClass()方法進(jìn)行判斷

?

?

$("tr:has(:checked)").addClass("selected"); //進(jìn)入頁(yè)面時(shí)，處理已被選中的表格行 $("tr").click(function(){ if ($(this).hasClass("selected")){ //判斷是否含有此樣式 $(this).removeClass("selected").find(":checkbox").attr("checked",false); }else{ $(this).addClass("selected").find(":checkbox").attr("checked",true); } }) //上述代碼可使用三元運(yùn)算簡(jiǎn)化為： $("tr").click(function(){ var hasSelected = $(this).hasClass("selected"); $(this)[hasSelected?"removeClass":"addClass"]("selected") .find(":checkbox").attr("checked",!hasSelected); //注：$(this)["addClass"]("selected");等價(jià)于$(this).addClass("selected"); })

?

• 表格展開(kāi)關(guān)閉

toggleClass()和toggle()方法；屬性技巧的使用

$(function(){$('tr.parent').click(function(){ //獲取所謂的父行$(this).toggleClass("selected") //添加 /刪除高亮 .silbings('.child_'+this.id).toggle(); //隱藏/顯示所謂的子行}); });

• 表格內(nèi)容刪選

利用contains選擇器并結(jié)合filter()的篩選方法，可以實(shí)現(xiàn)表格內(nèi)容的過(guò)濾

$(function(){$("table tbody tr").hide()filter(":contains('李')").show();

表格內(nèi)容按輸入篩選顯示

$(function(){ $("#filterName").keyup(function(){ $("tr").hide().filter(":contains('" + ($(this).val()) + "')").show(); }).keyup(); //DOM加載完時(shí)，綁定事件完成之后立即觸發(fā)，避免在刷新頁(yè)面后篩選效果消失 })

---

其他應(yīng)用

• 網(wǎng)頁(yè)字體大小

<span class="bigger">放大</span> <span class="smaller">縮小</span> <p id="para"></p> $(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size");//獲取當(dāng)前字號(hào)，帶單位 var textFontSize = parseFloat(thisEle,10);//解析字符串并返回?cái)?shù)字,參數(shù)10代表10進(jìn)制 var unit = thisEle.slice(-2);//slice()方法返回字符串中從指定的字符開(kāi)始的一個(gè)子字符串， //用以截取單位 var cName = $(this).attr("class");//此處和下面的判斷很有意思，可以免得再寫(xiě)一遍代碼 if(cName == "bigger"){ if(textFontSize <= 22){//限制無(wú)限放大 textFontSize += 2;//加大字號(hào) } }else if(cName == "smaller"){ if(textFontSize >= 12){//限制無(wú)限縮小 textFontSize -= 2; } } $(#para).css("font-size",textFontSize + unit);//記得拼上單位 }); });

• 網(wǎng)頁(yè)選項(xiàng)卡

<div class="tab"><div class="tab_menu"><ul><li class="selected">時(shí)事</li><li>體育</li><li>娛樂(lè)</li></ul></div><div class="tab_box"> <div>時(shí)事</div><div class="hide">體育</div><div class="hide">娛樂(lè)</div></div> </div> HTML
var $div_li = $(".tab_menu > ul li");$div_li.click(function () {$(this).addClass("selected").siblings().removeClass("selected");var index = $div_li.index(this); //獲取索引$(".tab_box >div").eq(index).show().siblings().hide();}).hover(function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");});

• 網(wǎng)頁(yè)換膚

通過(guò)更換css并且記錄進(jìn)cookie實(shí)現(xiàn)換膚功能

?

轉(zhuǎn)載于:https://www.cnblogs.com/BBeyes/p/7428318.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的jQuery学习笔记（四）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。