• 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()) 

    });  

    });

  • 相关阅读:
    判断闰年
    CaesarCode
    substring
    configure: error: Cannot use an external APR with the bundled APR-util
    字符串处理487-3279
    git分支管理
    git解决冲突
    git 分支的创建和切换
    nginx与php-fpm原理
    git 远程仓库与本地项目关联
  • 原文地址:https://www.cnblogs.com/guirong/p/13513029.html
Copyright © 2020-2023  润新知