jQuery中的一些事件以及动画

2022-11-18 20:27:48 浏览数 (1)

//以下内容是jQuery中的一部分（仅供参考） 

  1. 事件
    1. 加载Dom两种方式

加载事件我们有两种方式，一种就是javascript直接写：window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})

      1. window.onload方式

window.onload：在整个月面中所有内容加载完成后，才会执行事件。

window.οnlοad=function(){

console.info("window.onload");

}

      1. jQuery方式

$(function(){})：页面结构回执完成后，就会执行。

$(function(){

console.info("jQuery");

})

全拼写法：ready

$(document).ready(function(){

console.info("全拼写法");

})

在理论上面jQuery方式的加载事件要比window.onload方式的加载事件先执行。但是大家要注意。在jQuery类库的不同版本中效果可能不太一样(1.0、2.0、3.0),和浏览器也有关系

      1. 案例1：测试两种方式的区别【个数 顺序】

区别1：顺序，上面我们已经测试了，理论上先执行jQuery方式。但是也有可能会受到jQuery类库版本或者浏览器的影响。

区别2：个数，我们可以两种方式 各写三遍来看一下结果

代码语言：javascript复制
window.onload=function(){

console.info("window.onload1");

}

window.onload=function(){

console.info("window.onload2");

}

window.onload=function(){

console.info("window.onload3");

}

结果只有最后一句话

我们再来看jQuery方式的：

代码语言：javascript复制
$(function(){

console.info("jQuery1");

})

$(function(){

console.info("jQuery2");

})

$(function(){

console.info("jQuery3");

})

结果三句话全都打印

    1. 绑定事件两种方式
      1. 元素.on(“事件名”,function(){})

同bind，on可以替换bind两种写法一样，效果也一样

on与off 结合使用，bind与unbind结合使用

案例1：鼠标点击

$(".big").on("click",function(){

console.info("点击了");

})

案例2：鼠标悬停

代码语言：javascript复制
//鼠标进来 事件 方式1

$(".big").on("mouseenter",function(){

console.info("鼠标进来了");

})

//鼠标出去 事件 方式1

$(".big").on("mouseleave",function(){

console.info("鼠标出去了");

})
      1. 元素.事件名(function(){})

案例1：鼠标点击

$(".big").click(function(){

console.info("又点击了");

})

案例2：鼠标悬停

//鼠标进来 事件 方式2

$(".big").mouseenter(function(){

console.info("鼠标进来了");

})

//鼠标出去 事件 方式2

$(".big").mouseleave(function(){

console.info("鼠标出去了")

})

    1. 合成时间/事件切换

事件组合一起使用

      1. hover():鼠标悬停合成事件

hover:由两个函数组成，鼠标进来和鼠标出去两个动作。

我们来看一下代码怎么写：有网页代码如下：

代码语言：javascript复制
<body>

<h2>好消息</h2>

<div class="big">

这个是盒子

</div>

</body>

案例代码：

$(".big").hide();//隐藏

$("h2").hover(function(){

$(".big").show();

},function(){

$(".big").hide();

})

效果鼠标移动到h2标签就显示盒子，离开就隐藏盒子

      1. toggle():鼠标点击事件

toggle()：鼠标的点击合成事件，同样是由两个函数合成。点击点击轮回执行两个函数

案例代码：

代码语言：javascript复制
//toggle,鼠标点击 显示 和隐藏

$("h2").toggle(function(){

$(".big").show();

},function(){

$(".big").hide();

})

点击第一次显示盒子，点击第二次隐藏盒子，再点就显示，再点就隐藏 循环效果。

    1. 事件传播(事件冒泡)
      1. 传播：小---->中---->大

事件传播，什么是事件传播呢？咱们现在网页代码里面加个p标签

代码语言：javascript复制
<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三个事件。这种情况就属于是事件的传播，从小往大传播

      1. 阻止传播：事件后面加上 return false

可是如果，我们想要这三个事件单独执行呢？我点击p就只执行p的点击事件，点击p以外，div以内的就只执行div的点击事件。该怎么办呢？很简单 只需要在函数内的最后写上return false 就OK了

$("p").click(function(){

console.info("p被点了");

return false;

})

现在再点击p 就只会执行p的点击事件了

    1. 事件坐标

我们以鼠标移动为例，在鼠标移动的同时获得鼠标的位置，这里的事件就是鼠标移动事件

      1. offsetX:当前元素左上角

