jQuery心得4--jQuery案例剖析2-開發實用案例

y_keven發表於2013-03-19

1.窗體執行就載入函式的dom寫法與jQuery的區別與jQuery的三種寫法


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <title>demo1.html</title>

   

   <!-- 引入jQuery的庫 -->

   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

    <script type="text/javascript">

    

    

/*     第一種寫法:第二種winod.onload會覆蓋第一種

      window.onload = function(){

         alert("one");

      };

      window.onload = function(){

         alert("two");

      }; */

    

    

/*    第二種寫法:同樣後面的也會覆蓋前面的

    var one=function one(){

       alert("one");

    };

    var two=function one(){

       alert("two");

    };

    window.onload = one;

    window.onload = two; */

    

    

    //下面三種jQuery的寫法,可以同時載入觸發事件

     /*  //第一種:

      $(function(){

          alert("one");

      });

      $(function(){

          alert("two");

      });

      

      //第二種:

      $(document).ready(function(){

          alert("hello one");

      });

      $(document).ready(function(){

          alert("hello two");

      });

       */

      //第三種:

      $().ready(function(){

          alert("hello one");

      });

      $().ready(function(){

          alert("hello two");

      });

      

    </script>

  </head>

   

  <body>

    <div>

      

    </div>

  </body>

</html>

 

2.仿各大網站的註冊外掛之jquery編寫的條款多選框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <title>demo2.html</title>

   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

    <script type="text/javascript">

    

    $(document).ready(function(){  //當窗體載入完畢觸發匿名函式

       

       //id選擇器

       var $submitBtn = $("#submitBtn");

       

      /*  //為按鈕註冊點選事件

       $submitBtn.click(function(){

          alert("點選");

       }); */

       

      /*  //通過jQuery物件與dom物件相互轉換完成操作

       //為按鈕繫結點選事件;第一個引數是繫結事件的型別,第二個引數是觸發的函式

       $submitBtn.bind("click",function(){

          var $ckb = $("#agreeckb");  //獲取checkbox的元素物件

          //把jQuery物件轉換成dom物件

          var ckbDom = $ckb[0];  //通過陣列下表獲取,還有一種通過get(index);

          

          if(ckbDom.checked){

            alert("同意註冊");

          }else{

            alert("請選擇同意條款");        

          }

       }); */

       

       

       //直接通過jQuery物件的操作實現操作

        $submitBtn.click(function(){

         var $ckb = $("#agreeckb");

         //:checked 是表單過濾器必須這樣寫!

         if($ckb.is(":checked")){

            alert("同意註冊");

          }else{

            alert("請選擇同意條款");        

          }

       });

    });

    </script>

  </head>

  

  <body>

    註冊條款:<input type="checkbox" id="agreeckb"/>我已仔細閱讀並接受註冊條款

   <input type="button" value="註冊" id="submitBtn"/>

  </body>

</html>

 

3.Jquery的左右移動

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>demo3.html</title>

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<script type="text/javascript">

   $(document).ready(function() {

 

      //獲取按鈕的元素物件

      var $lromve = $("#lromve");

      var $lromves = $("#lromves");

 

      //右移操作

      //繫結click事件,選中的右移

      $lromve.bind("click", function() {

         //選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合

         var $opts = $("#lopt>option:selected");

         //在id=ropt的的select中新增option物件集合

         $("#ropt").append($opts);

 

      });

      //繫結click事件;全部右移

      $lromves.bind("click", function() {

         var $opts = $("#lopt>option");

         $("#ropt").append($opts);

      });

        //雙擊的右移操作

      $("#lopt").bind("dblclick", function() {

         //選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合

         var $opts = $("#lopt>option:selected");

         //在id=ropt的的select中新增option物件集合

         $("#ropt").append($opts);

 

      });

      

      

       

      //左移操作

      //獲取按鈕的元素物件

      var $rromve = $("#rromve");

      var $rromves = $("#rromves");

      //繫結click事件

      $rromve.bind("click", function() {

         //選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合

         var $opts = $("#ropt>option:selected");

         //alert($opts.text);

         //在id=ropt的的select中新增option物件集合

         $("#lopt").append($opts);

 

      });

      //繫結click事件

      $rromves.bind("click", function() {

         var $opts = $("#ropt>option");

         $("#lopt").append($opts);

      });

      //雙擊的左移操作

      $("#ropt").bind("dblclick", function() {

         //選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合

         var $opts = $("#ropt>option:selected");

         //在id=ropt的的select中新增option物件集合

         $("#lopt").append($opts);

 

      });

   });

</script>

</head>

 

<body>

