zoukankan      html  css  js  c++  java
  • JQuery常用实用的事件[较容易忽略的方法]

                            JQuery常用实用的事件

    注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!
    JQuery 事件处理
    ready(fn)
    代码:

    $(document).ready(function(){
       //处理代码
     });

    作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操 

    纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

    bind(type.[data],fn)
    代码:

    $("p").bind("click",function(){
       alert($(this.text()));
     });

    作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。

    toggle(fn,fn)
    代码:

    1 $("td").toggle{
    2   function(){
    3     $(this).addClass("selected");
    4   },
    5   function(){
    6         $(this).removeClass("selected");
    7   }
    8 };

    作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点 

    击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。(
    像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)

    jQuery外观效果
      addClass(class)和removeClass(class)
    代码:

    1 $(".stripe tr").mouseover(function(){
    2     $(this).addClass("over");}).mouseout(function(){
    3     $(this).removeClass("over");})
    4 });

    也可以写成这样:

    1 $(".stripe tr").mouseover(function() { $(this).addClass("over") });
    2 $(".stripe tr").mouseout(function() { $(this).removeClass("over") }

    作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的
    代码

    css(name,value)
    代码:
     1 $("p").css("color",red); 
    作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有
    点类似。

      slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
    代码: 

    1 $("#btnShow").bind("click",function(event){ $("#divMsg").show() });
    2 
    3 $("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() })


    作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优
    雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数

    animate(params[,duration[,easing[,callback]]])
    作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。

    find(expr)
    HTML 代码:
     1 < SPAN>Hello< /SPAN> 

    jQuery 代码:
       1 $("p").find("span")  
    结果:
    [< SPAN>Hello< /SPAN> ]

    作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    文档处理

    attr(key,value)

    HTML 代码:

    < IMG>< IMG>

    jQuery 代码:
       1 $("img").attr("src","test.jpg"); 

    作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。
    如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。

    html()/html(val)

    HTML 代码:

     1 < DIV> 2 Hello 3 < /DIV> 

    jQuery 代码:

      1  $("div").html(); 

    结果:

    Hello

    作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内
    容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上

    功时回调函数。

    代码:

    1 $("#feeds").load("feeds.aspx", {limit: 25}, function(){
    2     alert("The last 25 entries in the feed have been loaded");
    3 });

    作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

    serialize()

    HTML 代码:

    Results:

     1 < FORM>
     2 < SELECT name=single> < OPTION selected>Single< /OPTION> 
     3     < OPTION>Single2< /OPTION> 
     4 < /SELECT>
     5 < SELECT multiple name=multiple> 
     6     < OPTION selected>Multiple< /OPTION> 
     7     < OPTION>Multiple2< /OPTION>
     8      < OPTION selected>Multiple3< /OPTION> 
     9 < /SELECT>
    10 
    11 < INPUT value=check1 type=checkbox name=check> 
    12   check1
    13 < INPUT value=check2 type=checkbox name=check 
    14 checked="checked"/> 
    15   check2
    16 < INPUT value=radio1 type=radio name=radio 
    17 checked="checked"/>
    18   radio1
    19 < INPUT value=radio2 type=radio name=radio> radio2
    20 < /FORM>

    jQuery 代码:

    1 $("#results").append( "< TT>" + $("form").serialize() + "< /TT>" ); 

    作用:序列化表格内容为字符串。用于 Ajax 请求。

    工具

      jQuery.each(obj,callback)

    代码:

    1 $.each( [0,1,2], function(i, n){
    2    alert( "Item #" + i + ": " + n );
    3   });//遍历数组
    4 $.each( { name: "John", lang: "JS" }, function(i, n){
    5       alert( "Name: " + i + ", Value: " + n );//遍历对象
    6 });

    作用:通用例遍方法,可用于例遍对象和数组。

      jQuery.makeArray(obj)

    HTML 代码:

    First

    < DIV>Second< /DIV>
    Third< /DIV>
    < DIV>Fourth
    < /DIV>

    jQuery 代码:

       1 var arr = jQuery.makeArray(document.getElementsByTagName("div")); 
    结果:

    Fourth

    Third

    Second

    First

    作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

      jQuery.trim(str)

    作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。

    小结:

    在实际的开发中我们可能会用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌
    握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

     

  • 相关阅读:
    mysql命令集锦
    linux 删除文件名带括号的文件
    linux下的cron定时任务
    struts2文件下载的实现
    贴一贴自己写的文件监控代码python
    Service Unavailable on IIS6 Win2003 x64
    'style.cssText' is null or not an object
    "the current fsmo could not be contacted" when change rid role
    远程激活程序
    新浪图片病毒
  • 原文地址:https://www.cnblogs.com/visec479/p/3967983.html
Copyright © 2011-2022 走看看