jQuery對表單、表格的操作及更多應用

?

---

?

表單應用

一個表單組成部分：

表單標簽、表單域及表單按鈕

• 單行文本框應用

獲取和失去焦點事件

?

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

?

• 多行文本框應用

?

1.高度變化

?

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

?

2.滾動條高度變化

?

?

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

?

• 復選框應用

?

最基本應用就是全選、反選和全不選等操作

?

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

?

• 下拉框應用

?

將選中選項添加給對方，將全部選項添加給對方，雙擊某個選項將其添加給對方

?

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

?

• 表單驗證

?

在每一個有requred類的文本框后加入“*”以提示必填項

?

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

?

驗證表單的用戶名和郵箱格式是否正確

?

?

$('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 = '請輸入至少6位的用戶名.'; $parent.append('<span class="onError formtips">' + errorMsg + '</span>'); //追加錯誤提示樣式 }else{ var okMsg = '輸入正確.'; $parent.append('<span class="onSuccess formtips">' + 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="onError formtips">' + errorMsg + '</span>'); //追加錯誤提示樣式 }else{ var okMsg = '輸入正確.'; $parent.append('<span class="onSuccess formtips">' + okMsg + '</span>'); //追加正確提示樣式 } } })

?

驗證表單，阻止提交

?

?

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

實時驗證（輸入時驗證，比blur()驗證更及時）

?

$('form :input').blur(function(){ //驗證代碼，見前文 }).keyup(function(){ $(this).triggerHandler("blur"); //每次松開按鍵時模擬觸發blur()事件以實時驗證 }).focus(function(){ $(this).triggerHandler("blur"); //每次得到焦點時模擬觸發blur()事件以實時驗證

?

---

?

表格應用

?

• 表格變色

普通隔行變色

?

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

?

設定含有指定文字內容的某一行變色

$(function(){ $("tr:contains('內容')").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"); //初始化表格時如有單選框默認選中也需要處理 //也可寫作$("table :radio:checked").parent("tr").addClass("selected"); //或者$("tbody>tr:has(:checked)").addClass("selected"); }); })

?

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

?

?

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

?

• 表格展開關閉

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

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

• 表格內容刪選

利用contains選擇器并結合filter()的篩選方法，可以實現表格內容的過濾

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

表格內容按輸入篩選顯示

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

---

其他應用

• 網頁字體大小

<span class="bigger">放大</span> <span class="smaller">縮小</span> <p id="para"></p> $(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size");//獲取當前字號，帶單位 var textFontSize = parseFloat(thisEle,10);//解析字符串并返回數字,參數10代表10進制 var unit = thisEle.slice(-2);//slice()方法返回字符串中從指定的字符開始的一個子字符串， //用以截取單位 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);//記得拼上單位 }); });

• 網頁選項卡

<div class="tab"><div class="tab_menu"><ul><li class="selected">時事</li><li>體育</li><li>娛樂</li></ul></div><div class="tab_box"> <div>時事</div><div class="hide">體育</div><div class="hide">娛樂</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");});

• 網頁換膚

通過更換css并且記錄進cookie實現換膚功能

?

轉載于:https://www.cnblogs.com/BBeyes/p/7428318.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。