JQuery学习笔记之按键按下和弹起事件

最新推荐文章于 2022-12-21 17:51:19 发布
最新推荐文章于 2022-12-21 17:51:19 发布
阅读量1w 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29331365/article/details/52525165
版权

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>

    <!-- 按键按下和弹起事件：按键指键盘上的任意按键。 -->

    <button>按钮</button><br/>
    <form>
        <input type="text" name="txt"/>
    </form>
    <p>按键次数：<span></span></p>
</body>
</html>

JQuery代码： 

$(document).ready(function () {
    $(":text").keydown(function () {    // 按键按下时触发的事件；
        $(":text").css("background-color", "green");
    });

    $(":text").keyup(function () {      // 按键弹起时触发的事件；
        $(":text").css("background-color", "blue");
    });

    $("button").click(function () {
        $(":text").keyup();             // keyup()方法触发keyup事件；
    });

    var i = 0;
    $(":text").keypress(function () {   // keypress：输入框每获取一个字符，就触发一次该事件。
        $("span").text(i++);
    });
});


秋忆夏伤
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js按钮一个按钮凹下，其他按钮弹起
04-22
本例实现在一个容器中(body,div等)中的一个按钮凹下，其它按钮弹 起的效果，并且按钮在弹起状态时点击调用按钮的单击事件响应，按钮 在凹下状态只恢复弹起状态，不执行单击事件响应。
JQuery键盘事件
weixin_44547775的博客
03-31 3150
《JQuery键盘事件》 开发工具与关键技术：前端 && 谷歌浏览器 作者：肖春庆 撰写时间：2019年02月15日 JQuery提供了对应键盘事件keydown事件,keyup事件和keyprees事件。 一、keydown事件： 当按下键盘按钮时就触发它。但是按下键盘触发显示会延迟一个按钮例如（图1）。 图1 图1中当按下第6个字母了，它才显示前5个字母。实现上他触发了6个，...
jQuery键盘与鼠标事件
weixin_45044349的博客
11-21 937
键盘事件 1、keydown()：在键盘按下时触发。 2、keyup()：是按下键盘起来后的事件。 3、keypress()：在敲击按键时触发，我们可以理解为按下并抬起同一个按键。 //键码获取 $(document).keydown(function (event) { alert(event.keyCode); }); 鼠标事件 1、click()：单击事件 2、dbclick()：双击事件 3、mousedown()：鼠标按下事件 4、mouseup()：鼠标弹起事件 5、mouseente
JQuery 键盘按下和弹起事件
热门推荐
微麦PHP
05-02 1万+
$(document).ready(function () { $(":text").keydown(function () { // 按键按下时触发的事件； $(":text").css("background-color", "green"); }); $(":text").ke...
按下和弹起效果的按钮分类（POP实现）
weixin_30765577的博客
08-01 505
使用POP实现按下/弹起效果的按钮分类。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 ...
jQuery学习笔记之jQuery的事件
12-11
事件绑定函数 事件的绑定函数为如下形式： .bind(type [,data],fn) type:类型 如click….. data:参数 fn:事件执行的函数 例子 代码如下: $(function(){ $(#id1).click(function(){ $(#id2).show();//id2显示 }) ; })...
jQuery学习笔记之jQuery动画效果
12-10
基本动画代码： 代码如下:<...<head><title>Hello World jQuery!...//基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本//并且都提供了两个参数的重载，如show( speed,
jQuery学习笔记之jQuery原型属性和方法
12-10
代码如下:jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { }, selector: “”, jquery: “1.7.2”, length: 0, size: function() {}, toArray: ...
jQuery学习笔记之DOM对象和jQuery对象
12-03
什么是DOM对象？ HTML是以树形结构来组织文档的，具体如下: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <title>1-4</title>... charset=utf-8″ /
jQuery学习笔记之基础中的基础
12-11
1.jQuery的简介 就像上节所将到的Ajax框架一样，...如今，jQuery发展到集各种javascript/css/dom和ajax功能于一体的强大框架。可以简单的用代码实现各种网页效果 目前jQuery主要提供以下功能： 1.访问页面框架的局部
jQuery 事件
xiangxiongfly
12-21 1863
常用事件 页面事件 ready() 鼠标事件 自动触发点击事件 键盘事件 表单事件 编辑事件 滚动事件 固定栏目 事件 绑定事件 解绑事件 合成事件 一次事件 自定义事件 event对象 event.type event.target event.which event.pageX 和 event.pageY keyCode this
html 按下和松开事件,JQuery通过键盘控制键盘按下与松开触发事件
weixin_29649815的博客
06-07 1502
JQuery通过键盘控制键盘按下与松开触发事件效果图：HTML部分:首先设置几个盒子，用来构建这个页面的大致框架。给盒子相应的类名以及id，方便css的布局以及JQuery的获取。在盒子内放入文字。引用JQuery插件。CSS部分：1.设置一个公共的类(HTML)，在里面写公共的样式，并且放入HTML的盒子中。2.设置关键帧的值，添加一些CSS3的动画效果。3.把引用关键帧的的函数封装在一个类(C...
使用jQuery实现点击按钮 页面下滑一定距离
小小zsp的博客
11-26 5560
使用jQuery实现 点击按钮 页面下滑一定距离 在页面中添加 &lt;script&gt; $(".anniu").click(function(){ var h=$(window).scrollTop(); //获取当前滚动条距离顶部的位置 $("html,body").animate({ scrollTop: h+800 }, 800);//点击按钮向下移动800px，时间为800毫...
jQuery绑定键盘压下抬起事件
zhang245754954的博客
02-23 1489
<script type="text/javascript"> $(document).ready(function(){ $("#index_registerForm input[name='rePwd']").unbind('keyup'); $("#index_registerForm input[name='rePwd']").bind('keyup',
按键弹起、按下的事件
Studying……
07-28 4936
Return return表示从被调函数返回到主调函数继续执行，返回时可 附带一个返回值，返回值可以是一个常量，变量，或是表达式。   //按键按下事件 void keyPress(void) {          //低电平标示按键按下          if(KEY1== 0)          {                    //按键去抖            ...
html 按下和松开事件,JQuery学习笔记之按键按下和弹起事件
weixin_42523326的博客
06-07 954
html代码：按钮按键次数：JQuery代码：$(document).ready(function () {$(":text").keydown(function () { // 按键按下时触发的事件；$(":text").css("background-color", "green");});$(":text").keyup(function () { // 按键弹起时触发的事件...
用鼠标按下事件和鼠标松开事件实现长按事件
weixin_44569835的博客
04-01 1万+
用鼠标按下事件和鼠标松开事件实现长按事件 开发工具与关键技术：VS2015、C#、JS 作者：陈智鸿 撰写时间：2019-02-19 我这次要分享的是，用鼠标按下事件（onmousedown）和鼠标松开事件（onmouseup）实现长按事件，在这个长按事件里面我让它实现让数值自增的功能。首先我们要准备一个按钮和一个文本框，按钮用来点击，文本框用来显示数据。给按钮一个鼠标鼠标按下事件（onmouse...
鼠标的按下或松开事件
iteye_5722的博客
02-09 1823
一 介绍 鼠标的按下或松开事件分别是onmousedown和onmouseup事件。 其中，onmousedown事件在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。 在用鼠标单击对象时，可以用这两个事件实现动态效果。   二 应用 用事件制作超链接文本 用onmousedown和onmouseup事件将文本制作成类似于&lt;a&gt;（超链接...
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值