JQuery 参考例子

<div id="panel">

    <h5 class="head">what is jquery?</h5>

    <div class="content">

    adsfaskdfjaslfdaflsadf

    </div>

</div>

简单鼠标操作（1）：

$(document).ready(function(){

           $("#panel h5.head").mouseover(function(){

                 $(this).next("div.content").hide();

                 })

                   .mouseout(function(){

                     $(this).next("div.content").show();

                   })

})

（2）当鼠标在其上时触发第一个FUN，移开触发第二个

$("#panel h5.head").hover(function(){

                 $(this).next("div.content").hide();

                 },function(){

                     $(this).next("div.content").show();

              })

toggle

toggle

（3）在两者之间切换

      $("#panel h5.head").bind("click",function(){

                 var $content=$(this).next("div.content");

                 if($content.is(":visible")){

                      $content.hide();

                 }else{

                      $content.show();

                   }

       })

 

JQUERY初始化，以checkbox为例

var kcljdms = $(‘#kcljdms‘).val().split(‘,‘); // 处理复选框选择

         var checkboxArray = $(‘:checkbox‘);

         if(kcljdms!=null && kcljdms!=‘‘){ // Boolean(kcljdms)

               for(key in kcljdms){

                      $.each(checkboxArray,function(index,value){ // value or jquery object

                                  if(kcljdms[key] == $(value).val()){ // $(this).val() == $(value).val()

                                       $(this).attr(‘checked‘,true);

                                  }

                      });

                 }

          }

可以为某元素添加事件

<div id="content">

out div 1

<span>in div</span>

out div 2

</div>

<div id="msg"></div>

$(document).ready(function(){

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

           var txt = $(‘#msg‘).html()+"<p>in span onclick</p>";

           $("#msg").html(txt);

      })

})//这里使用其，实现为ID为msg的增加内容。

$("#sub").bind("click",function(){

      alert(event.type);

           var txt = $(‘#username‘).val();

           if(txt==‘‘){

           $("#msg").html("the username is require");

           event.preventDefault();

           }

      })

event.preventDefault();

这里阻止默认事件在Username为空的时候仍然执行，

event.stopPropagation();阻止帽泡事件，也可以Return false;

$("body").mousedown(function(e){

      alert(e.which);

})//当点击页面时，左：1，中：2 右：3

Bind 是增加/邦定事件，unbind就是解除，有两个参数，一个是事件名，一个是函数名，如果不指定，则解除所以已邦定的事件。

One和bind一样，但是只执行一次，则结束。

Show 方法可以使出了“none”以外的为“block”,“inline”或其他的值显示。

可以带参数，就是可以根据其指定的时间显示，或者隐藏。

Show(X) x=slow :600  x=nomal:400  x=fast :200

X,也可以直接为数据：1000

$("#panel h5.head").toggle(function(){

                 var $content=$(this).next("div.content");

                 if($content.is(":visible")){

                      $content.hide(600);

                 }else{

                      $content.show(600);

                   }

            })

之前的代码，稍改一下后，可以实现动态效果。

if($content.is(":visible")){

                      $content.fadeOut(2000);

                 }else{

                      $content.fadeIn(2000);

                   }

这里可以实现透明度由深入浅，直到消失不见的效果。fadeTo则可以设置透明到什么程度，fadeTo(600,0.2).

if($content.is(":visible")){

                 $content.slideUp(2000);

            }else{

                 $content.slideDown(600);

              }

这里则实现从下到上，或从上到下的动态显示效果。

$(document).ready(function(){

    var page = 1;

    var i= 4;

    $("span.next").click(function(){

           var $parent=$(this).parent("div.v_show");

           var $v_show =$parent.find("div.v_content_list");

           var $v_content =$parent.find("div.v_content");

          

           var v_width = $v_content.width();

           var len = $v_show.find("li").length;

           var page_count = Math.ceil(len/i);

          

           if(!$v_show.is(":animated")){

              if( page == page_count){

                  $v_show.animate({left:‘0px‘},"slow");

                  page = 1;

              }else{

                  $v_show.animate({left:‘-=‘+v_width},"slow");

                  page++;

              }

          

           }

           $parent.find("span").eq((page-1)).addClass("current")

           .siblings().removeClass("current");

        })

})

<div id="v_show">

    <div class="v_caption">

    <h2 class="cartoon" title="what is jquery?">what is jquery?</h2>

    <div class="highlight_tip">

    <span class="current">1</span>

    <span >2</span>

    <span >3</span>

    <span >4</span>

    </div>

      <div class="change_btn">

    <span class="prev">prev page</span>

    <span class="next">next page</span>

    </div>

    <em><a href="#">more</a></em>

</div>

<div id="v_content">

    <div class="v_content_list">

    <ul>

    <li><a href="#"><img src="common/images/logo.gif"/></a>

    <h4><a href="#">AAAAA</a></h4><span>play:<em>23,232</em></span>

    </li>

    <li><a href="#"><img src="common/images/logo.gif"/></a>

    <h4><a href="#">BBBB</a></h4><span>play:<em>23,232</em></span>

    </li>

    <li><a href="#"><img src="common/images/logo.gif"/></a>

    <h4><a href="#">CCCC</a></h4><span>play:<em>23,232</em></span>

    </li>

    </ul>

   </div>

</div>

</div>

 

<div class="msg">

      <div>

      <input type="button" class="bigger">add</input>

      <input type="button" class="smaller">less</input>

      </div>

      <div>

      <textarea id="comment" cols="20" rows="8">

      afdckdsfasdfklds

      </textarea>

      </div>

</div>

$(document).ready(function(){

      var $comment = $(‘#comment‘);

      $(‘.bigger‘).click(function(){

           if($comment.height()<50){

                 $comment.animate({height:"+=50"},400);

           }

      })

      $(‘.smaller‘).click(function(){

           if($comment.height()>50){

                 $comment.animate({height:"-=50"},400);

           }

      })

})

可以ADD，LESS动态增加/减少宽度

将height改为scrollTop ,则可以改变流动条的长度。

$(document).ready(function(){

      $(‘#CheckedRev‘).click(function(){

           $(‘[name=items]:checkbox‘).each(function(){

                 $(this).attr("checked",!$(this).attr("checked"));

           })

      })

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

           $(‘[name=items]:checkbox‘).attr("checked",true);

      })

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

      var str ="your chose:\r\n";

           $(‘[name=items]:checkbox:checked‘).each(function(){

                 str +=$(this).val()+"\r\n";

           })

           alert(str);

      })

})

