标签:等价 key 事件 pagex 情况下 sel 数据 inpu 全局
因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。
浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。
由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码。
假设要在用户点击了超链接时弹出提示框,我们用jQuery这样绑定一个click
事件:
效果:
on
方法用来绑定一个事件,我们需要传入事件名称和对应的处理函数。
另一种更简化的写法是直接调用click()
方法:
a.click(function () {
alert('Hello!');
});
两者完全等价。我们通常用后面的写法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse :<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>
键盘事件仅作用在当前焦点的DOM上,通常是<input>
和<textarea>
。
<input>
、<select>
或<textarea>
的内容改变时触发;<form>
提交时触发;用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。
用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。
jQuery在全局对象jQuery
(也就是$
)绑定了ajax()
函数,可以处理AJAX请求。ajax(url, settings)
函数需要接收一个URL和一个可选的settings
对象,常用的选项如下:
true
,千万不要指定为false
;‘GET‘
,可指定为‘POST‘
、‘PUT‘
等;‘application/x-www-form-urlencoded; charset=UTF-8‘
,也可以指定为text/plain
、application/json
;dataType:接收的数据格式,可以指定为‘html‘
、‘xml‘
、‘json‘
、‘text‘
等,缺省情况下根据响应的Content-Type
猜测。
jQuey 封装好的 方法 $(”#name“).ajax(“”)
标签:等价 key 事件 pagex 情况下 sel 数据 inpu 全局
原文地址:https://www.cnblogs.com/godles/p/12200450.html