在线高清av,啊啊啊久久久,国产69精品久久app免费版

jquery選項卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>


<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" >
//<![CDATA[
   $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
           $(this).addClass("selected")            //當前<li>元素高亮
                   .siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮
            var index = $div_li.index(this); // 獲取當前點擊的<li>元素在全部li元素中的索引。
           $("div.tab_box > div")     //選取子節點。不選取子節點的話，會引起錯誤。如果里面還有div
                   .eq(index).show()   //顯示 <li>元素對應的<div>元素
                   .siblings().hide(); //隱藏其它幾個同輩的<div>元素
       }).hover(function(){
           $(this).addClass("hover");
       },function(){
           $(this).removeClass("hover");
       })
   })
//]]>
</script>
</head>
<body>

<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>

</body>
</html>

posted @ 2013-03-20 12:54 楊軍威閱讀(225) | 評論 (0) | 編輯收藏

jquery控制字體大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>


<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $("span").click(function(){
           var thisEle = $("#para").css("font-size");
           var textFontSize = parseFloat(thisEle , 10);
           var unit = thisEle.slice(-2); //獲取單位
           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);
       });
   });
</script>
</head>
<body>

<div class="msg">
   <div class="msg_caption">
       <span class="bigger" >放大</span>
       <span class="smaller" >縮小</span>
   </div>
   <div>
       <p id="para">
       This is some text. This is some text. This is some text. This is some text. This
       is some text. This is some text. This is some text. This is some text. This is some
       text. This is some text. This is some text. This is some text. This is some text.
       This is some text. This is some text. This is some text. This is some text. This
       is some text. This is some text.
       </p>
   </div>
</div>

</body>
</html>

posted @ 2013-03-20 12:51 楊軍威閱讀(304) | 評論 (0) | 編輯收藏

jquery表格內容過濾

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
       $("#filterName").keyup(function(){
          $("table tbody tr")
                   .hide()
                   .filter(":contains('"+( $(this).val() )+"')")
                   .show();
       }).keyup();
})
</script>
</head>
<body>
<div>
<br/>
篩選：
<input id="filterName" />
<br/>

</div>

<table>
   <thead>
       <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
   </thead>
   <tbody>
       <tr><td>張山</td><td>男</td><td>浙江寧波</td></tr>
       <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
       <tr><td>王五</td><td>男</td><td>湖南長沙</td></tr>
       <tr><td>找六</td><td>男</td><td>浙江溫州</td></tr>
       <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
       <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
       <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
       <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
       <tr><td>李四</td><td>男</td><td>湖南長沙</td></tr>
   </tbody>
</table>

</body>
</html>

posted @ 2013-03-20 12:50 楊軍威閱讀(265) | 評論 (0) | 編輯收藏

jquery的表格伸縮顯示隱藏

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $('tr.parent').click(function(){   // 獲取所謂的父行
           $(this)
               .toggleClass("selected")   // 添加/刪除高亮
               .siblings('.child_'+this.id).toggle(); // 隱藏/顯示所謂的子行
   }).click();
})
</script>
</head>
<body>
   <table>
       <thead>
           <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
       </thead>
       <tbody>
           <tr class="parent" id="row_01"><td colspan="3">前臺設計組</td></tr>
           <tr class="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr>
           <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>

           <tr class="parent" id="row_02"><td colspan="3">前臺開發組</td></tr>
           <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長沙</td></tr>
           <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr>

           <tr class="parent" id="row_03"><td colspan="3">后臺開發組</td></tr>
           <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
           <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
       </tbody>
   </table>

</body>
</html>

posted @ 2013-03-20 12:44 楊軍威閱讀(545) | 評論 (0) | 編輯收藏

jquery的表格的隔行換色和多選行

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后給奇數行添加樣式
       $("tbody>tr:even").addClass("even"); //先排除第一行,然后給偶數行添加樣式
       $('tbody>tr').click(function() {
           if ($(this).hasClass('selected')) {
               $(this)
                   .removeClass('selected')
                   .find(':checkbox').attr('checked',false);
           }else{
               $(this)
                   .addClass('selected')
                   .find(':checkbox').attr('checked',true);
           }
       });
       // 如果復選框默認情況下是選擇的，則高色.
       // $('table :checkbox:checked').parent().parent().addClass('selected');
       //簡化:
       $('table :checkbox:checked').parents("tr").addClass('selected');
       //$('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
   <table>
       <thead>
           <tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr>
       </thead>
       <tbody>
           <tr><td><input type="checkbox" name="choice" value=""/></td>
               <td>張山</td><td>男</td><td>浙江寧波</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>李四</td><td>女</td><td>浙江杭州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
               <td>王五</td><td>男</td><td>湖南長沙</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>找六</td><td>男</td><td>浙江溫州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
       </tbody>
   </table>
