• jquery 学习笔记 (2)--write less,do more


    $(window).load(function(){      })           window.onload=function(){ }

    toggle()方法

    toggle()方法的语法结构:

    toggle(fn1,fn2,...,fnN);

    作用1.toggle()方法用于模拟鼠标连续单击事件

    控制元素的隐藏与显示

    $(function(){

      $("#panel h5.head").toggle(function(){

                  $(this).next().show();

               },function(){

          $(this).next().hide();

            })

    });

    作用2.切换元素的可见状态

    $("#panel h5.head").toggle(function(){

                  $(this).next().toggle();

               },function(){

          $(this).next().toggle();

            })

    });

     阻止默认行为

    网页中的元素有自己默认的行为,如

    1.单击超链接后会跳转

    2.单击“提交”按钮后表单会提交

    对表单提交前验证

    $(function(){
       $("#sub").bind("click",function(event){
            var username = $("#username").val();
            if(username == ""){
                  $("#msg").html("<p>文本框的值不能为空.</p>");
                  event.preventDefault();
            }
       });
    })
    
    <form action="">
         username:<input type="text" id="username" />
         <input type="submit" value="提交" id="sub" />
    </form>
    <div id="msg"></div>
    

     如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false

    event.preventDefault();    //阻止默认行为

    event.stopPropagation();   //停止事件冒泡 

    jQuery不支持事件捕获

    event.target   获取到触发事件的元素

    event.target.nodeName   元素名称  P  H3  SPAN等等

    trigger()方法

    trigger()方法触发事件后,会执行浏览器默认操作,例如:

    $("input").trigger("focus");

    不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(浏览器的默认操作)

    解决办法:triggerHandler()方法

    $("input").triggerHandler("focus");

    会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作。即文本框只触发绑定的focus事件,不会得到焦点。

    绑定多个事件类型

    $(function(){

        $("div").bind("mouseover mouseout",function(){

             $(this).toggleClass("over");

        });

    });

    当光标滑入<div>元素时,该元素的class切换为"over";当光标滑出<div>元素时,class切换为先前的值。这段代码等同于:

    $(function(){

        $("div").bind("mouseover",function(){

           $(this).toggleClass("over");

        }).bind("mouseout",function(){

           $(this).toggleClass("over");

        });

    });

  • 相关阅读:
    platform_device和platform_driver
    理解和认识udev
    platform_device和platform_driver
    bzImage的概要生成过程
    shell 字符表
    分析mtk6516如何加入自己的驱动
    理解和使用Linux的硬件抽象层HAL
    bzImage的概要生成过程
    理解和认识udev
    shell 字符表
  • 原文地址:https://www.cnblogs.com/919czzl/p/5064219.html
Copyright © 2020-2023  润新知