jQuery的事件以和动画
//以下内容是jQuery中的一部分(仅供参考)
- 事件
- 加载Dom两种方式
加载事件我们有两种方式,一种就是javascript直接写:window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})
-
-
- window.onload方式
-
window.onload:在整个月面中所有内容加载完成后,才会执行事件。
window.οnlοad=function(){
console.info("window.onload");
}
-
-
- jQuery方式
-
$(function(){}):页面结构回执完成后,就会执行。
$(function(){
console.info("jQuery");
})
全拼写法:ready
$(document).ready(function(){
console.info("全拼写法");
})
在理论上面jQuery方式的加载事件要比window.onload方式的加载事件先执行。但是大家要注意。在jQuery类库的不同版本中效果可能不太一样(1.0、2.0、3.0),和浏览器也有关系
-
-
- 案例1:测试两种方式的区别【个数 顺序】
-
区别1:顺序,上面我们已经测试了,理论上先执行jQuery方式。但是也有可能会受到jQuery类库版本或者浏览器的影响。
区别2:个数,我们可以两种方式 各写三遍来看一下结果
-
window.onload=function(){
-
-
console.info("window.onload1");
-
-
}
-
-
window.onload=function(){
-
-
console.info("window.onload2");
-
-
}
-
-
window.onload=function(){
-
-
console.info("window.onload3");
-
-
}
结果只有最后一句话
我们再来看jQuery方式的:
-
$(function(){
-
-
console.info("jQuery1");
-
-
})
-
-
$(function(){
-
-
console.info("jQuery2");
-
-
})
-
-
$(function(){
-
-
console.info("jQuery3");
-
-
})
结果三句话全都打印
-
- 绑定事件两种方式
- 元素.on(“事件名”,function(){})
- 绑定事件两种方式
同bind,on可以替换bind两种写法一样,效果也一样
on与off 结合使用,bind与unbind结合使用
案例1:鼠标点击
$(".big").on("click",function(){
console.info("点击了");
})
案例2:鼠标悬停
-
//鼠标进来 事件 方式1
-
-
$(".big").on("mouseenter",function(){
-
-
console.info("鼠标进来了");
-
-
})
-
-
//鼠标出去 事件 方式1
-
-
$(".big").on("mouseleave",function(){
-
-
console.info("鼠标出去了");
-
-
})
-
-
- 元素.事件名(function(){})
-
案例1:鼠标点击
$(".big").click(function(){
console.info("又点击了");
})
案例2:鼠标悬停
//鼠标进来 事件 方式2
$(".big").mouseenter(function(){
console.info("鼠标进来了");
})
//鼠标出去 事件 方式2
$(".big").mouseleave(function(){
console.info("鼠标出去了")
})
-
- 合成时间/事件切换
事件组合一起使用
-
-
- hover():鼠标悬停合成事件
-
hover:由两个函数组成,鼠标进来和鼠标出去两个动作。
我们来看一下代码怎么写:有网页代码如下:
-
<body>
-
-
<h2>好消息</h2>
-
-
<div class="big">
-
-
这个是盒子
-
-
</div>
-
-
</body>
-
-
案例代码:
-
-
$(".big").hide();//隐藏
-
-
$("h2").hover(function(){
-
-
$(".big").show();
-
-
},function(){
-
-
$(".big").hide();
-
-
})
效果鼠标移动到h2标签就显示盒子,离开就隐藏盒子
-
-
- toggle():鼠标点击事件
-
toggle():鼠标的点击合成事件,同样是由两个函数合成。点击点击轮回执行两个函数
案例代码:
-
//toggle,鼠标点击 显示 和隐藏
-
-
$("h2").toggle(function(){
-
-
$(".big").show();
-
-
},function(){
-
-
$(".big").hide();
-
-
})
点击第一次显示盒子,点击第二次隐藏盒子,再点就显示,再点就隐藏 循环效果。
-
- 事件传播(事件冒泡)
- 传播:小---->中---->大
- 事件传播(事件冒泡)
事件传播,什么是事件传播呢?咱们现在网页代码里面加个p标签
-
<body>
-
-
<h2>好消息</h2>
-
-
<div class="big">
-
-
<br>
-
-
<p>今天是个好日子</p>
-
-
</div>
-
-
</body>
-
-
现在我们给P标签添加一个点击事件
-
-
//给p标签添加点击事件
-
-
$("p").click(function(){
-
-
console.info("p被点了");
-
-
})
现在点击p标签的内容 就可以触发事件,点击页面的其它位置不会触发。我们再给div添加点击事件
//给div添加点击事件
$(".big").click(function(){
console.info("div被点了");
})
现在我们点div会触发 div的点击事件,如果点击了p标签就会触发到两个事件,一个是p自己的点击事件,一个是div的点击事件。因为p是在div中,属于div的一部分。
那么现在我们再给整个页面body添加点击事件
//给body添加点击事件
$("body").click(function(){
console.info("body被点了");
})
现在我们点击div之外的地方 只会执行body的点击事件,点击p之外,div之内的位置,就会执行到div和body的两个事件,如果点击了p的内容,就是执行到 p、div、body三个事件。这种情况就属于是事件的传播,从小往大传播
-
-
- 阻止传播:事件后面加上 return false
-
可是如果,我们想要这三个事件单独执行呢?我点击p就只执行p的点击事件,点击p以外,div以内的就只执行div的点击事件。该怎么办呢?很简单 只需要在函数内的最后写上return false 就OK了
$("p").click(function(){
console.info("p被点了");
return false;
})
现在再点击p 就只会执行p的点击事件了
-
- 事件坐标
我们以鼠标移动为例,在鼠标移动的同时获得鼠标的位置,这里的事件就是鼠标移动事件
-
-
- offsetX:当前元素左上角
-
案例代码:
$(".big").mousemove(function(event){
//event:事件
var x = event.offsetX;//获得鼠标x坐标
var y = event.offsetY;//获得鼠标y坐标
$("#xy").text(x "," y);
})
给div添加鼠标移动事件,求出以div左上角为0,0 起始点的 鼠标位置
-
-
- clientX:窗口左上角
-
案例代码:
$(".big").mousemove(function(event){
//event:事件
var x = event.clientX;//获得鼠标x坐标
var y = event.clientY;//获得鼠标y坐标
$("#xy").text(x "," y);
})
给div添加鼠标移动事件,求出以窗口左上角为0,0 起始点的 鼠标位置
-
-
- pageX:网页左上角
-
$(".big").mousemove(function(event){
//event:事件
var x = event.pageX;
var y = event.pageY;
$("#xy").text(x "," y);
})
给div添加鼠标移动事件,求出以网页左上角为0,0 起始点的 鼠标位置
-
- 移除事件
- 元素.unbind(“事件名”);
- 移除事件
移出事件,直接对元素使用unbind 或 off 来移出指定的事件
例如在某些情况下,按钮只能点击一次,点击一次后再点击就无效
案例:按钮只能点击一次
$("#myBtn").click(function(){
console.info("试试就试试");
//上面代码执行后 就移除按钮的点击事件
$("#myBtn").unbind("click");
})
这样,按钮就只能点击一次。之后再点击就无效
注意:一般情况,不会使用unbind,推荐使用变量控制事件
案例:点击按钮偶数次可以,奇数次则失效
var i=0;
$("#myBtn").click(function(){
i ;
if(i%2==0){
console.info("试试就试试" i);
}
})
点击偶数次就打印,奇数次就没有效果
案例:按钮只允许点击一次 one
$("#myBtn").one("click",function(){
console.info("点了");
})
- 动画
动画分为基本、滑动、淡入淡出、自定义
-
- 基本
基本动画有显示,隐藏,切换。我们用三个按钮来分别实现效果
<input type="button" name="" id="show" value="显示" />
<input type="button" name="" id="hide" value="隐藏" />
<input type="button" name="" id="showAndHide" value="显示/隐藏" />
-
-
- 显示:show(time);
-
$("#show").click(function(){
$(".big").show(1000);
})
点击按钮就显示div
-
-
- 隐藏:hide(time);
-
$("#hide").click(function(){
$(".big").hide(1000);
})
点击按钮就隐藏div
-
-
- 切换:toggle(time);
-
$("#showAndHide").click(function(){
$(".big").toggle(1000);
})
点击按钮如果div是隐藏的就显示,如果是显示的就隐藏
-
- 滑动
滑动有收缩、展开、收缩 展开切换。我们同样的用三个按钮来分别实现效果
滑动效果是上下效果,如果是收缩,就从下往上锁。如果是展开就是从上往下展开
<input type="button" name="" id="slideDown" value="展开" />
<input type="button" name="" id="slideUp" value="收缩" />
<input type="button" name="" id="slideToggle" value="展开/收缩" />
-
-
- slideUp(time):动画收缩(向上滑动)---->隐藏
-
$("#slideUp").click(function(){
$(".big").slideUp(1000);
})
点击按钮就从下往上收缩div
-
-
- slideDown(time):动画展开(向下滑动)----->显示
-
$("#slideDown").click(function(){
$(".big").slideDown(1000);
})
点击按钮就从上往下展开div
-
-
- slideToggle(time):动画切换
-
$("#slideToggle").click(function(){
$(".big").slideToggle(1000);
})
点击按钮,如果div是展开的就从下往上收缩div,如果是收缩的,就从上往下展开
-
- 淡入淡出(透明度)
淡入淡出同样有三种,fadeIn、fadeOut、fadeToggle.我们一样用三个按钮分别实现
<input type="button" name="" id="fadeIn" value="淡入" />
<input type="button" name="" id="fadeOut" value="淡出" />
<input type="button" name="" id="fadeToggle" value="淡入/淡出" />
-
-
- fadeIn(time):淡入(透明度减少)
-
$("#fadeIn").click(function(){
$(".big").fadeIn(1000);
})
点击按钮div从透明逐渐显示
-
-
- fadeOut(time):淡出(透明度增加)
-
$("#fadeOut").click(function(){
$(".big").fadeOut(1000);
})
点击按钮div从显示,逐渐透明
-
-
- fadeToggle(time):切换
-
$("#fadeToggle").click(function(){
$(".big").fadeToggle(1000);
})
点击按钮,如果div是显示的就逐渐透明,如果是透明的就逐渐显示
-
- 自定义动画
通过设置使用animate来设置元素的属性值,来实现效果
-
-
- 缩放,元素.animate({属性:属性值},time)
-
缩放可以收缩,可以放大,我们用两个按钮来演示效果
<input type="button" name="" id="bigBtn" value="变大" />
<input type="button" name="" id="smallBtn" value="变小" />
案例:放大
$("#bigBtn").click(function(){
$(".big").animate({
width:300,
height:300
},1000)
})
点击按钮就在1秒内div放大到宽300,高300
案例:收缩
$("#smallBtn").click(function(){
$(".big").animate({
width:200,
height:200
},1000)
})
点击按钮就在1秒内div收缩到宽200,高200
-
-
- 移动,元素.animate({属性:属性值},time)
-
通过来设置元素的top,left属性值,来实现移动元素,我们以div来演示
<div class="big" style="position: absolute; left: 100px; top: 100px;">
</div>
<input type="button" name="" id="runBtn" value="走你" />
案例代码:
$("#runBtn").click(function(){
$(".big").animate({
left:10,
top:10
},1000)
})
点击按钮,div移动到top 10,left 10的位置
-
-
- 移动(本元素),距离
-
通过用top=” =” top=”-=” 来直接对元素本身的属性赋值,我们用一个按钮来演示效果
<input type="button" name="" id="topBtn" value=" =" />
案例代码:
$("#topBtn").click(function(){
$(".big").animate({
left:"-=50",
top:" =50"
},1000)
})
点击按钮,在本元素的left属性本身减50,top属性本身加50,移动本元素
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhifbcgg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22