文章目录
前言
对于jQuery基础的更新，这篇文章是最后一篇。对于本章的内容我认为比较重要的知识点，在此梳理和总结。主要从jQuery的事件，动画，工具和事件对象这几个方面来进行。
一、jQuery的事件
1.内容
| 常用事件 | 描述 |
|---|---|
| .off() | 移除一个事件处理函数 |
| .on() | 在选定的元素上绑定一个或者多个事件处理函数 |
| .one() | 为元素的事件添加处理函数。。处理函数在每个元素上每种事件类型最多执行一次 |
| .trigger() | 根据绑定到匹配元素的给定事件类型执行所有的处理程序和行为。 |
| .hover() | 将两个事件函数绑定到匹配元素上， 分别当鼠标指针进入和离开时被执行。将一个单独事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。（鼠标事件/触发事件） |
| .mouseover() | 为JavaScript的"mouseover"事件绑定一个处理函数，或者触发元素上的该事件（支持事件冒泡） |
| .click() | 为JavaScript的“click”事件绑定一个处理器，或者触发元素上的“click”事件 |
（1）.on()
$('#btn').on('click',function(){
alert("on事件") ;
}) ;
（2）.off()
$('#btn1').click(function(){
$('#btn').off("click")
}) ;
（3）.one()
$('#btn2').click(function(){
$('div').one("click",function(){
alert($(this).html()) ;
}) ;
}) ;
（4）.trigger()
$('#btn3').click(function(){
$('#btn').trigger("click") ;
}) ;
（5）.hover()
$('#btn4').click(function(){
$('div').hover(function(){
$(this).css("color","red") ;
},function(){
$(this).css("color","green")
})
}) ;
（6）.mouseover()
$('#p').mouseover(function(){
$(this).width(240).height(300).css("background-color","deeppink")
}) ;
（7）.click()
$('#p').click(function(){
alert($(this).html()) ;
}) ;
二、jQuery的动画
1.内容
这里我直接以代码的形式展现出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
$(function(){
$('#btn1').click(function(){
//$('#img').hide() ;
// $('#img').hide("slowly") ;
$('#img').hide(3000) ;
}) ;
$('#btn2').click(function(){
//$('#img').show() ;
//$('#img').show("slowly") ;
$('#img').show(5000) ;
}) ;
$('#btn3').click(function(){
//$('#img').show() ;
//$('#img').show("slowly") ;
$('#img').toggle(5000) ;
}) ;
$('#btn4').click(function(){
$('#img').slideUp(3000) ;
}) ;
$('#btn5').click(function(){
$('#img').slideDown(5000) ;
}) ;
$('#btn6').click(function(){
$('#img').slideToggle(5000) ;
}) ;
$('#btn7').click(function(){
$('#img').fadeOut(3000) ;
}) ;
$('#btn8').click(function(){
$('#img').fadeIn(5000) ;
}) ;
$('#btn9').click(function(){
$('#img').fadeToggle(5000) ;
}) ;
$('#btn10').click(function(){
$('#img').fadeTo(2000,0.2) ;
}) ;
})
</script>
<body>
<img src = "./img/1.jpg" width="200" height="200" id = "img"><br>
<button id = "btn1">隐藏图片(hide)</button>
<button id = "btn2">显示图片(show)</button>
<button id = "btn3">显示或隐藏图片</button>
<button id = "btn4">隐藏图片(slideup)</button>
<button id = "btn5">显示图片(slidedown)</button>
<button id = "btn6">显示或隐藏图片(slideToggle)</button>
<button id = "btn7">淡出效果(fadeOut)</button>
<button id = "btn8">淡入效果(fadeIn)</button>
<button id = "btn9">淡入淡出(fadeToggle)</button>
<button id = "btn10">淡入到指定的透明度(fadeTo)</button>
</body>
</html>
三.jQuery的自定义动画（.animate()）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
position: absolute;
left:300px;
}
</style>
</head>
<script>
$(function(){
// 在一个动画中同时应用三种类型的效果
//效果1：得到的元素从width，height,fontsize放大
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
//效果2：点击右按钮，得到的元素向左缓慢的移动500px
$("#right").click(function(){
$("#block").animate({left: '+500px'}, "slow");
});
//效果3：点击左按钮，得到的元素向左缓慢移动
$("#left").click(function(){
let left = $('#block').css('left') ;
left = left.substr(0,left.length-2) ;
$("#block").animate({left: `${left-200}px`}, "slow");
});
})
</script>
<body>
<button id="go"> Run</button><button id="left">«</button> <button id="right">»</button>
<div id="block">你好呀！自定义动画</div>
</body>
</html>
四.jQuery的动画案例（淡入淡出）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
position: absolute;
left: 300px;
}
</style>
</head>
<script>
//方法一：使用平常的方法实现
$(function() {
$('#btn').click(function() {
//此处可以写函数fun();
fun();
});
})
let n = 1;
let flag = true;//控制变化的方向，true表示有完全不透明到完全透明
function fun() {
if (flag) {
n = n - 0.2;
if (n <= 0) {
n = 0;
flag = false;
}
} else {
n = n + 0.1
if (n > 1) {
n = 1;
flag = true;
}
}
$('#img').fadeTo(1000,n)
setTimeout("fun()",1000) ;
}
//使用jQuery中淡入淡出的方法
$(function() {
$('#btn').click(function() {
$('#img').fadeOut(3000) ;
$('#img').fadeIn(3000) ;
//定时器
setInterval(()=>{
//console.log("aaaaaaaaaa")
$('#img').fadeOut(3000) ;
$('#img').fadeIn(3000) ;
},6000) ;
});
})
function fun(){}
</script>
<body>
<img src="img/2.jpg" alt="" id="img" width="300" height="300"><br>
<button id="btn">开始</button>
</body>
</html>
五.jQuery的工具（常用）
1.jquery.each() :一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
$('#btn').click(function() {
var ds = $('[name]')
alert(ds.length) ;
/* ds.each(function(){
alert($(this).html()) ;
}) ; */
$.each(ds,(index,obj) =>{ //此处obj是DOM对象
//console.log(index,obj)
alert($(obj).html()) ;
})
});
2.jquer.trim():去掉字符串起始和结尾的空格
$('#btn1').click(function(){
console.log("abcde","abcde".length)
console.log(" abcde "," abcde ".length," abcde ".trim().length)
console.log(" abcde "," abcde ".length,$.trim(" abcde ").length)
}) ;
六.jQuery的事件对象（常用）
| 事件对象 | 描述 |
|---|---|
| event.stopPropagation() | 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 |
| event.preventDefault() | 如果调用这个方法，默认事件行为将不会触发 |
| event.targent | 触发事件的DOM元素 |
| event.currentTarget | 在事件冒泡过程中的当前DOM元素 |
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
width:100px;
height: 5rem;
background-color: hotpink;
}
</style>
</head>
<script>
$(function() {
$('#btn').click(function(e) {
console.log(event,e)
console.log(e.target) //获取到是谁发生了单击事件： 事件源
console.log(e.currentTarget)
e.stopPropagation() ;
});
$('#div').click(function(){
console.log("我是jquery按钮对象的div")
}) ;
$('#a').click(function(e){
console.log("你点击了超链接") ;
e.preventDefault() //阻止默认行为
}) ;
})
function fun(e){
console.log(e)
console.log(e.screenX,e.clientX)
//e.cancelBubble = true ;
//e.stopPropagation()
}
function fun1(){
console.log("我是div对象")
}
</script>
<body>
<div onclick = "fun1()"><button onclick = "fun(event)">传统的DOM中事件对象</button></div><br>
<div id = "div"><button id= "btn">演示jquery的事件对象</button></div><br>
<a href = "http://www.sohu.com" id = "a">点击按钮会阻止默认行为</a>
</body>
</html>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
