JQuery之总结及示例代码

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键离开的。

  例:

      <input id="Text1" type="text" />

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

  

5.change(fn)函数
  函数说明:

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

  例:

      <input id="Text1" type="text" />

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

6.click(fn)函数
  函数说明:
      点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是:

     mousedown--->mouseup--->click

  例:

      <input id="Button1" type="button" value="button" />

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

7.dblclick(fn)函数
  函数说明: 
       鼠标双击事件。
  例:
      <input id="Button1" type="button" value="button" />

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

 

8.focus(fn)函数
  函数说明:

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

  例:

      <input id="Text1" type="text" />

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

9.show()和hide()显示、隐藏函数(无动画效果)
  函数说明:
    元素的显示与隐藏。

  例:

    <input id="btnHide" type="button" value="隐藏" />
    <input id="btnShow" type="button" value="显示" />

    <div id="div3" style="width:500px; height:500px; border:solid 1px red; z-index:0;">
     示例
    </div>

    $("#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]):动画隐藏所有匹配的元素,并在隐藏完成后可选地触发一个回调函数。

  例:

    <input id="btnHide" type="button" value="隐藏" />
    <input id="btnShow" type="button" value="显示" />
     

    <div id="div3" style="width:500px; height:500px; border:solid 1px red; z-index:0;">
     示例
    </div>

    $("#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)函数
  函数说明:
    

  例:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值