前端开发 - JQuery - 下
二十五、jquery的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的事件</title>
</head>
<body>
<!-- https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426
js的事件流 的流程图 。。。
事件监听器的方法
事件捕获
处于目标
事件冒泡
jquery的事件 不支持 事件捕获 --> <div id="box">
<button>按钮</button>
</div> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $('button').click(function () { alert('button事件触发')
}); $('#box').click(function () { //冒泡了 会触发box
alert(222);
}) </script>
</html>
二十六、jquery事件对象和事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件对象和事件冒泡</title>
<style type="text/css">
#box{width: 200px;height: 200px;background-color: gray;}
p{width: 100px;height: 100px;background-color: red;} </style> </head>
<body>
<div id="box">
<p class="p1"></p> <a href="https://www.luffycity.com">路飞</a> </div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> // 入口函数 事件属性
$(function () { //事件对象
$('.p1').click(function (ev) { console.log(ev.type);
console.log(ev.target);
console.log(ev.pageX);
console.log(ev.pageY); alert('当前按钮触发了');
//常用的事件 方法 1.阻止事件冒泡 2.阻止默认事件
//1,阻止事件冒泡
ev.stopPropagation() //2.组织默认事件 a href = '' form submit }); $('#box').click(function () {
alert('box 事件触发了');
}); $('a').click(function (ev) { //所有额的dom元素都能加 点击事件 //组织a 标签的默认事件
// ev.preventDefault();
// alert('阻止了默认的');
// ev.stopPropagation();
// alert('阻止了冒泡'); return false; // 阻止了冒泡 和 默认 jquery 是没有捕获的 只有冒泡 }) }) // https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426 </script>
</html>
二十七、jquery事件绑定和移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件绑定和移除</title>
<style type="text/css">
#box{width: 200px;height: 200px;background-color: red;} </style>
</head>
<body>
<div id="box"> </div> <button>按钮</button> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function () { //事件的绑定 //给当前的dom元素添加绑定事件
$('#box').click(function () { }); //给当前的dom元素绑定事件 语法：jquery对象.bind('事件类型',fn)
$('#box').bind('click mouseenter',function () {
alert('事件被绑定了')
}); $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈</div>') function add() {
console.log('click')
}
function add2() {
console.log('mouseover');
}
//给jquery 添加不同的事件 不同的效果
$('div').bind({
'click':add,
'mouseover':add2
}); //事件移除
// 没有参数 表示移除所有事件
setTimeout(function () {
// $('#box').unbind();
// $('#box').unbind('click'); //移除一个事件
},3000); //添加的事件不能发生在未来 --》 动态生成的元素不能直接添加对象 里面的事件也不能发生了-->想让发生，事件代理
// $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈</div>') //绑定自定义的事件
$('button').bind('myclick',function (ev,a,b,c) {
alert(11111);
console.log(ev);
alert(a);
alert(b);
alert(c);
});
//触发自定义的事件
// $('button').trigger('myclick')
$('button').trigger('myclick',[1,2,3]) }) </script>
</html>
二十八、事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件代理</title>
</head>
<body>
<ul>
<li class="luffy">路飞</li>
<li>路飞</li>
<li>路飞</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () { //先点击
$('ul>li').bind('click',function () {
console.log($(this))
});
$('ul>li').click(function () {
console.log($(this))
}); //事件代理 自己完成不了当前的点击事件，交给父级元素做这件事件
//父级.on('事件名字','点击当前的标签元素选择器',fn) $('ul').on('click','#name,.luffy',function () { // 可绑定多个选择器
console.log(this);
}); $('ul').append('<li id="name">哈哈</li>') // 这时点击 不起作用 需要 代理 }) </script>
</html>
二十九、鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{width: 200px; height: 200px;background-color: gray;}
#child{width: 100px; height: 100px;background-color: yellow;}
</style>
</head>
<body>
<div id="box">
<div id="child"></div> <input type="text" value="123">
<br>
<input type="password" >
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () { //点击事件 //单击
$('#box').click(function () {
console.log('click');
}); //双击
$('#box').dblclick(function () {
console.log('dblclick');
}); //鼠标按下不松开
$('#box').mousedown(function () {
console.log('mousedown');
}); //鼠标松开
$('#box').mouseup(function () {
console.log('mouseup');
}); //被选元素和子元素被选中时会触发 移入移出
$('#box').mouseover(function() {
console.log('mouseover')
}); $('#box').mouseout(function() {
console.log('mouseout')
}); //只有被选中元素移入时 才会触发
$('#box').mouseenter(function() {
console.log('mouseenter')
}); $('#box').mouseleave(function() {
console.log('mouseleave')
}); $('#box').mousemove(function () {
console.log('mousemove')
}); //获取焦点 失去焦点
$('input[type=text]').focus(function () {
console.log($(this).val());
}); $('input[type=text]').blur(function () {
console.log($(this).val());
}); //键盘按下 弹起
$('input[type=password]').keydown(function () {
console.log($(this).val())
});
$('input[type=password]').keyup(function () {
console.log($(this).val())
}); }) </script>
</html>
三十、表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
<style type="text/css">
.show{
color: red;
} </style>
</head>
<body>
<form action="https://www.luffycity.com">
<select name="sweets" id="1" multiple=''>
<option value="">巧克力</option>
<option value="" selected=''>糖果</option>
<option value="">焦糖</option>
<option value="" selected=''>曲奇饼</option>
<option value="">烧饼</option>
<option value="">麦香饼</option>
<option value="">曲奇饼2</option>
</select> <input type="text" value="hello" id='target'>
<input type="submit" value="Luffy"/>
<input type="button" name="" id="2" value="按钮" /> </form> <input id="other" type="text" value="Trigger the handler">
<!--<textarea name="" id="other" cols="30" rows="10">Trigger the handler</textarea>-->
<!--<div id="other">-->
<!--Trigger the handler-->
<!--</div>--> <div class="show"></div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //change() 事件 //此事件仅限于 input元素 textarea select $('select').change(function () {
console.log($('select option:selected').text()); $('.show').text($('select option:selected').text()); }); //select() 事件
//仅限于用在 input type=text textarea
$('#other').select(function () {
// console.log($(this).text())
console.log($(this).val())
}); //form
$('form').submit(function (ev) {
// alert(111);
ev.preventDefault(); // 阻止默认行为 action 就被阻止了 //form 表单和服务端有很大挂钩
alert(11);
}) </script>
</html>
三十一、jquery的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<button id="btn">演示</button>
<div id="box"> </div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () { $('#btn').click(function () {
$('#box').load('./test.html');
}); //get
$.ajax({
// url:'./data.json',
url:'./test.html',
type:'get', // 默认是 get
// dataType:'json', // 如果不指定 默认自动识别文件类型
// dataType:'text',
success:function (data) {
console.log(data);
},
error:function () { }
}); //post 无法演示 学django 会学
$.ajax({
url:"/course",
type:'post',
data:{
username:'zhangsan',
password:'123'
},
sunccess:function (data) {
if(data.state === 'ok' && data.status === '200'){
//登录成功
}
},
error:function () {
console.log(err);
}
}); }) // 插件 == js
// 组件 = js + css
</script>
</html>
前端开发 - JQuery - 下的更多相关文章
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 前端开发 - JQuery&Bootstrap - 总结
一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器 各种操作和处理 2.定义: 1.Javascr ...
- 前端开发 - JQuery - 上
一.js的缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 前端开发 - jQuery
本节内容 一.jQuery概述 二.选择器 三.操作DOM 四.修改DOM结构 五.事件 六.动画 七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScri ...
- 前端开发—jQuery
jquery简介 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- Web前端开发JQuery框架
JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...
- 第十一章 前端开发-jQuery
11.4.0 jQuery 11.4.1 基本知识 定义: jQuery是一个快速,小巧,功能丰富的JavaScript库 作用:它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, ...
- 前端开发 - JQuery - 中
十四.jquery属性操作 attr prop <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 前端开发 - JavaScript - 下
12.数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- php5共存php7
PHP7与PHP5共存于CentOS7 原文参考 原理 思路很简单:PHP5是通过yum安装的在/usr/,套接字在/var/run/php-fpm.socket,PHP7自己编译装在/usr/loc ...
- Easy UI分页控件修改刷新方法后触发两次请求
今天我在做分页的时候,有这样的一个现象: 我重写了分页的刷新和改变页面大小的方法,发现给服务器提交了两次post,问题出现在哪里的?经过alert调试,发现原因是: 刷新和改变页面大小的事件执行的时候 ...
- Linux curl 模拟form表单提交信息和文件
Linux curl 模拟form表单提交信息和文件 curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...
- javascript -- 事件捕获，事件冒泡
使用js的时候,当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,单击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. 为什么会 ...
- 【BZOJ】1052: [HAOI2007]覆盖问题（贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=1052 首先膜拜题解orz,表示只能想到二分... 贪心就是每一次找到一个最小的能包围所有点的矩阵,然 ...
- 【BZOJ】1058: [ZJOI2007]报表统计（splay+set）
http://www.lydsy.com/JudgeOnline/problem.php?id=1058 当复习一下splay.... 做法很简单..... 观察得知每一次插入一个点只需要维护前后的绝 ...
- 【NOIP模拟题】小象涂色（概率+期望+递推）
表示数学是个渣... 其实只需要推出每个箱子k次以后的颜色为i的概率就能算出期望了.. 对于区间[l, r]的箱子因为是任意颜色且任意取,所以概率分别为1/c和1/2,那么整体概率就为这两个的乘积.根 ...
- MD5的各种实现——也是醉了
MD5即Message-Digest Algorithm 5(信息-摘要算法5).用于确保信息传输完整一致. 是计算机广泛使用的杂凑算法之中的一个(又译摘要算法.哈希算法),主流编程语言普遍已有MD5 ...
- url 模式录制脚本web_concurrent_start和web_concurrent_end
LoadRunner函数中文翻译系列之三--Concurrent Groupweb_concurrent_start 语法: int web_concurrent_start ( [char * Co ...
- Android设计模式之单例模式的七种写法
一 单例模式介绍及它的使用场景 单例模式是应用最广的模式,也是我最先知道的一种设计模式.在深入了解单例模式之前.每当遇到如:getInstance()这样的创建实例的代码时,我都会把它当做一种单例模式 ...