zoukankan      html  css  js  c++  java
  • 页面某一个元素跟随输入框输入内容动态变化

    要考虑多种事件  如keyup ,blur

    事件绑定方法:

    多个事件绑定同一个函数

    $(document).ready(function(){

      $("input").on("keyup blur",function(){

        //代码

      });

    });

    多个事件绑定不同函数

    $(document).ready(function(){

      $("p").on({

        mouseover:function(){$("body").css("background-color","lightgray");},  

        mouseout:function(){$("body").css("background-color","lightblue");}, 

        click:function(){$("body").css("background-color","yellow");}  

      });

    });

    绑定自定义事件

    $(document).ready(function(){

      $("p").on("myOwnEvent", function(event, showName){

        $(this).text(showName + "! What a beautiful name!").show();

      });

      $("button").click(function(){

        $("p").trigger("myOwnEvent",["Anja"]);

      });

    });

    传递数据到函数

    function handlerName(event) {

      alert(event.data.msg);

    }

    $(document).ready(function(){

      $("p").on("click", {msg: "You just clicked me!"}, handlerName)

    });

    适用于未创建的元素(事件委托)

    $(document).ready(function(){

      $("div").on("click","p",function(){

        $(this).slideToggle();

      });

      $("button").click(function(){

        $("<p>This is a new paragraph.</p>").insertAfter("button");

      });

    });

  • 相关阅读:
    POJ 1300 Open Door
    POJ 2230 Watchcow
    codevs 1028 花店橱窗布置
    codevs 1021 玛丽卡
    codevs 1519 过路费
    codevs 3287 货车运输
    codevs 3305 水果姐逛水果街二
    codevs 1036 商务旅行
    codevs 4605 LCA
    POJ 1330 Nearest Common Ancestors
  • 原文地址:https://www.cnblogs.com/lcddjm/p/6542889.html
Copyright © 2011-2022 走看看