第21天,jquery事件，选择器，滑动，淡入淡出

准备之前学过的ｇｉｔ命令，ｖｉｍ命令，ｊｓ，ｎｏｄｅ　ｊｓ，练习ｓｏｃｋｅｔ聊天室，轮播图准备考试。

• jquery
  特点 所有jQuery函数位于一个document ready函数中。
  • $(document).ready(function(){
    // 开始写 jQuery 代码…
    });
    或
  • $(function(){
    // 开始写 jQuery 代码…
    });
    选择器

1. 元素选择器

   基于元素名选取元素。
   如：在页面中选取所有

   元素:
   $(“p”)

2. id选择器

   通过HTML元素的id属性选取指定的元素。
   $(document).ready(function(){
   $(“#test”).hide();
   });

3. class选择器

   可以通过指定的 class 查找元素。
   $(document).ready(function(){
   $(“.test”).hide();
   });

• jquery事件

1. click()

   当按钮点击事件被触发时会调用一个函数。
   $(“p”).click(function(){
   $(this).hide();
   });

2. dblclick()

   当双击元素时，会发生dblclick事件。
   $(“p”).dblclick(function(){
   $(this).hide();
   });

3. mouseenter()

   当鼠标指针穿过元素时，会发生mouseenter事件。
   $(“#p1”).mouseenter(function(){
   alert(‘您的鼠标移到了 id=”p1” 的元素上!’);
   });

4. mouseleave()

   当鼠标指针离开元素时，会发生mouseleave事件。
   $(“#p1”).mouseleave(function(){
   alert(“再见，您的鼠标离开了该段落。”);
   });

5. mousedown()

   当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。
   $(“#p1”).mousedown(function(){
   alert(“鼠标在该段落上按下！”);
   });

6. mouseup()

   当在元素上松开鼠标按钮时，会发生mouseup事件。
   $(“#p1”).mouseup(function(){
   alert(“鼠标在段落上松开。”);
   });

7. hover()

   用于模拟光标悬停事件。
   当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
   $(“#p1”).hover(
   function(){

   alert("你进入了p1!");

   },
   function(){

   alert("拜拜!现在你离开了p1!");

   }
   );

• jquery的隐藏和显示
  $(selector).hide(speed,callback);
  $(selector).show(speed,callback);
  可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast”、”linear”或毫秒。
  可选的callback参数是方法完成后所执行的函数名称。
  $(document).ready(function(){
  $(“.hidebtn”).click(function(){

  $("div").hide(1000,"linear",function(){
    alert("Hide() 方法已完成!");
  });

  });
  });

  使用toggle()方法来切换hide()和show()方法。
  $(“button”).click(function(){
  $(“p”).toggle();
  });

• jquery的淡入淡出

  1. fadeIn

  淡淡地浮现出已隐藏的元素。
  $(selector).fadeIn(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是方法完成后所执行的函数名称。
  $(“button”).click(function(){
  $(“#div1”).fadeIn();
  $(“#div2”).fadeIn(“slow”);
  $(“#div3”).fadeIn(3000);
  });

  2. fadeOut()

  淡淡地隐藏显示的元素。
  $(selector).fadeOut(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是方法完成后所执行的函数名称。

  3. fadeToggle()

  可以在fadeIn()与fadeOut()方法之间进行切换。
  如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果。
  $(selector).fadeToggle(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是方法完成后所执行的函数名称。
  $(“button”).click(function(){
  $(“#div1”).fadeToggle();
  $(“#div2”).fadeToggle(“slow”);
  $(“#div3”).fadeToggle(3000);
  });

4. fadeTo()

   $(selector).fadeTo(speed,opacity,callback);
   必需的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
   fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。
   可选的callback参数是该函数完成后所执行的函数名称。
   $(“button”).click(function(){
   $(“#div1”).fadeTo(“slow”,0.15);
   $(“#div2”).fadeTo(“slow”,0.4);
   $(“#div3”).fadeTo(“slow”,0.7);
   });

• jquery的滑动

  1. slideDown()

  用于向下滑动元素。
  $(selector).slideDown(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是滑动完成后所执行的函数名称。
  $(“#flip”).click(function(){
  $(“#panel”).slideDown();
  });

  2. slideUp()

  用于向上滑动元素。
  $(selector).slideUp(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是滑动完成后所执行的函数名称。

  3. slideToggle()

  可以在slideDown()与slideUp()方法之间进行切换。
  如果元素向下滑动，则slideToggle()可向上滑动它们。如果元素向上滑动，则slideToggle()可向下滑动它们。
  $(selector).slideToggle(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
  可选的callback参数是滑动完成后所执行的函数名称。
  $(“#flip”).click(function(){
  $(“#panel”).slideToggle();
  });