<form>

      <input type="checkbox" name="items" value="sport1"/>sport1

<input type="checkbox" name="items" value="sport2"/>sport2

<input type="checkbox" name="items" value="sport3"/>sport3

      <input type="button" id="CheckedAll" value="all"/>all

      <input type="button" id="CheckedRev" value="rev"/>Rev

      <input type="button" id="send" value="send"/>

</form>

可以全选或反选，当点击SEND时，可以弹出已选的值。

$(document).ready(function(){

      $(‘#add‘).click(function(){

           var $options =$(‘#select1 option:selected‘);

           $options.appendTo(‘#select2‘);

      })

      $(‘#add_all‘).click(function(){

           var $options =$(‘#select1 option:selected‘);

           $options.appendTo(‘#select2‘);

      })

      $(‘#select1‘).dbclick(function(){

           var $options =$(‘#select1 option:selected‘);

           $options.appendTo(‘#select2‘);

      })

     

})

 

<div class="centent">

      <select multiple="multiple" id="select1" style="width:100px;height:160px;">

      <option value="1">select 1</option>

      <option value="2">select 2</option>

      <option value="3">select 3</option>

      <option value="4">select 4</option>

      <option value="5">select 5</option>

      </select>

      <div>

           <span id="add">into right &gt;&gt;</span>

           <span id="add_all">all into right &gt;&gt;</span>

      </div>

</div>

<div class="centent">

      <select multiple="multiple" id="select2" style="width:100px;height:160px;">

      </select>

      <div>

           <span id="remove"> &gt;&gt;right into left</span>

           <span id="remove_all">&gt;&gt;all right into left</span>

      </div>

</div>

可以将两边的Select选中值相互添加，同时还设置了双击实现。

      $("tr:odd").css({

      background:"#FFF38F"

      });

      $("tr:even").css({

      background:"#FFFFEE"

      });

从0开始计算，奇偶变色。

<TABLE>

      <thead>

           <tr><th>name</th><th>sex</th></tr>

      </thead>

      <TBODY>

                 <tr class="parent" id="row_01"><td colspan="2">row_1</td>

                 </tr>

                 <tr class="child_row_01">

                 <td>zhang</td>

                 <TD>f</TD>

                 </tr>

                 <tr class="child_row_01">

                 <td>zhang</td>

                 <TD>f</TD>

                 </tr>

                 <tr class="child_row_01">

                 <td>zhang</td>

                 <TD>f</TD>

                 </tr>

                 <tr class="parent" id="row_02"><td colspan="2">row_2</td>

                 </tr>

                 <tr class="child_row_02">

                 <td>xiang</td>

                 <TD>f</TD>

                 </tr>

                 <tr class="child_row_02">

                 <td>xiang</td>

                 <TD>f</TD>

                 </tr>

                 <tr class="child_row_02">

                 <td>xiang</td>

                 <TD>f</TD>

                 </tr>

      </TBODY>

     

</TABLE>

$(document).ready(function(){

      $("tr:parent").click(function(){

           $(this)

           .toggleClass("selected")

           .siblings(‘.child_‘+this.id).toggle();

      })

})

这里可以实现，表格的隐藏与显示，当触发事件的时候。