▓▓▓▓▓▓ 大致介紹 接下來的這幾個博客是對前面所學知識的一個簡單的應用，來加深理解 ▓▓▓▓▓▓ 單行文本框 只介紹一個簡單的樣式：獲取和失去焦點改變樣式 基本結構： 在CSS中添加一個類為focus的樣式 然後為文本框添加獲取和失去焦點事件 效果： ▓▓▓▓▓▓ 多行文本框應用 1、高度變化 ...
▓▓▓▓▓▓ 大致介紹
接下來的這幾個博客是對前面所學知識的一個簡單的應用，來加深理解
▓▓▓▓▓▓ 單行文本框
只介紹一個簡單的樣式：獲取和失去焦點改變樣式
基本結構：
1 <form action="#" method="post" id="regFrom"> 2 <fieldset> 3 <legend>個人基本信息</legend> 4 <div> 5 <label for="username">名稱：</label> 6 <input id="username" type="text" /> 7 </div> 8 <div> 9 <label for="pass">密碼：</label> 10 <input id="pass" type="passward" /> 11 </div> 12 <div> 13 <label for="msg">詳細信息：</label> 14 <textarea id="msg" ></textarea> 15 </div> 16 </fieldset> 17 </form>
在CSS中添加一個類為focus的樣式
1 .focus{ 2 border: 1px solid #f00; 3 background: #fcc; 4 }
然後為文本框添加獲取和失去焦點事件
1 $(function(){ 2 $(':input').focus(function(){ 3 $(this).addClass('focus'); 4 }).blur(function(){ 5 $(this).removeClass('focus'); 6 }); 7 });
效果：
▓▓▓▓▓▓ 多行文本框應用
1、高度變化
改變多行文本框的高度
基本結構：
1 <form action="#" method="POST" id="regFrom"> 2 <div class="msg"> 3 <div class="msg_caption"> 4 <span class="bigger">放大</span> 5 <span class="small">縮小</span> 6 </div> 7 <div> 8 <textarea id="comment" rows="8" cols="20"> 9 多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框， 10 </textarea> 11 </div> 12 </div> 13 </form>
要實現的功能：
1、當單擊“放大”按鈕後，如果評論框的高度小於500px，則在原有的高度的基礎上增加50px
1、當單擊“縮小”按鈕後，如果評論框的高度大於50px，則在原有的高度的基礎上減少50px
添加事件：
1 $(function(){ 2 var $comment = $('#comment'); 3 $('.bigger').click(function(){ 4 if($comment.height() < 500){ 5 $comment.height( $comment.height() + 50 ); 6 } 7 }); 8 $('.small').click(function(){ 9 if($comment.height() > 50){ 10 $comment.height( $comment.height() - 50 ); 11 } 12 }); 13 });
效果：
2、滾動條高度變化
添加事件：
1 $(function(){ 2 var $comment = $('#comment'); 3 $('.bigger').click(function(){ 4 if(!$comment.is(':animated')){ 5 $comment.animate({scrollTop : '-=50'},400); 6 } 7 }); 8 $('.small').click(function(){ 9 if(!$comment.is(':animated')){ 10 $comment.animate({scrollTop : '+=50'},400); 11 } 12 }); 13 });
效果：
▓▓▓▓▓▓ 覆選框應用
對覆選框的基本應用，就是對覆選框進行全選、反選和全部選等操作
基本樣式：
1 <form action="#" method="POST" id="regFrom"> 2 <p>你愛好的運動</p> 3 <input type="checkbox" name="items" value="足球" />足球 4 <input type="checkbox" name="items" value="籃球" />籃球 5 <input type="checkbox" name="items" value="羽毛球" />羽毛球 6 <input type="checkbox" name="items" value="乒乓球" />乒乓球 7 <br /> 8 <input type="button" id="CheckedAll" value="全 選" /> 9 <input type="button" id="CheckedNo" value="全不選" /> 10 <input type="button" id="CheckedRev" value="反 選" /> 11 <input type="button" id="send" value="提 交" /> 12 </form>
添加全選按鈕和全不選事件
1 $('#CheckedAll').click(function(){ 2 $('[name=items]:checkbox').attr('checked',true); 3 }); 4 5 $('#CheckedNo').click(function(){ 6 $('[name=items]:checkbox').attr('checked',false); 7 });
添加反選事件
$('#CheckedRev').click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
});
});
添加提交事件：輸出選中的值
1 var str = "你選中的是：\r\n"; 2 $('#send').click(function(){ 3 4 $('[name=items]:checkbox:checked').each(function(){ 5 str += $(this).val() + "\r\n"; 6 }); 7 alert(str); 8 });
效果：
▓▓▓▓▓▓ 下拉框應用
基本結構：
1 <div class="centent"> 2 <select multiple id="select1" style="width:100px;height:160px;"> 3 <option value="1" >選項1</option> 4 <option value="2" >選項2</option> 5 <option value="3" >選項3</option> 6 <option value="4" >選項4</option> 7 <option value="5" >選項5</option> 8 <option value="6" >選項6</option> 9 <option value="7" >選項7</option> 10 <option value="8" >選項8</option> 11 </select> 12 <div> 13 <span id="add">選中添加到右邊>></span><br /> 14 <span id="add_all">全部添加到右邊>></span> 15 </div> 16 </div> 17 <div class="centent"> 18 <select multiple id="select2" style="width:100px;height:160px;"></select> 19 <div> 20 <span id="remove"><<選中刪除到左邊</span><br /> 21 <span id="remove_all"><<全部刪除到左邊</span> 22 </div> 23 </div>
實現的功能：
1、將選中的選項添加給對方
1 $('#add').click(function(){ 2 var $options = $('#select1 option:selected'); 3 $options.appendTo($('#select2')); 4 });
2、全部的選項添加給對方
$('#add_all').click(function(){
var $options = $('#select1 option');
$options.appendTo($('#select2'));
});
3、雙擊某個按鈕將其添加給對方
1 $('#select1').dblclick(function() { 2 var $options = $('option:selected'); 3 $options.appendTo($('#select2')); 4 });
效果：
▓▓▓▓▓▓ 表單應用
基本結構：
1 <form methos="post" action=""> 2 <div class="int"> 3 <label for="username">用戶名</label> 4 <input type="text" id="username" class="required" /> 5 </div> 6 <div class="int"> 7 <label for="email">郵箱</label> 8 <input type="text" id="email" class="required" /> 9 </div> 10 <div class="int"> 11 <label for="personinfo">個人資料</label> 12 <input type="text" id="personinfo" /> 13 </div> 14 <div class="sub"> 15 <input type="submit" value="提交" id="send" /> 16 <input type="reset" id="red" /> 17 </div> 18 19 </form>
驗證用戶輸入的是否正確
1 $('form :input').blur(function(){ 2 var $parent = $(this).parent(); 3 // 刪除以前的提示元素 4 $parent.find(".formtips").remove(); 5 // 驗證用戶名 6 if($(this).is('#username')){ 7 if(this.value == '' || this.value.length < 6){ 8 var errorMsg = '請輸入至少6位的用戶名'; 9 $parent.append('<span class="formtips onError">'+errorMsg+' </span>'); 10 }else{ 11 var okMsg = '輸入正確'; 12 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 13 } 14 } 15 16 // 驗證郵箱 17 if($(this).is('#email')){ 18 if(this.value == '' || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){ 19 var errorMsg = '請輸入正確的E-Mail地址'; 20 $parent.append('<span class="formtips onError">'+errorMsg+' </span>'); 21 }else{ 22 var okMsg = '輸入正確'; 23 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 24 } 25 } 26 27 });
提交按鈕綁定事件
1 // 提交按鈕 2 $('#send').click(function(){ 3 $('form .required:input').trigger('blur'); 4 var numError = $('form .onError').length; 5 if(numError){ 6 return false; 7 } 8 alert("註冊成功"); 9 });