<div>

   <div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;">

 

      <select id="lopt" multiple="multiple" size="9" style="width:80px;">

         <option>選項1</option>

         <option>選項2</option>

         <option>選項3</option>

         <option>選項4</option>

         <option>選項5</option>

         <option>選項6</option>

         <option>選項7</option>

         <option>選項8</option>

         <option>選項9</option>

      </select><br><br><input type="button" id="lromves" value="全部右移"

         style="width: 80px;" /><input type="button" id="lromve"

         value="選中的右移" style="width: 80px;" />

 

   </div>

   <div style="width: 200px; height: 300px; background-color: red; text-align: center;">

      <select id="ropt" multiple="multiple" size="9" style="width: 80px;">

      </select><br><br><input type="button" id="rromves" value="全部左移"

         style="width: 80px;" /><input type="button" id="rromve"

         value="選中的左移" style="width: 80px;" />

   </div>

   </div>

</body>

</html>

 

4.jquery的多選反選和全不選

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>demo4.html</title>

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<script type="text/javascript">

   $(document).ready(function() {

 

      //全選

      $("#ckbAll").click(function() {

          $("input[name='fav']").each(function() {

            this.checked = true; //dom物件寫法

         }); 

         //$("input[name='fav']").attr("checked", true);  //jQuery物件寫法,有bug,點選兩回之後就不起作用了

      }); 

 

      //選不選

      $("#ckbNo").click(function() {

         $("input[name='fav']").attr("checked", false);

 

      });

 

      //反選

      $("#ckbRec").click(function() {

         $("input[name='fav']").each(function() {

            //$(this).attr("checked", !$(this).attr("checked"));   //jQuery物件的寫法

            this.checked = !this.checked; //dom物件寫法

         });

      });

   });

</script>

</head>

 

<body>

   <div>

      <input type="checkbox" name="fav" value="看書1" />看書1 <input

         type="checkbox" name="fav" value="看書2" />看書2 <input type="checkbox"

         name="fav" value="看書3" />看書3 <input type="checkbox" name="fav"

         value="看書4" />看書4 <input type="checkbox" name="fav" value="看書5" />看書5

   </div>

   <div>

      <input type="button" value="全選" id="ckbAll"/>

      <input type="button" value="全不選" id="ckbNo" />

       <input type="button" value="反選" id="ckbRec" />

   </div>

</body>

</html>

 

5.仿各大網站的註冊移走游標變色操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <title>demo5.html</title>

   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

<script type="text/javascript">

   $(document).ready(function() {

 

      /*  $("input").bind("blur",function(){

       }); */   

        

        //:input獲取的是所有input標籤中的各種型別的元素物件,以及textarea、select等多種標籤;input只獲取前者,即input標籤所屬的屬性

       $(":input").blur(function(){

          $(this).each(function(){

             //if(""==this.value.trim()){

             if(""==$(this).val().trim()){             

                $(this).addClass("blur"); 

             }else{

                $(this).removeClass("blur");

             }

          });

       });    

   });

</script>

 

<style type="text/css">

.blur{

  border:1px solid red;

}

</style>

  </head>

  

  <body>

    <form action="">

              使用者名稱:<input type="text" name="ubane"/><br><br>

          密    碼:<input type="password" name="ubane"/><br><br>

          郵    箱:<input type="text" name="ubane"/><br><br>

          個人介紹:<textarea rows="10" cols="30"></textarea>

    </form>

  </body>

</html>

 

6.tbody交替變色操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <title>demo2.html</title>

   

   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

   <script type="text/javascript">

     

     //當文件載入完畢觸發匿名函式

     $(document).ready(function(){

    //有點區別,研究一下

      $("tbody tr:even").css("background-color","blue");

      $("tbody>tr:nth-child(even)").css("background-color","yellow");

      $("tbody>tr:nth-child(odd)").css("background-color","red");  //會替換紅顏色

     });

   </script>

  </head>

  

  <body>

    <table border="1" bordercolor="teal">

      <thead>

        <th>序號</th>

        <th>姓名</th>

        <th>性別</th>

        <th>職位</th>

      </thead>

        <tbody>

          <tr id="row1" bgcolor="red" title="aa">

          <td>1</td>

          <td>redarmy</td>

          <td>M</td>

          <td>殭屍</td>

          </tr>

          <tr id="row2">

          <td>2</td>

          <td>kai</td>

          <td>M</td>

          <td>牛掰</td>

          </tr>

          <tr id="row3">

          <td>3</td>

          <td>redarmy2</td>

          <td>M</td>

          <td>殭屍</td>

          </tr>

          <tr id="row4">

          <td>4</td>

          <td>redarmy3</td>

          <td>M</td>

          <td>殭屍</td>

          </tr>

          <tr>

          <td>5</td>

          <td>redarmy4</td>

          <td>M</td>

          <td>殭屍</td>

          </tr>

        </tbody>

    </table>

 

  </body>

</html>

    


 

相關文章