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