一名android开发的jQuery：事件
在jQuery中，大多数的DOM事件都有一个方法，挺好的，相对于原生js来说让android开发者入手变得非常的快捷。
效果图：
TIM图片20190128162029.png
点击事件(click)
这个和android中的OnCilck差不多。
我们先写一个Button按钮
<div style="margin: 25px">
<button class="btn btn-outline-primary" >点击事件</button>
</div>
然后我们开始写事件
$(document).ready(function(){
//点击事件
$(".btn-outline-primary").click(function () {
alert("点击事件提示")
});
});
当我们点击Button的时候我们会弹出一个提示框。
双击事件(dblclick)
//双击事件
$(".btn-outline-primary").dblclick(function () {
alert("双击点击事件")
});
鼠标移入事件(mouseenter)
//鼠标放入事件
$(".btn-outline-primary").mouseenter(function () {
alert("双击移入事件")
});
鼠标移出事件(mouseleave)
//鼠标移出事件
$(".btn-outline-primary").mouseenter(function () {
alert("移出事件")
});
焦点获取事件和失去焦点事件focus()和blur()
<div style="margin: 25px;width: 200px;">
<input type="text" class="form-control" id="name" placeholder="请输入">
</div>
常用的一个功能就是给用户输入信息的视觉反馈
当点击输入框时，颜色变为深色，完成后变回原来的样式
//当获取焦点的事件
$(".form-control").focus(function () {
$(this).css({
"background-color":"#999999"
});
});
//当失去焦点
$(".form-control").blur(function () {
$(this).css({
"background-color":"#ffffff"
});
})
一些常用的点击事件分享。
附上代码，直接跑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
//点击事件
$(".btn-outline-primary").click(function () {
alert("点击事件提示")
});
//双击事件
$(".btn-outline-primary").dblclick(function () {
alert("双击点击事件")
});
//鼠标放入事件
$(".btn-outline-primary").mouseenter(function () {
alert("鼠标放入事件");
});
//鼠标移出事件
$(".btn-outline-primary").mouseleave(function () {
alert("鼠标移出事件")
});
/*
* 这是四种常用的事事件
* 当然还有mousedown()，mouseup()，hover()，focus()，blur()
* */
//当获取焦点的事件
$(".form-control").focus(function () {
$(this).css({
"background-color":"#999999"
});
});
//当失去焦点
$(".form-control").blur(function () {
$(this).css({
"background-color":"#ffffff"
});
})
});
</script>
<title>jQuery的事件Demo</title>
</head>
<body>
<div style="margin: 25px">
<button class="btn btn-outline-primary" >点击事件</button>
</div>
<div style="margin: 25px;width: 200px;">
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
</body>
</html>
网友评论