</body>
</html>

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
       $("tbody>tr:odd").addClass("odd");
       $("tbody>tr:even").addClass("even");
       $('tbody>tr').click(function() {
           //判斷當前是否選中
           var hasSelected=$(this).hasClass('selected');
           //如果選中，則移出selected類，否則就加上selected類
           $(this)[hasSelected?"removeClass":"addClass"]('selected')
               //查找內部的checkbox,設置對應的屬性。
               .find(':checkbox').attr('checked',!hasSelected);
       });
       // 如果復選框默認情況下是選擇的，則高色.
       $('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
   <table>
       <thead>
           <tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr>
       </thead>
       <tbody>
           <tr><td><input type="checkbox" name="choice" value=""/></td>
               <td>張山</td><td>男</td><td>浙江寧波</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>李四</td><td>女</td><td>浙江杭州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
               <td>王五</td><td>男</td><td>湖南長沙</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>找六</td><td>男</td><td>浙江溫州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
           <tr><td><input type="checkbox" name="choice" value="" /></td>
               <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
       </tbody>
   </table>
</body>
</html>

posted @ 2013-03-20 11:24 楊軍威閱讀(238) | 評論 (0) | 編輯收藏

jquery的表格的隔行換色和單選某行

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function(){
       $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后給奇數行添加樣式
       $("tbody>tr:even").addClass("even"); //先排除第一行,然后給偶數行添加樣式
       $('tbody>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').parents("tr").addClass('selected');
         //再簡化:
       //$('tbody>tr:has(:checked)').addClass('selected');

   })
</script>
</head>
<body>
   <table>
       <thead>
           <tr><th> </th><th>姓名</th><th>性別</th><th>暫住地</th></tr>
       </thead>
       <tbody>
           <tr><td><input type="radio" name="choice" value=""/></td>
               <td>張山</td><td>男</td><td>浙江寧波</td></tr>
           <tr><td><input type="radio" name="choice" value="" /></td>
               <td>李四</td><td>女</td><td>浙江杭州</td></tr>
           <tr><td><input type="radio" name="choice" value="" checked='checked' /></td>
               <td>王五</td><td>男</td><td>湖南長沙</td></tr>
           <tr><td><input type="radio" name="choice" value="" /></td>
               <td>找六</td><td>男</td><td>浙江溫州</td></tr>
           <tr><td><input type="radio" name="choice" value="" /></td>
               <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
           <tr><td><input type="radio" name="choice" value="" /></td>
               <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
       </tbody>
   </table>
</body>
</html>

posted @ 2013-03-20 11:23 楊軍威閱讀(172) | 評論 (0) | 編輯收藏

jquery表單，郵箱的驗證

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
       //如果是必填的，則加紅星標識.
       $("form :input.required").each(function(){
           var $required = $("<strong class='high'> *</strong>"); //創建元素
           $(this).parent().append($required); //然后將它追加到文檔中
       });
         //文本框失去焦點后
        $('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="formtips onError">'+errorMsg+'</span>');
                   }else{
                        var okMsg = '輸入正確.';
                        $parent.append('<span class="formtips onSuccess">'+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="formtips onError">'+errorMsg+'</span>');
               }else{
                      var okMsg = '輸入正確.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
               }
           }
       }).keyup(function(){
           $(this).triggerHandler("blur");
       }).focus(function(){
           $(this).triggerHandler("blur");
       });//end blur


       //提交，最終驗證。
       $('#send').click(function(){
               $("form :input.required").trigger('blur');
               var numError = $('form .onError').length;
               if(numError){
                   return false;
               }
               alert("注冊成功,密碼已發到你的郵箱,請查收.");
       });

       //重置
       $('#res').click(function(){
               $(".formtips").remove();
       });
})

</script>
</head>
<body>

<form method="post" action="">
   <div class="int">
       <label for="username">用戶名:</label>
       <input type="text" id="username" class="required" />
   </div>
   <div class="int">
       <label for="email">郵箱:</label>
       <input type="text" id="email" class="required" />
   </div>
   <div class="int">
       <label for="personinfo">個人資料:</label>
       <input type="text" id="personinfo" />
   </div>
   <div class="sub">
       <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
   </div>
</form>

</body>
</html>

posted @ 2013-03-20 11:18 楊軍威閱讀(390) | 評論 (0) | 編輯收藏

下拉框左右選擇，得到值

<html>
<head>
<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 src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(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(){ //綁定雙擊事件
       //獲取全部的選項,刪除并追加給對方
       $("option:selected",this).appendTo('#select2'); //追加給對方
   });
   //雙擊選項
   $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
   });
   $('#findall').click(function(){
       var len=   $('#select2 option').length;

       for(var i=0;i<len;i++){

           //$('#select2').get(i).value;
           alert($('#select2 option')[i].value);
       }
   });
});
</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>
           <span id="findall"><<選中的所有值</span>
       </div>
   </div>

</body>
</html>

posted @ 2013-03-20 11:07 楊軍威閱讀(166) | 評論 (0) | 編輯收藏

文件的下載

               File f = new File("c://a.txt");
                   BufferedInputStream bis =new BufferedInputStream(new FileInputStream(f));
                   byte[] buffer = new byte[1024];
                   response.setContentType("application/octet-stream");
                   //定義下載文件的名字
                   String a = new String(z.getZiname().getBytes("utf-8"),"iso8859-1");

                   response.setHeader("Content-Disposition", "attachment; filename=\"" + a+"c://a.txt".substring("c://a.txt".lastIndexOf(".")) + "\"");
                    OutputStream os = response.getOutputStream();
                   int len = -1;
                   while((len=bis.read(buffer))!=-1){
                       os.write(buffer, 0, len);
                   }
                   os.flush();
                   os.close();
                   bis.close();