案例代码：

$(".big").mousemove(function(event){

//event:事件

var x = event.offsetX;//获得鼠标x坐标

var y = event.offsetY;//获得鼠标y坐标

$("#xy").text(x "," y);

})

给div添加鼠标移动事件，求出以div左上角为0,0 起始点的 鼠标位置

      1. clientX:窗口左上角

案例代码：

$(".big").mousemove(function(event){

//event:事件

var x = event.clientX;//获得鼠标x坐标

var y = event.clientY;//获得鼠标y坐标

$("#xy").text(x "," y);

})

给div添加鼠标移动事件，求出以窗口左上角为0,0 起始点的 鼠标位置

      1. pageX:网页左上角

$(".big").mousemove(function(event){

//event:事件

var x = event.pageX;

var y = event.pageY;

$("#xy").text(x "," y);

})

给div添加鼠标移动事件，求出以网页左上角为0,0 起始点的 鼠标位置

    1. 移除事件
      1. 元素.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("点了");

})

  1. 动画

动画分为基本、滑动、淡入淡出、自定义

    1. 基本

基本动画有显示，隐藏，切换。我们用三个按钮来分别实现效果

<input type="button" name="" id="show" value="显示" />

<input type="button" name="" id="hide" value="隐藏" />

<input type="button" name="" id="showAndHide" value="显示/隐藏" />

      1. 显示：show(time);

$("#show").click(function(){

$(".big").show(1000);

})

点击按钮就显示div

      1. 隐藏：hide(time);

$("#hide").click(function(){

$(".big").hide(1000);

})

点击按钮就隐藏div

      1. 切换：toggle(time);

$("#showAndHide").click(function(){

$(".big").toggle(1000);

})

点击按钮如果div是隐藏的就显示，如果是显示的就隐藏

    1. 滑动

滑动有收缩、展开、收缩 展开切换。我们同样的用三个按钮来分别实现效果

滑动效果是上下效果，如果是收缩，就从下往上锁。如果是展开就是从上往下展开

<input type="button" name="" id="slideDown" value="展开" />

<input type="button" name="" id="slideUp" value="收缩" />

<input type="button" name="" id="slideToggle" value="展开/收缩" />

      1. slideUp(time)：动画收缩(向上滑动)---->隐藏  

$("#slideUp").click(function(){

$(".big").slideUp(1000);

})

点击按钮就从下往上收缩div

      1. slideDown(time)：动画展开(向下滑动)----->显示

$("#slideDown").click(function(){

$(".big").slideDown(1000);

})

点击按钮就从上往下展开div

      1. slideToggle(time)：动画切换

$("#slideToggle").click(function(){

$(".big").slideToggle(1000);

})

点击按钮，如果div是展开的就从下往上收缩div，如果是收缩的，就从上往下展开

    1. 淡入淡出(透明度)

淡入淡出同样有三种，fadeIn、fadeOut、fadeToggle.我们一样用三个按钮分别实现

<input type="button" name="" id="fadeIn" value="淡入" />

<input type="button" name="" id="fadeOut" value="淡出" />

<input type="button" name="" id="fadeToggle" value="淡入/淡出" />

      1. fadeIn(time)：淡入(透明度减少)

$("#fadeIn").click(function(){

$(".big").fadeIn(1000);

})

点击按钮div从透明逐渐显示

      1. fadeOut(time)：淡出(透明度增加)

$("#fadeOut").click(function(){

$(".big").fadeOut(1000);

})

点击按钮div从显示，逐渐透明

      1. fadeToggle(time)：切换

$("#fadeToggle").click(function(){

$(".big").fadeToggle(1000);

})

点击按钮，如果div是显示的就逐渐透明，如果是透明的就逐渐显示

    1. 自定义动画

通过设置使用animate来设置元素的属性值，来实现效果

      1. 缩放，元素.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

      1. 移动，元素.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的位置

      1.  移动(本元素)，距离

通过用top=” =”  top=”-=” 来直接对元素本身的属性赋值,我们用一个按钮来演示效果

<input type="button" name="" id="topBtn" value=" =" />

案例代码:

$("#topBtn").click(function(){

$(".big").animate({

left:"-=50",

top:" =50"

},1000)

})

点击按钮，在本元素的left属性本身减50，top属性本身加50，移动本元素

ide jquery

0 人点赞