zoukankan      html  css  js  c++  java
  • jQuery事件

    (1)、什么是事件

    1、页面对不同访问者的响应叫做事件。

    2、实例:在元素上移动鼠标、选取单选按钮、点击元素

    复习事件: 事件三要素  1、事件源  2、事件类型  3、事件的处理程序(以函数返回)

    (1)、事件语法

    1、单击事件

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

    // 动作触发后执行的代码!! 

    });

    2、双击事件

    $("p").dblclick(function(){

      $(this).hide();

    })

    3、鼠标进入

    $("#p1").mouseenter(function(){

    alert('您的鼠标移到了 id="p1" 的元素上!');

    });

    4、鼠标离开

    $("#p1").mouseleave(function(){

    alert("再见,您的鼠标离开了该段落。");

    });

    5、获取焦点

    $("input").focus(function(){

    $(this).css("background-color","#cccccc");

    });

    6、失去焦点

    $("input").blur(function(){

    $(this).css("background-color","#ffffff");

    });

    事件机制

    (1) 、注册事件

    bind() on()             ("事件类型",回调函数)

    方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

    $("p").bind("click",function(){
             alert("这个段落被点击了。");
    }"dbClick",function(){
             alert("这个段落被击了。");
    });

     $("p").on("click",function(){ alert("段落被点击了。"); });

    (2) 、委托事件

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

    $("div").delegate("p","click",function(){
        $("p").css("background-color","pink");
    });

    (3) 、事件对象event

    event对象有以下属性

    type:事件类型,比如click

    which:触发该事件的鼠标按钮或键盘的键。

    target:事件发生的初始对象。

    data:传入事件对象的数据。

    pageX:事件发生时,鼠标位置的水平坐标(相对于页面左上角)。

    pageY:事件发生时,鼠标位置的垂直坐标(相对于页面左上角

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

              console.log(evet);

      });

    (4) each()方法

    each() 方法为每个匹配元素规定要运行的函数。

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

    $("li").each(function(){ 

    alert($(this).text()) 

    });  

    });

  • 相关阅读:
    beini破解无线
    commview for wifi 破解无线
    取代奶瓶Minidwep-gtk 破 WPA 全攻略
    CDLinux环境下WiFi密码破解
    WiFi密码破解CDlinux
    如何在vue.js渲染完界面之后再调用函数
    Flex布局备忘
    IDEA基本配置
    Flutter环境搭建踩坑-Android sdkmanager tool not found
    Git操作-DevOps
  • 原文地址:https://www.cnblogs.com/guirong/p/13513029.html
Copyright © 2011-2022 走看看