JQuery之总结及示例代码

来源：互联网发布：notepad sql格式化编辑：程序博客网时间：2024/06/06 09:37

1.JQuery载入

$(document).ready(function(){
// 在这里写你的代码...
});

注: a. ready(fn)与window.load注册事件类似。所有得确保在 <body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

b.可以在同一个页面中多次使用$(document).ready()事件，将先后顺序依次执行。

2.toggle(fn,fn,......)函数

函数说明：

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。（在改变样式是很有用）

例: div1为<div id="div1" class="selected"></div>

$("#div1").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

3.hover(over,out)函数

函数说明：

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

例：

$("$div1").hover(

function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

4.blur(fn)函数

函数说明：

blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。

例：

$("#Text1").blur( function () { alert("Hello World!"); } );

5.change(fn)函数

函数说明：

change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。和blur(fn)函数类似

例：

$("#Text1").change( function () { alert("Hello World!"); } );

6.click(fn)函数

函数说明：

点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：

mousedown--->mouseup--->click

例：

$("#Button1").click( function () { alert("Hello World!"); });

7.dblclick(fn)函数

函数说明：

鼠标双击事件。

例：

$("#Button1").dblclick( function () { alert("Hello World!"); });

8.focus(fn)函数

函数说明：

得到焦点时触发。与blur(fn)函数对应。

例：

      $("input[type=text]").focus(function(){
              alert("Hello World!");
        });

9.show()和hide()显示、隐藏函数(无动画效果)

函数说明：

元素的显示与隐藏。

例：

    $("#btnHide").click(
            function () {$("#div3").hide();}
           );
           $("#btnShow").click(
            function(){ $("#div3").show();}
     );

10.show(speed,[callback])和hide(speed,[callback])显示、隐藏函数(有动画效果)

函数说明：speed：毫秒如：1000

show(speed,[callback]):动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

hide(speed,[callback]):动画隐藏所有匹配的元素，并在隐藏完成后可选地触发一个回调函数。

例：

    $("#btnHide").click(
            function () {$("#div3").hide(1000,function(){alert("hide!");});}
           );
           $("#btnShow").click(
            function(){ $("#div3").show(1000,function(){alert("show!");});}
     );

11.slideDown(speed,[callback]) 和 slideUp(speed,[callback]) 滑动效果函数

函数说明：

slideDown(speed,[callback]):通过高度变化（向下）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideUp(speed,[callback]):通过高度变化（向上）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

注：speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

例：

    <div id="test" style="width:200px; height:30px; border:solid 1px green;">
    滑动效果测试
    </div>
    <div id="div2" style="width:500px; border:solid 1px red; ">
        滑动效果测试
    </div>

   $("#test").hover(
       function() {
          $("#div2").slideDown(1000);},
          function() {
          $("#div2").slideUp(1000);}
       );

12.fadeIn(speed,[callback])和fadeOut(speed,[callback])淡入淡出函数

函数说明：

fadeIn(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

fadeOut(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

注：speed(String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

例：

用法同11.

13.fadeTo(speed,opacity,[callback])函数

函数说明：

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

opacity (Number) : 要调整到的不透明度值(0到1之间的数字).

例：

14.focus(fn)函数

函数说明：

例：