jquery的基础学习

$("input :eq(7)").click(function(){  var offset=$("p").offset(); var left=offset.left; var top=offset.top});

实现文字的提示：

1）

 $(function(){

$("a.tooltip).mouseover(function(e){

var tooltip="<div id='tooltip'>+this.title+<\/div>";

$('body").append(tooltip);

$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px"}).show("fast");

}).mouseout(functin(){

$("#tooltip").remove();

});

});

$(function(){

var x=10;

var y=20;

$("a.tooltop”).mouserover(function(e){  this.title="";  var tooltop="<div id='tooltip'>"+this.myTitle+"<\/div>"; $("body").append(tooltip);  $(#tooltip").css({"top":(e.pageY+y)+"px,  "left":(e.pageX+x)+"px"}).show("fast");}).mouser(function(){this.title=this.myTitle; $("#tooltip"),remove();}).mousemove(function(e){

$("#tooltip").css({"top":(e.pageY+y)+"px",”left“:(e.pageX+x)+"px"});

});

})

})

2)绑定事件：

1)if($content.is(":visible")){ $content.hide(); }else{ $content.show() }

2) $("#panel h5.head").bind("mouseover",function(){  $(this).next().show();}); $("#panel h5.head").bind("mouseout",function(){  $(this).next().hide();}));       

3合成事件：

$("#panel  h5.head").hover(function(){      $(this).next().show();},function(){ $(this).next().hide();});

$("#pane 5.head").toggle(function(){$(this).next().show()}.function(){ $(this).next().hide();});

$(“#panel h5.head”).toggle(function(){$(this).next().toggle();},function(){$(this).next().toggle();})

事件对象的属性：

$(function(){
$("a").mousedown(function(e){
alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
   return false;//阻止链接跳转
})
})

 <script>
$(function(){
$("input").keyup(function(e){
alert(e.metaKey +" "+e.ctrlKey );
$(this).blur();
})
})
  </script>

<script type="text/javascript">
$(function(){
  $('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
 }).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
 }).bind("click", function(){
  $('#test').append("<p>我的绑定函数3</p>");
     });
  $('#delAll').click(function(){
 $('#btn').unbind("click");
  });
})
</script>

<script type="text/javascript">

$(function(){

$('#btn').bind("click",myFun1=function(){$('#test').append(“<p>我的绑定函数1</p>”)}).bind("click",myFun2=function(){

$('#test').append("<p>我的绑定事件</p>");

}).bind("click",myFun3=function(){

$('#test').append("<p> 我的绑定函数3</p>");

})

$('#delTwo').click(function (){

$('#btn').unblind("click",myFun2);

});

})

</script>

事件冒泡：

$(function（）{

$('#btn').bind("myClick",function(){

  $('test').append("<p> 我的自定义事件.</p>");

});

$('#btn').click(function(){

$(this).trigger("myclick");

}).trigger("myClick");

});

<script  type="text/javascript">

$(function(){

$('#old').bind("click",function(){

$("input").trigger("focus");

})

$('#new').bind('click",function(){

$('input").triggerHandler("focus");

});

$("input").focus(function(){

$("body").append("<p> focus.</p>");

})

})

</script>

相同事件名称，不同命名空间执行方法：

$("div").bind（“click”,function(){

$("body").append("<p> click事件</p>");

}）

$("div").bind("click.plugin",functin(){

$("body").append("<p>click.plugin事件</p>");

});

$("button").click(function(){

$('div").trigger("click");

});

fade:

$(function(){

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

$(this).next().fadeOut();

}),function(){

$(this).next().fadeIn();

}

})

slide:

$(function(){

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

$(this).next().slideUp();

}),function(){

$(this).next().slideDown();

}

})

综合动画：

$(function(){

$("#panel").css("opacity","0.5");

$("#panel").click(funciton(){

$(this).animate({left:"400px",heght:"200px",opacity:"1",3000}).animate({

top:"200px",width:"200px",3000}).fadeOut("slow");

   })

});

$(function(){

$(“#panel”).hover(function(){

$(this).stop().animate({height:"150",width:"300",200});

},function(){

$(this).stop().animate({height:"22",width:"60"}.300);

});

})

动画事件的例子：

$(function(){

var page=1;

var i=4;

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

var $parent=$(this).parents("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.anminated({left:""},"show");

                          page=1;        

          }else

             {

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

                                        page++;

               }

      

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

}

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

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

{

             if(page==1)

                {

                         $v_show.animated{left:"-="+$v_width*(pagecount-1)},"slow");

                          page=pagecount;

                 }else

                  {

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

                      }

                     $parents.find("span").eq(page-1).addClass("current").siblings().removeClass("current");

}

});

})

}

)

<script  type="text/javascript">

$(function(){

var $comment=$('comment');

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

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

            $comment.height($comment.height()+50);

               }

    })

$('.smaller').click({

                  if($comment.height()>50)

                            {             

                                                    $comment.height($comment.heigh()-50);

                             }

         })

})

</script>

$(function(){

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

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

                if($comment.height()<500)

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

          })

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

            if(!$comment.is(":animaged"))

            {

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

              }

    })

})

复选框全选反选：

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

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

          this.checked=!this.checked;

         });

});

全不选：

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

            $('[type=checkbox]:checkbox').attr('checked',false); 

});

下拉框的左右选择：

$(function(){

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

     $('#select1 option:selected').appendTo('#select2');

})

$(#remove').click(function(){

$('selected2 option:selectend').appendTo('#select1');

});

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

$('#select1 option').appentTo('#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');

          

            });

})

表格内容过滤：

$(function(){

$("table tbody tr").hide().filter(":contaions(李)").show();

})

$("#id").keyup(function(){

$(''table tbody tr").hide().filter(":contaion'"+($(this).val())+"'").show();

});

控制字体的大小：

$(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")

{

   textFontSize+=2;

}else if(cName=="smaller")

 {

         textFontSize-=2;

   }

   $("#pata").css("font-size",textFontSize+unit);

})

});