AI智能
改变未来

jQuery 常用事件

鼠标事件:

  • click
  • dblclick
  • mouseenter 鼠标焦点进入元素范围
  • mouseleave 鼠标焦点离开元素范围
  • hover 鼠标焦点进入/离开元素范围 有两个回调函数
$(\'div\').click(function(){alert(\'单击\');})$(\'div\').dblclick(function(){alert(\'双击\');})/*注意 在单击双击 同时设定的情况下 单击触发的是单击事件 双击触发的也是单击事件*/
/*效果是 鼠标焦点进入元素范围p颜色变红*/$(\'p\').mouseenter(function(){$(this).css(\'background-color\',\'red\');})/*效果是 鼠标焦点离开元素范围p颜色变绿色*/$(\'p\').mouseleave(function(){$(this).css(\'background-color\',\'green\');})/*效果是 鼠标焦点进入元素范围p颜色变红  鼠标焦点离开元素范围p颜色变绿色*//*与上面两个事件效果等效*/$(\'p\').hover(function(){$(this).css(\'background-color\',\'red\');},function(){$(this).css(\'background-color\',\'green\');});

键盘事件

  • kegdown 键被按下的过程
  • keypress 键被按下
  • keyup 键被松开
$(\"input\").keypress(function(){console.log(\'keypress\');});$(\"input\").keyup(function(){console.log(\'keyleave\');});$(\"input\").keydown(function(){console.log(\'keydown\');});

执行结果

表单事件

  • submit 表单提交
  • change 表单文本修改
  • focus 鼠标获取表单输入框焦点
  • blur 鼠标失去表单输入框焦点
/*submit 表单提交*/$(function(){$(\"form\").submit(function(){alert(\"提交\");});})<body><form action=\"\">First name:<input type=\"text\" name=\"FirstName\" value=\"Mickey\"><br>Last name:<input type=\"text\" name=\"LastName\" value=\"Mouse\"><br><input type=\"submit\" value=\"提交\"></form></body>

文档/窗口事件

  • load 数据加载完成
  • resize 用户改变浏览器窗口大小
  • scroll 滚动条滚动
  • unload 加载失败
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery 常用事件