一、表單應(yīng)用
1 獲取和失去焦點改變樣式(P142)
$(function(){$(":input").focus(function(){ //獲取焦點觸發(fā)事件$(this).addClass("focus"); //增加樣式}).blur(function(){ //失去焦點觸發(fā)事件$(this).removeClass("focus"); //移除樣式});})2 多行文本框觸發(fā)事件改變文本框高度(P144)
$(function(){var $comment = $("#comment"); //獲取文本框$(".bigger").click(function(){ //點擊放大按鈕(.bigger)觸發(fā)事件if ($comment.height() < 500){ //判斷實際高度$comment.height($comment.height() + 50); //放大高度}});$(".smaller").click(function(){ //點擊縮小按鈕(.smaller)觸發(fā)事件if (!$comment.is(":animated")){ //判斷是否處于動畫隊列中，避免堆積動畫隊列if ($comment.height() > 500){ //判斷實際高度$comment.animate({height:"+=50"},400); //以動畫方式縮小高度}}});})3 文本框滾動條高度變化(P145)
$(function(){var $comment = $("#comment"); //獲取文本框#(".up").click(function(){ //點擊向上滾動按鈕(.up)觸發(fā)事件if(!$comment.is(":animated")){ //判斷是否處于動畫隊列中，避免堆積動畫隊列$comment.animate({scrollTop:"-=50"},400); //以動畫方式向上滾動滾動條}}); //（向下滾動代碼從略）})4 復(fù)選框全選、全不選、反選等(P146)
$(function(){$("#checkedAll").click(function(){ //點擊觸發(fā)全選事件$('[name=items]:checkbox').attr('checked',true); //使用attr方法更改checked屬性（注意屬性選擇器），反選設(shè)置false值即可});$("#checkedRev").click(function(){ //點擊觸發(fā)反選事件$('[name=items]:checkbox').each(function(){ //循環(huán)每一個復(fù)選框$(this).attr("checked", !$(this).attr("checked")); //設(shè)置反值（jQuery方法）});});});//如下使用原生JavaScript設(shè)置反選更簡單$(function(){$("checkedRev").click(function(){$('[name=items]:checkbox').each(function(){ //循環(huán)每一個復(fù)選框this.checked = !this.checked; //設(shè)置反值（JS原生方法）});});})5 輸出復(fù)選框選中的值(P148)
$("#send").click(function(){ //點擊觸發(fā)事件var str="選中的是：/r/n"; //賦值$('[name=items]:checkbox:checked').each(function(){ //循環(huán)每一個選中的復(fù)選框str += $(this).val() + "/r/n"; //用val()方法獲值并循環(huán)賦值});alert(str); //輸出str})6 用一個復(fù)選框來控制全部復(fù)選框的全選和反選(P149)
$("#checkedAll").click(function(){ //觸發(fā)事件if(this.checked){$('[name=items]:checkbox').attr("checked", true); //判斷賦值}else{$('[name=items]:checkbox').attr("checked",false); //判斷賦值}});//因為控制全選的復(fù)選框的checked和所有復(fù)選框的checked的值是相同的，所以可以省略判斷如下$("#checkedAll").click(function(){$('[name=items]:checkbox').attr("checked", this.checked);})7 全選狀態(tài)下，任一復(fù)選框取消選中，控制全選的復(fù)選框則也取消選中；所有復(fù)選框同時選中時，控制全選的復(fù)選框則也被選中（聯(lián)動）(P149)
//思路1：$('[name=items]:checkbox').click(function(){ //點擊任一復(fù)選框var flag = true; //定義flag變量，初始值為true$('[name=items]:checkbox').each(function(){ //循環(huán)復(fù)選框組if (!this.checked){flag = false; //判斷當(dāng)存在一個未選中的復(fù)選框時，flag = false}});$('#checkedAll').attr('checked',flag); //將flag變量賦給控制全選的復(fù)選框的checked屬性});//思路2：$('[name=items]:checkbox').click(function(){ //點擊任一復(fù)選框var $tmp = $('[name=items]:checkbox'); //定義臨時變量（避免重復(fù)使用選擇器）$('#checkedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);//使用filter()方法篩選出選中的復(fù)選框，和全部復(fù)選框的對象比較 length，//然后將返回的布爾值直接賦給#checkedAll})8 下拉框應(yīng)用，將一個下拉框中已選中的選項（或者全部選項）添加到另一個下拉框中(P150)
$('#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'); //追加給另一個下拉框})9 表單驗證，在每一個有requred類的文本框后加入“*”以提示必填項(P153)
$("form :input.required").each(function(){var $required = $("<strong class='high'> *</strong>"); //創(chuàng)建元素$(this).parent().append($required); //追加到文檔中，注意parent()方法的使用})10 驗證表單的用戶名和郵箱格式是否正確(P154)
$('form :input').blur(function(){ //失去焦點事件var $parent = $(this).parent(); //定義臨時變量$parent.find(".formtips").remove(); //刪除以前的提醒元素，避免堆積重復(fù)提醒//驗證用戶名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>'); //追加正確提示樣式}}})
11 驗證表單，阻止提交(P155)
$('send').click(function(){$("form .required:input").trigger('blur'); //模擬觸發(fā)blur()事件var numError = $('form .onError').length; //定義numError變量if (numError){return false; //判斷錯誤提示個數(shù)（長度），如大于0（即存在錯誤提示）則阻止提交}alert("注冊成功！");})12 實時驗證（輸入時驗證，比blur()驗證更及時）(P156)
$('form :input').blur(function(){//驗證代碼，見前文}).keyup(function(){$(this).triggerHandler("blur"); //每次松開按鍵時模擬觸發(fā)blur()事件以實時驗證}).focus(function(){$(this).triggerHandler("blur"); //每次得到焦點時模擬觸發(fā)blur()事件以實時驗證注：triggerHandler()方法只會觸發(fā)為元素綁定的事件，不會觸發(fā)瀏覽器默認(rèn)的事件。
