【JQuery_事件】事件_语法_键盘事件_鼠标事件_

ゞ浴缸里的玫瑰 2024-04-03 10:16 93阅读 0赞

## 0.事件 ##

### 0.0 事件四要素 ###

1.  事件源
2.  事件绑定处理函数
3.  查找修改元素
4.  修改元素

#### 0.0.0事件源 ####

*  document
 *  某具体元素
 *

### 0.1 语法格式 ###

### 0.2文档事件 ###

### 0.3窗口事件 ###

#### 0.3.0·`load()`· ####

#### 0.3.1~~`unload()` ####

### 0.4键盘事件 ###

#### 0.4.0`keydown()` ####

#### 0.4.1`keypress()`\-重点理解 ####

**`触发条件：实时产生了可打印的字符时。`**

**中文字符不是实时产生字符的**

![keypress()\`-重点理解][keypress_-]

--------------------

#### 0.4.2`keyup()` ####

#### 0.4.0-2案例 ####

<textarea id="key"></textarea>
    <script>
        var key = document.getElementById("key");
        key.onkeydown =f;  //注册keydown事件处理函数
        key.onkeyup = f;  //注册keyup事件处理函数
        key.onkeypress = f;  //注册keypress事件处理函数
        function f (e) {
          
            var e = e || window.event;  //标准化事件处理
            var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
            key.value = s;
        }
    </script>

### 0.5鼠标事件 ###

#### 0.5.1 单击事件`click()` ####

#### 0.5.1双击事件`dblclick()` ####

#### 0.5.2悬停事件`hover()` ####

#### 0.5.0-2案例 ####

![鼠标事件-1讲解][-1]  
其他的同上：  
![鼠标事件-1 讲解1][-1 _1]

![单击双击和悬停事件函数案例][678e9abfffdc4e3ba42fc6b9d5805c4c.png]

#### 0.5.3 `mousemove()` ####

##### 事件源：一般为文档`document` #####

`<script> $(document).mousemove( // 参数 function() { // 函数主体 } ); </script>`

#### 0.5.4`mousedown与mouseup` ####

#### 0.5.4.1案例 ####

![案例mousedown/up][mousedown_up]

#### 0.5.5 `mouseenter与mouseleave` ####

**加粗样式**

#### 0.5.6 `mouseover` `mouseout` ####

#### 0.5.6.1案列 ####

![父元素。mouseover][mouseover]  
![mouseover][mouseover 1]  
![mouseover][mouseover 2]

> `进入本元素或者后代元素都可触发事件~~~！~~~`

### 0.5 表单事件 ###

#### 0.5.1`blur()` `focus()`· ####

#### 0.5.2案列 ####

![在这里插入图片描述][ee2d8b1f9df8495aa23af9fa403e5a0b.png]

![在这里插入图片描述][513a3605e3d24cefb4781529489428ff.png]

> **`this （文档对象）`** :简化代码量（简化开发）
> 
> next（） （遍历；）  
> .  
> text（） 单纯地只能加入文本内容。

#### 0.5.3 `change()` ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟学堂(edu.jb51.net)</title>
    <script src="http://edu.jb51.net/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
          
      $("input").change(function(){
          
        alert("文本已被修改");
      });
    });
    </script>
    </head>
    <body>
    <input type="text">
    <p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
    </body>
    </html>

![结果][5a24c14e5d62407dbe1ca6e008c2c166.png]

> **[参考案例][Link 1]**

### `text()` `next()` ###

！！！！！！！！！！！！！！！

> **应用：做网站的时候是常用的JQ（JavaScript）**

#### 0.5.4`select()` ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
          
      $("input").select(function(){
          
        alert("文本已选中!");
      });
    });
    </script>
    </head>
    <body>
    
    <input type="text" value="www.runoob.com">
    <p>在输入框中选取文本</p>
    
    </body>
    </html>

![在这里插入图片描述][3aec10ec834c4239a18156b13d94f496.png]

> **[参考案例2][2]**

![在这里插入图片描述][e5d3f04676764e53be85042a78271505.png]

#### 0.5.5 `submit()` ####

**在此处，的事件源一般认为是`form`表单元素**

> 触发条件：点击`submint`按钮才会触发。  
> **事件先发现，用户第一，且需要进行判断~！！！！ 若有错误，则会阻止传入后台~~~**
> 
> **`传入后台前是需要判断数据是否符合标准的！！！`**

## y语法 ##

> 简化代码量

$( 
    	function(){
    
    
    	}
    
    );

#### 0.6`:text` 表单选择器 ####

#### 0.7`val()` 取值函数 ####

### 1.0`判空~！！！前端判空` ###

#### `" "` ####

#### `isNaN` ####

### 2.0前端表单常用的判断方法 ###

#### 判断方法 ####

![前端表单常用的判断方法][2c1523e6082e40fb966371b94d9b2894.png]

**持续更新—**

[keypress_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4e9fffd606e74e5791bac04ef6a9fec3.png
[-1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/41da06d15b0a43b5bb0c624876d8fd70.png
[-1 _1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/fd48c3102e614b858b6979874895991a.png
[678e9abfffdc4e3ba42fc6b9d5805c4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/50328ca91077476dae9b0af7a188c6e5.png
[mousedown_up]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e6b3f4811b0a4201ab36c644d49d1cde.png
[mouseover]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a6ac40b223a54248828b68a5c195668d.png
[mouseover 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a34ce3d95e4f4dae806a68d251dc2a61.png
[mouseover 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5b2c18ddb3cf4fd388f864bc3ff869a4.png
[ee2d8b1f9df8495aa23af9fa403e5a0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5935edf54cc54b649076505a7ce5979e.png
[513a3605e3d24cefb4781529489428ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/21967bfb6be6469e997e2b9fb9780337.png
[5a24c14e5d62407dbe1ca6e008c2c166.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/67413722c3674a43b71d0da9e4755cb7.png
[Link 1]: http://run.jb51.net/try/?name=tryjquery_event_change_ref
[3aec10ec834c4239a18156b13d94f496.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0ce51735dab14d9793b9dd7853b0f77b.png
[2]: https://www.runoob.com/try/try.php?filename=tryjquery_event_select_reff
[e5d3f04676764e53be85042a78271505.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/45c0ceeaa44e492787d0757e797b626f.png
[2c1523e6082e40fb966371b94d9b2894.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/be3b3ca77efb47dc8ad28007beb5b051.png