JQuery

  • 特点
    所有jQuery函数位于一个document ready函数中。
1
2
3
4
5
6
7
$(document).ready(function(){
 // 开始写 jQuery 代码...
});
或
$(function(){
 // 开始写 jQuery 代码...
});
  • 选择器

1.元素选择器

1
2
3
基于元素名选取元素。
如：在页面中选取所有 <p> 元素:
$("p")

2.#id选择器

1
2
3
4
通过HTML元素的id属性选取指定的元素。
$(document).ready(function(){
  $("#test").hide();
});

3.class选择器

1
2
3
4
可以通过指定的 class 查找元素。
$(document).ready(function(){
  $(".test").hide();
});
  • jquery事件

1.click()

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

2.dblclick()

1
2
3
4
当双击元素时，会发生dblclick事件。
$("p").dblclick(function(){
  $(this).hide();
});

3.mouseenter()

1
2
3
4
当鼠标指针穿过元素时，会发生mouseenter事件。
$("#p1").mouseenter(function(){
  alert('您的鼠标移到了 id="p1" 的元素上!');
});

4.mouseleave()

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

5.mousedown()

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

6.mouseup()

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

7.hover()

1
2
3
4
5
6
7
8
9
10
用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
  function(){
      alert("你进入了p1!");
  },
  function(){
      alert("拜拜!现在你离开了p1!");
  }
);
  • jquery的隐藏和显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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

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

2.fadeOut()

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

3.fadeToggle()

1
2
3
4
5
6
7
8
9
10
可以在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()

1
2
3
4
5
6
7
8
9
$(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()

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

2.slideUp()

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

3.slideToggle()

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