zoukankan      html  css  js  c++  java
  • 6.21 jquery 事件

    1 attr() 方法设置或返回被选元素的属性值。
    $("button").click(function(){
      $("img").attr("width","180");
    });
    2 append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
    $("button").click(function(){
      $("p").append(" <b>Hello world!</b>");
    });
    3 prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。
    $("button").click(function(){
      $("p").prepend("<b>Hello world!</b>");
    });
    4 after() 方法在被选元素后插入指定的内容(外部)。
    $("button").click(function(){
      $("p").after("<p>Hello world!</p>");
    });
    5 before() 方法在被选元素前插入指定的内容(外部)。
    $("button").click(function(){
      $("p").before("<p>Hello world!</p>");
    });
    6 addClass() 方法向被选元素添加一个或多个类。
    $("button").click(function(){
      $("p:first").addClass("class样式名");
    });
    7 removeClass() 方法从被选元素移除一个或多个类
    $("button").click(function(){
      $("p:first").removeClass("class样式名");
    });
    8 hasClass() 方法检查被选元素是否包含指定的 class
    $("button").click(function(){
      alert($("p:first").hasClass("class样式名"));
    9 toggleClass() 从匹配的元素中添加或删除一个类。
    $("button").click(function(){
      $("p").toggleClass("class样式名");
    });
    =====================事件==================
    1 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
     $("button").bind("click",function(){
        $("p").append(" <b>Hello world!</b>");
      });
    2 blur()当元素失去焦点时发生 blur 事件。
     $("input").blur(function(){
      $("input").css("background-color","#D6D6FF");
    });
    3 change()当元素的值发生改变时,会发生 change 事件
     $(".field").change(function(){
         $(this).css("background-color","#FFFFCC");
       });
    4 delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
     $("div").delegate("button","click",function(){
         $("p").slideToggle();
       });
    5 pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
    6 result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义。
    7 keydown()  触发、或将函数绑定到指定元素的 key down 事件
      keypress()  触发、或将函数绑定到指定元素的 key press 事件
      keyup()          触发、或将函数绑定到指定元素的 key up 事件
      完整的 key press 过程分为两个部分,按键被按下,然后按键被松开并复位。
     当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
     当按钮被按下时,发生 keyup 事件。
    8 mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
    与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
    $("button").mousedown(function(){
      $("p").css("background-color","#FFFFCC");
    });
    9 mouseenter()当鼠标指针穿过元素时,会发生 mouseenter 事件。
    $("p").mouseenter(function(){
      $("p").css("background-color","yellow");
    });
    10 mouseleave()当鼠标指针离开元素时,会发生 mouseleave 事件。
    $("p").mouseleave(function(){
      $("p").css("background-color","#E9E9E4");
    });
    11  mousemove()当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
    mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件
    mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。
    mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。
    12 resize() 当调整浏览器窗口的大小时,发生 resize 事件。
    x =0
    $(window).resize(function() {
      $("span").text(x+=1);
    });
    13 scroll() 当用户滚动指定的元素时,会发生 scroll 事件。
    14 select()当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
    15 submit()当提交表单时,会发生 submit 事件。
    16 toggle() toggle() 方法切换元素的可见状态。
    17 trigger() trigger() 方法触发被选元素的指定事件类型。
     $("input").select(function(){
        $("input").after("文本被选中!");
      });
      $("button").click(function(){
        $("input").trigger("select");
      });

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        Enter your name: <input type="text" />
        <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
        <p>在某个域被使用或改变时,它会改变颜色。</p>
        Enter your name: <input class="field" type="text" />
        <div style="background-color:red">
        <p>这是一个段落。</p>
        <button>请点击这里</button>
        </div>
        <p>鼠标指针位于: <span></span></p>
         Enter your name: <input type="text" />
        <p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
         Enter your name: <input type="text" />
        <p>Keypresses:<span>0</span></p>
         Enter your name: <input type="text" />
        <p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
         <p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
    
    </body>
    </html>
    <script type="text/javascript">
         /*$("input").focus(function(){
            $("input").css("background-color","#FFFFCC");
          });
          $("input").blur(function(){
            $("input").css("background-color","#D6D6FF");
          });*/
         $(".field").change(function(){
            $(this).css("background-color","#FFFFCC");
          });
          $("div").delegate("button","click",function(){
            $("p").slideToggle();
          });
         $(document).mousemove(function(e){ 
            $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
          });
          $("input").keydown(function(){
            $("input").css("background-color","#FFFFCC");
          });
          $("input").keyup(function(){
            $("input").css("background-color","#D6D6FF");
          });
          i=0;
          $("input").keypress(function(){
            $("span").text(i+=1);
          });
           $("input").keydown(function(){
            $("input").css("background-color","#FFFFCC");
          });
          $("input").keyup(function(){
            $("input").css("background-color","#D6D6FF");
          });
          $("p").mouseenter(function(){
            $("p").css("background-color","yellow");
          });
          $("p").mouseleave(function(){
            $("p").css("background-color","#E9E9E4");
          });
    
    </script>
  • 相关阅读:
    Python——五分钟带你弄懂迭代器与生成器,夯实代码能力
    LeetCode37 使用回溯算法实现解数独,详解剪枝优化
    LeetCode 33,在不满足二分的数组内使用二分的方法
    丰富图文详解B-树原理,从此面试再也不慌
    看完这篇让你高数不挂科之——泰勒公式
    数据结构——动手实战双向链表
    你听说过JMX么
    【网络安全】CSRF攻击详解
    【开发工具】本机安装的JDK8,启动IDEA2019没反应
    Java开发过程中的常用工具类库
  • 原文地址:https://www.cnblogs.com/sunhao1987/p/9211199.html
Copyright © 2011-2022 走看看