分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

jQuery的基本事件

发布时间:2023-09-06 01:17责任编辑:郭大石关键词:jQuery

1、用法

<!--jquery通过bind()这个方法来为元素绑定事件,可以传三个参数,type、data、fn--><!--type表示一个或者多个事件的名称--><!--data是可以选的,作为属性值传递额外的参数--><!--fn表示绑定到的指定的事件后要执行的函数-->

  

2、基本事件的总结

<!--jquery的常见的事件类型--><!--  1.blur()      当失去焦点时触发。包括鼠标点击离开和TAB键离开。--><!--  2.change()     当元素获取焦点后,值改变失去焦点事触发。--><!--  3.click()      当鼠标单击时触发。--><!--  4.dblclick()     当鼠标双击时触发。--><!--  5.error()      当javascript出错或img的src属性无效时触发。--><!--  6.focus()     当元素获取焦点时触发。注意:某些对象不支持。--><!--  7.focusin()    当元素或其子元素获取焦点时触发,与focus()区别在于能够检测其内部子元素获取焦点的情况。--><!--  8.focusout()    当元素或者其子元素失去焦点时触发,与focusout()区别在于能够检测内部子元素失去焦点的情况。 --><!--  9.keydown()   当键盘按下时触发。--><!--  10.keyup()    当按键松开时触发。--><!--  11.mousedown()    当鼠标在元素上点击后触发。--><!--  12.mouseenter()    当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。--><!--  13.mouseleave()    当鼠标从元素上移出时触发。--><!--  14.mousemove()    当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。--><!--  15.mouseout()     当鼠标从元素上移开时触发。--><!--  16.mouseover()     当鼠标移入元素时触发。--><!--  17.mouseup()     当鼠标左键按下释放时触发。--><!--  18.resize()       当浏览器窗口大小改变时触发。 $(window).resize();--><!--  19.scroll()        当滚动条发生变化时触发。--><!--  20.select()       当input里的内容被选中时触发。--><!--  21.submit()       提交选中的表单。--><!--  22.unload()       当页面卸载【刷新】时触发-->

  

3、简单写一些例子来讨论事件的使用

 <input type="button" name="name" value="提交"> ???<input type="text"> ???<input type="password"> ???<div class="cc">div测试</div> ???<script src="jquery-3.2.1.js"></script> ???<script> ???????$(function () {// ???????????$("input").bind(‘click‘,function () {// ???????????????alert("请输入")// ???????????})// ???????????$("input").bind("click",f)//// ???????????function f() {// ???????????????alert("请输入111")// ???????????}// ???????????这种方法和上面的方法实现的效果是一样的// ???????????还可以同时绑定多个事件,事件和事件之间用空格隔开,下面这个例子实现的效果是单机和鼠标移入执行相同的函数// ???????????$("input").bind("click mouseover",function () {// ???????????????alert("xxxxxxxxxxxxxxxxxxx")//// ???????????})//下面这个例子实现的效果就是鼠标移除和移入分别执行不同的函数// ???????????$("input").bind({// ???????????????"mouseover":function () {// ???????????????????alert("鼠标移入")// ???????????????},// ???????????????"mouseout":function () {// ???????????????alert("鼠标移除")// ???????????}// ???????????})// ???????????删除所有的事件// ???????????$("input").unbind()// ???????????删除一个事件// ???????????$("input").unbind("click")//mouseover,mouseout事件应用,鼠标移入和鼠标移除// ???????????$("div").bind({// ???????????????"mouseover":function () {// ???????????????????$(this).css("font-size","40px")// ???????????????},// ???????????????"mouseout":function () {// ???????????????????$(this).css("font-size","10px")// ???????????????}// ???????????})//keyup,keydown 键盘的事件// ???????????$(":input[type=‘text‘]").bind("keyup",function () {// ???????????????var a = $(this).val()// ???????????????alert(a)// ???????????})//focus,blur光标移入,光标丢失// ???????????$("input[type=‘password‘]").bind({‘focus‘:function () {// ???????????????alert("光标锁定")// ???????????},// ???????????‘blur‘:function () {// ???????????????alert("光标移除")// ???????????}// ???????????})

  

4、函数还可以这样使用

 ???????????$(":input[type=‘text‘]").bind(‘click‘,function () { ???????????????var b = $(this).val() ???????????????if(b == 1){ ???????????????????$(this).val(1111) ???????????????}else if (b == 2){ ???????????????????$(this).val(2222) ???????????????}else { ???????????????????$(this).val("xxxxxxxxxxxxxx") ???????????????} ???????????})

  

jQuery的基本事件

原文地址:http://www.cnblogs.com/bainianminguo/p/7659130.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved