今天學習怎樣用JQuery編寫一些小的代碼,小小的試了一下編寫一個textarea,代碼如下:
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/CSS" media="screen"> *{ margin :0; padding :0; font : normal 12px/17px Arial; } .msg{ width :300px; margin : 100px; } .msg_caption{ width :100%; overflow : hidden; margin-botton : 1px; } .msg_caption span{ display : block; float : left; margin :0 2px; padding :4px 10px; background :#898989; cursor : pointer; color : white; } .msg textarea{ width :300px; height : 80px 100%; border :1px solid #000; } </style> <script type="text/javascript" src="../jquery1.11.js"></script> <script type="text/Javascript" charset="utf-8"> $(function(){ var $comment = $("#comment"); $('.bigger').click(function(){//綁定擴大按鈕 if(!$comment.is(":animated")){//判斷對象是否處于動畫狀態,不是才執行里面代碼 if($comment.height()<500){ $comment.animate({ height : "+=50" },1000);//重新設置高度,在原來的基礎上+50 } } }); $('.smaller').click(function(){//綁定縮小按鈕 if(!$comment.is(":animated")){//判斷對象是否處于動畫狀態,不是才執行里面代碼 if($comment.height()>50){ $comment.animate({ height : "-=50" },1000);//重新設置高度,在原來的基礎上-50 } } }); }) </script></head><body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >縮小</span> </div> <div> <textarea id="comment" rows="8" cols="20">C/S之間通過任意的協議通信，一般要求有特定的客戶端。比如QQ就是C/S模式，你的桌面上的QQ就是騰訊公司的特定的客戶端，而服務器就是騰訊的服務器。再比如你看的網絡電視也是如此，比如你的桌面上的iqiyi、視頻軟件等，這些軟件都是C/S模式的，他們要求在用戶有特定的客戶端(Socket)。而B/S模式是靠應用層的http協議進行通信的（當然也要靠底層的好多協議支持），一般不需要特定的客戶端，而是需要有統一規范的客戶端，那就是你的瀏覽器！Web頁就是B/S 模式，也就是說咱們說的網站就是B/S模式。 </textarea> </div> </div></form></body></html>
效果圖如下:
可以流暢的放大縮小,這就是JQuery特效的優點.
再來一個input標簽,代碼:
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> body{ font : normal 12px/17px Arial; } div{ padding :2px; } input,textarea{ width : 12em; border :1px solid #888; } .focus{ border : 1px solid #f00; background : #fcc; } </style> <script type="text/javascript" src="../jquery1.11.js"></script> <script type="text/javascript" charset="utf-8">$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val() == this.defaultValue){ $(this).val(""); }; }).blur(function(){ $(this).removeClass("focus"); if($(this).val() == ''){ $(this).val(this.defaultValue); }; }); //addClass:為每個匹配的元素添加指定的類名，一個或多個用空格分開，添加屬性 //val():獲得或者更改value屬性對應的值 //defaultValue():獲取默認值的value //removeClass():刪除對應的class屬性 }); </script></head><body> <form action="" method="post" id="regForm"> <fieldset> <legend>個人基本信息</legend> <div> <label for="username">名稱:</label> <input id="username" type="text" value="名稱" /> </div> <div> <label for="pass">密碼:</label> <input id="pass" type="passWord" value="密碼" /> </div> <div> <label for="msg">詳細信息:</label> <textarea id="msg" rows="2" cols="20">詳細信息</textarea> </div> </fieldset> </form></body></html>
效果圖如下:
添加一個焦點和失去焦點,默認值,再設置一個得到焦點時的背景顏色
第三個呢,寫了一個select,這個東西一般在QQ空間和淘寶中使用比較廣泛,所以也比較有興趣,代碼如下:
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css">* { margin:0; padding:0; }div.centent { float:left; text-align: center; margin: 10px;}span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white;}</style> <script type="text/javascript" src="../jquery1.11.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ //移動到右邊 $("#add").click(function(){ //獲取選中的項,刪除然后再移動到右邊,這里是選擇移動; $('#select1 option:selected').appendTo('#select2'); }); //移動到左邊 $("#remove").click(function(){ $('#select2 option:selected').appendTo('#select1'); }) //全部到右邊 $("#add_all").click(function(){ $('#select1 option').appendTo('#select2'); }) //全部到左邊 $("#remove_all").click(function(){ $('#select2 option').appendTo('#select1'); }) //雙擊選項 $('#select1').dblclick(function(){ //這里先定位#select1這個大的選擇框,然后定位到里面的被選擇的元素組陳的集合 //this就是表示這個集合,當我們按Ctrl或者shift的時候,我們操作的就是這個集合 //$("option:selected",this).appendTo("#select2"); $("option:selected",this).appendTo("#select2"); }) //雙擊選項 $('#select2').dblclick(function(){ $("option:selected",this).appendTo("#select1"); }) }); </script></head><body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option> <option value="5">選項5</option> <option value="6">選項6</option> <option value="7">選項7</option> </select> <div> <span id="add" >選中添加到右邊>></span> <span id="add_all" >全部添加到右邊>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8">選項8</option> </select> <div> <span id="remove"><<選中刪除到左邊</span> <span id="remove_all"><<全部刪除到左邊</span> </div> </div></body></html>
效果圖如下:
將左邊的選項移到右邊,且可雙擊,可多選添加,哈哈,寫代碼的時候很有意思,
感謝,望斧正!
新聞熱點
疑難解答
