15.前端jQuery之【jQuery事件】
2024-04-18 10:03:21
目录
1.引入jQuery事件方法（绑定id）
2.常用jQuery事件
3.常用jQuery模型
1.克隆事件模型：单击进行克隆
2.模态框事件模型
3.点击展开隐藏菜单
4.返回到顶部模型
5.自定义登录校验
6.input实时监控
7.hover事件
8.监控键盘按键事件
1.引入jQuery事件方法（绑定id）
1.第一种:语法：$('').click(代码块函数);如：$('#d1').click(function () {alert('一起学python')});2.第二种(功能更加强大 还支持事件委托)语法：：$('').on('click',click(代码块函数)如：$('#d2').on('click',function () {alert('一起学python')})2.常用jQuery事件
jQuery事件参考菜鸟教程：https://www.runoob.com/jquery/jquery-events.html
jQuery事件方法https://www.runoob.com/jquery/jquery-ref-events.html
3.常用jQuery模型 （参考Jason老师）
1.克隆事件模型：单击进行克隆
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><style>#d1 {height: 100px;width: 100px;background-color: orange;border: 1px solid blue;}</style>
</head>
<body>
<button id="d1">屠龙宝刀，点击就送</button>
<script>$('#d1').on('click',function () {// console.log(this) // this指代是当前被操作的标签对象$(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件//$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件})
</script>
</body>
</html>2.模态框事件模型
<!DOCTYPE html>
<html lang="zh-CN">
<head><title>自定义模态框</title><style>.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}</style>
</head>
<body><input type="button" value="弹" id="i0"><div class="cover hide"></div><div class="modal hide"><label for="i1">姓名</label><input id="i1" type="text"><label for="i2">爱好</label><input id="i2" type="text"><input type="button" id="i3" value="关闭"></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>var tButton = $("#i0")[0]; //获取【弹】按钮标签$("#i0").click(function () {var coverEle = $(".cover")[0]; // 得到中间层标签对象，var modalEle = $(".modal")[0]; // 得到模态框标签对象，$(coverEle).removeClass("hide"); // 要转换成jQuery对象，移除隐藏$(modalEle).removeClass("hide");})tButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).removeClass("hide");$(modalEle).removeClass("hide");};var cButton = $("#i3")[0];cButton.onclick = function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).addClass("hide");$(modalEle).addClass("hide");}</script>
</body>
</html>3.点击展开隐藏菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><style>.left {float: left;background-color: darkgray;width: 20%;height: 100%;position: fixed;}.title {font-size: 36px;color: white;text-align: center;}.items {border: 1px solid black;}.hide {display: none;}</style>
</head>
<body><div class="left"><div class="menu"><div class="title">菜单一<div class="items">111</div><div class="items">222</div><div class="items">333</div></div><div class="title">菜单二<div class="items">111</div><div class="items">222</div><div class="items">333</div></div><div class="title">菜单三<div class="items">111</div><div class="items">222</div><div class="items">333</div></div></div></div><script>$('.title').click(function () {// 先给所有的items加hide$('.items').addClass('hide')// 然后将被点击标签内部的hide移除$(this).children().removeClass('hide')})</script>
</body>
</html>4.返回到顶部模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><style>.hide {display: none;}#d1 {position: fixed;background-color: black;right: 20px;bottom: 20px;height: 50px;width: 50px;}</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: rgb(104, 97, 97)"></div>
<div style="height: 500px;background-color: rgb(64, 80, 40)"></div>
<div style="height: 500px;background-color: rgb(110, 110, 146)"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>$(window).scroll(function () {if($(window).scrollTop() > 300){$('#d1').removeClass('hide')}else{$('#d1').addClass('hide')}})
</script>
</body>
</html>5.自定义登录校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>username:<input type="text" id="username"><span style="color: red"></span>
</p>
<p>password:<input type="text" id="password"><span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>let $userName = $('#username')let $passWord = $('#password')$('#d1').click(function () {// 获取用户输入的用户名和密码 做校验let userName = $userName.val()let passWord = $passWord.val()if (!userName){$userName.next().text("用户名不能为空")}if (!passWord){$passWord.next().text('密码不能为空')}})$('input').focus(function () {$(this).next().text('')})
</script>
</body>
</html>6.input实时监控
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>k</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>$('#d1').on('input',function () {console.log(this.value)})
</script>
</body>
</html>7.hover事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">到家啊就是度假酒店</p>
<script>// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开// alert(123)// })$('#d1').hover(function () {alert('我来了') // 悬浮},function () {alert('我溜了') // 移开})
</script>
</body>
</html>8.监控键盘按键事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>$(window).keydown(function (event) {console.log(event.keyCode)if (event.keyCode === 16){alert('你按了shift键')}})
</script>
</body>
</html>15.前端jQuery之【jQuery事件】相关推荐
- Web前端学习笔记15：Web前端开发：jQuery总结
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- JavaWeb开发 前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发 前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
- 锋利的js前端分页之jQuery
原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的 ...
- JavaWeb开发 前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发 前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- 在jQuery中删除事件处理程序的最佳方法？
我有一个input type="image" . 这就像Microsoft Excel中的单元格注释一样. 如果有人在与该input-image配对的文本框中input-image ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- 【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
- jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
- js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...
最新文章
- 百度网页分享js代码
- CentOS下安装JDK7 转载
- TCP如何利用不可靠的IP协议实现可靠传输
- ajax jsp模糊查询源码,ajax模糊查询api
- 九章算法 | Facebook 面试题 : 岛的周长
- linux-文件类型与查看文件型
- Swift 中的Closures(闭包)详解
- node.js + express 初体验【hello world】
- java thread lambda_Java8新特性--Lambda表达式
- 【Elasticsearch】 Elasticsearch 多字段查询 best_fields、most_fields、cross_fields，傻傻分不清楚？
- XMLHttpRequest.status 返回服务器状态码
- 路由器setup模式
- 正则表达式的学习使用
- zookeeper + dubbo 搭建
- 小程序公众图标素材+6113个菜单栏素材
- 2sum/3sum/ksum 问题
- 织梦CMS插件合集覆盖几十插件功能采集推送等
- L. Simone and graph coloring
- 二分法查找(dichotomy)--python实现
- 广州外贸童装批发市场