jQuery课堂笔记！

jQuery 是一个 JavaScript 库。

• jQuery语法

1. $("p").hide(）  -隐藏所有 <p> 标签
   
2. $(".test").hide()  -隐藏所有 class="test" 的元素
3. $("#test").hide()  - 隐藏所有 id="test" 的元素
4. $(document).ready(function(){ }   -为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

 

• jQuery事件

1. $("button").click(function() {} )   -点击button隐藏事件

• $("#hide").click(function(){                
      $("p").hide();
  });

1. $("button").dblclick(function() {} )   -双击事件
2. $(selector).focus(function)  -聚焦事件（只能在表单中用）
3. $(selector).blur(function)   -失焦事件
4. $(selector).mouseover(function)   -鼠标悬停事件

• 通过 jQuery，使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

1. HTML
   <p>我会消失</p>
   <button id="hide" type="button">隐藏</button>
   <button id="show" type="button">显示</button>
   
   jQuery。js
   //隐藏
   $("#hide").click(function(){
       $("p").hide();
   });
   //显示
   $("#show").click(function(){
       $("p").show();
   });　　

• 通过 jQuery，可以实现元素的淡入淡出效果。

1. <!--淡入-->
   <div id="div1" style="width:80px; height:80px; display:none; background:aqua;">1</div>
   <div id="div2" style="width:80px; height:80px; display:none; background:orchid;">2</div>
   <div id="div3" style="width:80px; height:80px; display:none; background:salmon;">3</div>
           
   <!--淡出-->
   <div id="div1" style="width:80px; height:80px; background:aqua;">1</div>
   <div id="div2" style="width:80px; height:80px; background:orchid;">2</div>
   <div id="div3" style="width:80px; height:80px; background:salmon;">3</div>
   
   //淡入
   $("button").click(function(){  //点击按钮
       $("#div1").fadeIn();  //淡入div1；
       $("#div2").fadeIn("slow");  //缓慢的淡入div2；
       $("#div3").fadeIn(4000);  //4秒以后淡入；
   });
   
   //淡出
   $("button").click(function(){  //点击按钮
       $("#div1").fadeOut();  //淡出div1；
       $("#div2").fadeOut("slow");  //缓慢的淡出div2；
       $("#div3").fadeOut(4000);  //4秒以后淡出；
   });

• jQuery 滑动方法可使元素上下滑动

1. //向下滑动
   $(".our").click(function(){
       $(".pass").slideDown("show");
   });
   //向上滑动
   $(".our").click(function(){
       $(".pass").slideUp("slow");
   });

• jQuery animate() 方法创建自定义的动画

1. ("button").click(function(){
       $("div").animate({
           left:'250px',
           opacity:'0.5',
           height:'150px',
           width:'150px'
       });
   })                

   //动画3 列队
   $("button").click(function(){
       var div = $("div");
       div.animate({height:'300px', opacity:'0.4'},"slow");
       div.animate({width:'300px', opacity:'0.8'},"slow");
       div.animate({height:'100px', opacity:'0.4'},"slow");
       div.animate({width:'100px', opacity:'0.8'},"slow");
   });

    

• jQuery stop() 方法用于停止动画或效果

1. $("#stop").click(function(){
     $("#panel").stop();
   });