jQuery_事件之键盘事件-【官方】百战程序员_IT在线教育培训机构

选择器
1. 基础选择器类选择器元素选择器 ID选择器子元素选择器后代元素选择器
2. 属性选择器完美匹配包含前缀开头结尾空格
3. jQuery扩展选择器 eq even odd first last gt lt
DOM操作
1. Class操作 addClass() removeClass() toggleClass() hasClass()
2. 文本操作 html() text() val()
3. 属性操作 attr() removeAttr()
4. DOM 插入并包裹现有内容 .wrap() .unwrap() .wrapAll() .wrapInner()
5. DOM 插入现有元素内 .append() .prepend()
6. DOM 插入现有元素外 .after() .before()
7. DOM 移除 .empty() .remove()
8. DOM 替换 .replaceAll() .replaceWith()
CSS操作
1. 尺寸 .css() .height()，.width() .innerHeight()，.innerWidth() .outerHeight()，.outerWidth()
2. 位置 .offset() .position() .scrollLeft() .scrollTop()
事件处理
1. 绑定事件处理器 .on() .one() .off()
2. 鼠标事件 .click() .hover() .mouseenter() .mouseleave() .mousemove() .mouseover() .mouseout()
3. 表单事件 .focus() .blur() .change() .submit()
4. 键盘事件 .keydown() .keypress() .keyup()
遍历
动画

.keydown()

添加键盘按下事件


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keydown(function(){
            console.log("键盘");
        })
    </script>
</body>
</html>

.keypress()

添加键盘事件


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keypress(function(){
            console.log("键盘");
        })
    </script>
</body>
</html>

.keyup()

添加键盘抬起事件


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keyup(function(){
            console.log("键盘");
        })
    </script>
</body>
</html>

实时效果反馈

1. 下列哪个是键盘按键抬起触发的事件：

A keydown()

B keypress()

C keyup()

D click()

答案

1=>C

jQuery_事件之表单事件 jQuery_事件之浏览器事件

北京市昌平区回龙观镇南店村综合商业楼2楼226室