posted @ 2013-03-20 10:32 楊軍威閱讀(149) | 評論 (0) | 編輯收藏

復選框的全選

復選框按鈕
<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
     //全選
     $("#CheckedAll").click(function(){
         $('[name=items]:checkbox').attr('checked', true);
   });
   //全不選
     $("#CheckedNo").click(function(){
        $('[type=checkbox]:checkbox').attr('checked', false);
   });
   //反選
     $("#CheckedRev").click(function(){
          $('[name=items]:checkbox').each(function(){
           //此處用JQ寫法頗顯啰嗦。體現不出JQ飄逸的感覺。
           //$(this).attr("checked", !$(this).attr("checked"));

           //直接使用JS原生代碼，簡單實用
           this.checked=!this.checked;
          });
   });
   //輸出值
   $("#send").click(function(){
       var str="你選中的是：\r\n";
       $('[name=items]:checkbox:checked').each(function(){
           str+=$(this).val()+"\r\n";
       })
       alert(str);
   });
})

</script>
</head>
<body>
<form method="post" action="">
   你愛好的運動是？
   <br/>
    <input type="checkbox" name="items" value="足球"/>足球
   <input type="checkbox" name="items" value="籃球"/>籃球
   <input type="checkbox" name="items" value="羽毛球"/>羽毛球
   <input type="checkbox" name="items" value="乒乓球"/>乒乓球
   <br/>
    <input type="button" id="CheckedAll" value="全　選"/>
    <input type="button" id="CheckedNo" value="全不選"/>
    <input type="button" id="CheckedRev" value="反　選"/>

   <input type="button" id="send" value="提　交"/>
</form>
</body>
</html>
復選框

<html>
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
     //全選
     $("#CheckedAll").click(function(){
           if(this.checked){               //如果當前點擊的多選框被選中
               $('input[type=checkbox][name=items]').attr("checked", true );
           }else{
                 $('input[type=checkbox][name=items]').attr("checked", false );
           }
   });
   $('input[type=checkbox][name=items]').click(function(){
               var flag=true;
               $('input[type=checkbox][name=items]').each(function(){
                   if(!this.checked){
                       flag = false;
                   }
               });

               if( flag ){
                   $('#CheckedAll').attr('checked', true );
               }else{
                   $('#CheckedAll').attr('checked', false );
               }
   });
      //輸出值
   $("#send").click(function(){
       var str="你選中的是：\r\n";
       $('input[type=checkbox][name=items]:checked').each(function(){
           str+=$(this).val()+"\r\n";
       })
       alert(str);
   });
})
</script>
</head>
<body>

<form>
   你愛好的運動是？<input type="checkbox" id="CheckedAll" />全選/全不選<br/>
    <input type="checkbox" name="items" value="足球"/>足球
   <input type="checkbox" name="items" value="籃球"/>籃球
   <input type="checkbox" name="items" value="羽毛球"/>羽毛球
   <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
   <input type="button" id="send" value="提　交"/>
</form>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
     //全選
     $("#CheckedAll").click(function(){
           //所有checkbox跟著全選的checkbox走。
           $('[name=items]:checkbox').attr("checked", this.checked );
   });
   $('[name=items]:checkbox').click(function(){
               //定義一個臨時變量，避免重復使用同一個選擇器選擇頁面中的元素，提升程序效率。
               var $tmp=$('[name=items]:checkbox');
               //用filter方法篩選出選中的復選框。并直接給CheckedAll賦值。
               $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

           /*
               //一行做過多的事情需要寫更多注釋。復雜選擇器還可能影響效率。因此不推薦如下寫法。
               $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
           */
   });
      //輸出值
   $("#send").click(function(){
       var str="你選中的是：\r\n";
       $('[name=items]:checkbox:checked').each(function(){
           str+=$(this).val()+"\r\n";
       })
       alert(str);
   });
});
</script>
</head>
<body>

<form method="post" action="">
   你愛好的運動是？<input type="checkbox" id="CheckedAll" />全選/全不選<br/>
    <input type="checkbox" name="items" value="足球"/>足球
   <input type="checkbox" name="items" value="籃球"/>籃球
   <input type="checkbox" name="items" value="羽毛球"/>羽毛球
   <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
   <input type="button" id="send" value="提　交"/>
</form>

</body>
</html>

posted @ 2013-03-20 09:58 楊軍威閱讀(209) | 評論 (0) | 編輯收藏

java學習

jquery選項卡

jquery控制字體大小

jquery表格內容過濾

jquery的表格伸縮顯示隱藏

jquery的表格的隔行換色和多選行

jquery的表格的隔行換色和單選某行

jquery表單，郵箱的驗證

下拉框左右選擇，得到值

文件的下載

復選框的全選

導航

統計

常用鏈接

留言簿

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