Jquery
jquery事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
绑定事件的两种方式
第一种
$('div').click(function(){
事件代码
})
第二种
$('div').on('事件名',function(){
事件代码
})
hover:鼠标悬浮事件
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：
与window.onload的区别
window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
注册示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
<p><label for="i1">username:
<input type="text" id="i1" name="username">
<span class="errors"></span>
</label></p>
<p><label for="i2">password:
<input type="password" id="i2" name="password">
<span class="errors"></span>
</label></p>
<input type="submit" value="注册" id="d1">
</form>
<script>
// 获取按钮标签
var $b1Ele = $('#d1');
// 给按钮标签绑定点击事件
// 原生js b1ELe.onclick = function(){}
$b1Ele.click(function () {
// 获取到用户输入的内容
var $userName = $('#i1');
var $passWord = $('#i2');
// 判断上面标签的value是否为空
if ($userName.val().length == 0){
// 找到username对于的span标签添加提示信息
$('.errors').first().text('用户名不能为空')
}
// 判断上面标签的value是否为空
if ($passWord.val().length == 0){
// 找到username对于的span标签添加提示信息
$('.errors').last().text('密码不能为空')
}
return false;
})
</script>
</body>
</html>
属性的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20岁超越30岁，40岁，50岁的人</p>
<p>衣锦还乡</p>
<p>技多不压身</p>
<input type="checkbox" name="hobby" id="i1" checked>读书
<input type="checkbox" name="hobby" id="i2">写字
<input type="checkbox" name="hobby" id="i3">吹牛逼
</body>
</html>
$('#i1').attr('checked'); #用户选了（浏览器）也是undefined ，需要在html文件中修改
"checked"
$('#i1').prop('checked');
true
$('#i2').prop('checked');
false
$('#i3').prop('checked');
true#推荐使用，用户在浏览器选了，动态获取，返回布尔值
文档的处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span></span>
<div>div
<span>div>span</span>
<p>div>p
<a href="">div>p>a</a>
</p>
<span>div>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>
文档处理
var pEle = document.createElement('p');
undefined
pEle.innerText = 'wwww';
"wwww"
var $divEle = $('div'); jquery转原生的js
undefined
$divEle.append(pEle); 添加在尾部
k.fn.init [div, prevObject: k.fn.init(1)]
$(pEle).appendTo($divEle); 也是添加在末尾，添加一次就不能添加了
k.fn.init [p, prevObject: k.fn.init(1)]
var pEle = document.createElement('p');
undefined
pEle.innerText = '淡定';
"淡定"
var $divEle = $('div');
undefined
$divEle.repalceWith('pEle');
VM486:1 Uncaught TypeError: $divEle.repalceWith is not a function
at <anonymous>:1:9
(anonymous) @ VM486:1
$divEle.replaceWith('pEle');
k.fn.init [div, prevObject: k.fn.init(1)]
文档加载
三种方式:
第一种(了解):
$(document).ready(function(){
// 在这里写你的JS代码...
})
第二种(了解):
$(function(){
// 你在这里写你的代码
})
第三种:
直接在body内部最下方书写代码
将标签当做自己的临时小仓库
可以让任何标签帮你存储数据
克隆事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
button {
background-color: #2b669a;
}
</style>
</head>
<body>
<button>屠龙宝刀，点击就送</button>
<script>
// $('button').click(function(){
//
// })
// $('button').on('click',function(){
// console.log(this) //this指代是当前被操作对象，并且是原生的js对象
// })
$('button').on ('click',function(){
$(this).clone(true).insertAfter (this) //没加true只克隆标签和样式，得到身体，没有灵魂，
// 点击复制的button不能复制,只能点击第一个
//加入true得到身体也得到灵魂(点击的时候也可以复制)
})
</script>
</body>
</html>
克隆标签:默认情况下只克隆标签的文本和样式不克隆事件
悬浮事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p>来玩啊老弟</p>
<script>
// $('p').on('hover',function(){
//
// })
$('p').hover(function(){
alert('how much')
}
,function(){
alert('welcome next time')
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
$('input').on('input',function () {
console.log(this.value)
})
</script>
</body>
</html>
取消标签自带的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<from action="">
<input type="submit">
</from>
<script>
$('input').click(function(){
alert('123');
//return false 第一种
e.preventDefault(); //不再刷新页面 第二种
})
</script>
</body>
</html>
取消标签自带的事件
return false
$('button').on('click',function () {
console.log(this)
})
this指代的是当前被操作对象(并且是原生的js对象)
$('button').on('click',function () {
$(this).clone().insertAfter(this);
})
取消标签自带的事件有两种方式
第一种:
return false
第二种:
$('input').click(function (e) {
alert(123);
// 1. return false
// 2. e.preventDefault();
})
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../day53/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script src="../day53/bootstrap/js/bootstrap.min.js"></script>
<script>
//点击span 又会触发div的点击事件和p的点击事件
$('div').click(function(){
alert('div')
});
$('p').click(function(){
alert('p')
});
$('span').click(function(e){ //需要加形参e
alert('span');
e.stopPropagation() //加了之后就不会再往上一级汇报
})
</script>
</body>
</html>
事件冒泡:
事件会一层层往上一级汇报
如何组织事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
注意需要加上形参e
$('p').click(function (e) {
alert('p');
e.stopPropagation()
});
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button>我是23号级使</button>
<script>
// $('button').click(function(){
// alert('123')
// })
// 这个点击事件只能是第一次的button,后续创建的button不会再触发这个事件，要用事件委托
$('body').on('click','button',function(){ //点击body会将这个传给button，下面的代码就是button执行的
alert('123')
})
</script>
</body>
</html>
检查测试
var bELe=document.createElement('button');
undefined
bELe.innerText = '来宾两位';
"来宾两位"
var bodyEle=document.getElementsByTagName('body')[0];
undefined
bodyEle.appendChild(bELe);
事件委托:
将触发的事件委托给内部某个标签去执行
无论改标签是初始化就有还是后期动态添加都可以执行
$('body').on('click','button',function () {
alert(123)
})
jquery动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://img2.imgtn.bdimg.com/it/u=522260183,682735947&fm=26&gp=0.jpg" alt="">
</body>
</html>
//检查里输入进行检测
//$('msg').hide(3000);
//$('msg').show(3000);
//$('msg').slideDown(5000);
补充语法
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
010
120
230
340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
伏笔...
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
模态框编辑的数据回填表格
each循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
检查中输入测试 (以下是没写div时的报错，查询方法一样)
$.each($('div'),function(index){})
k.fn.init [prevObject: k.fn.init(1)]
$.each($('div'),function(index){console.log(index)});
k.fn.init [prevObject: k.fn.init(1)]length: 0prevObject: k.fn.init [document]__proto__: Object(0)
$.each($('div'),function(index){console.log($('div')[index])});
k.fn.init [prevObject: k.fn.init(1)]length: 0prevObject: k.fn.init [document]__proto__: Object(0)
$.each($('div'),function(index){console.log($(this)[index])}); #this并不是div,,div并不是当前触发事件
k.fn.init [prevObject: k.fn.init(1)]
$('div').each(function(){console.log(this)})# this 是div
标签存储数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p></p>
</body>
</html>
标签储存数据
$('p').removeData('username');
k.fn.init [p, prevObject: k.fn.init(1)]
$('p').data('username');
undefined