<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();              })toggletoggle（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 右：3Bind 是增加/邦定事件，unbind就是解除，有两个参数，一个是事件名，一个是函数名，如果不指定，则解除所以已邦定的事件。One和bind一样，但是只执行一次，则结束。Show 方法可以使出了“none”以外的为“block”,“inline”或其他的值显示。可以带参数，就是可以根据其指定的时间显示，或者隐藏。Show(X) x=slow :600  x=nomal:400  x=fast :200X,也可以直接为数据：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="http://www.mamicode.com/#">more</a></em></div><div id="v_content">    <div class="v_content_list">    <ul>    <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/common/images/logo.gif"/></a>    <h4><a href="http://www.mamicode.com/#">AAAAA</a></h4><span>play:<em>23,232</em></span>    </li>    <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/common/images/logo.gif"/></a>    <h4><a href="http://www.mamicode.com/#">BBBB</a></h4><span>play:<em>23,232</em></span>    </li>    <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/common/images/logo.gif"/></a>    <h4><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/sport1"/>sport1<input type="checkbox" name="items" value="http://www.mamicode.com/sport2"/>sport2<input type="checkbox" name="items" value="http://www.mamicode.com/sport3"/>sport3      <input type="button" id="CheckedAll" value="http://www.mamicode.com/all"/>all      <input type="button" id="CheckedRev" value="http://www.mamicode.com/rev"/>Rev      <input type="button" id="send" value="http://www.mamicode.com/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="http://www.mamicode.com/1">select 1</option>      <option value="http://www.mamicode.com/2">select 2</option>      <option value="http://www.mamicode.com/3">select 3</option>      <option value="http://www.mamicode.com/4">select 4</option>      <option value="http://www.mamicode.com/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();      })})这里可以实现，表格的隐藏与显示，当触发事件的时候。