文章目录
前言
对于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>