jQuery事件与动态效果

一:阻止后续事件执行
二:阻止事件冒泡
三:事件委托
- - 1.什么是事件委托？
  - 2.后面动态创建的演示
四:点赞动态展示
五:未读信息(徽章)
六:页面加载
七：动画效果

一:阻止后续事件执行

1.推荐使用阻止事件

return false

2.未使用阻止后续事件执行

<body>

<!--form表单-->

<form action="">

    <span id="d1" style="color: red"></span>

 <!--提交按钮 刷新页面  本质触发提交动作 把form表单数据打包发送到 后端 并且刷新-->

    <input type="submit" id="d2">

</form>

<script>

    <!--绑定点击事件-->       <!--方式2 需要加参数-->

    $('#d2').click(function (e) {

    // 本身submit 还有一个事件需要执行 submit刷新 所有目前有两个事件 会停止该事件

    $('#d1').text('宝贝 你能看到我吗？')

    })

</script>

</body>

3.使用阻止后续事件执行

<body>

<!--form表单-->

<form action="">

    <span id="d1" style="color: red"></span>

 <!--提交按钮 刷新页面  本质触发提交动作 把form表单数据打包发送到 后端 并且刷新-->

    <input type="submit" id="d2">

</form>

<script>

    <!--绑定点击事件-->       <!--方式2 需要加参数-->

    $('#d2').click(function (e) {

    // 本身submit 还有一个事件需要执行 submit刷新 所有目前有两个事件 会停止该事件

        $('#d1').text('宝贝 你能看到我吗？')

        // 阻止标签后续事件的执行 方式1 (推荐使用第一种)

        return false

        // 阻止标签默认的事件 方式2 (只能 阻止标签默认的事件)

        // e.preventDefault()

    })

</script>

</body>

二:阻止事件冒泡

1.什么是事件冒泡？

div包了p包了span

比喻介绍:

当span被点击事件执行->会向上一级p标签汇报自己被点击了 p标签会自己查看是否有点击事件

有则自动执行 在向上一级div标签汇报 div标签也会查看自己是否有点击事件 有则自动执行

该操作叫作 《事件冒泡》

2.未阻止事件冒泡

以下情况 称之为事件冒泡

3.阻止事件冒泡

<body>

<!--div包了p包了span-->

<!-- 当span被点击事件执行->会向上一级p标签汇报自己被点击了 p标签会自己查看是否有点击事件

有则自动执行 在向上一级div标签汇报 div标签也会查看自己是否有点击事件 有则自动执行

该操作叫作 《事件冒泡》-->

<div id="d1">div

    <p id="d2">div>p

        <span id="d3">span</span>

    </p>

</div>

<script>

    $('#d1').click(function () {

        alert('div')

    })

    $('#d2').click(function () {

        alert('p')

    })                 // 方式2 参数

    $('#d3').click(function (e) {

        alert('span')

    })

</script>

</body>

4.2.阻止冒泡事件

return false		: 阻止事件冒泡

<body>

<div id="d1">div

    <p id="d2">div>p

        <span id="d3">span</span>

    </p>

</div>

<script>

    $('#d1').click(function () {

        alert('div')

    })

    $('#d2').click(function () {

        alert('p')

    })                 // 方式2 参数

    $('#d3').click(function (e) {

        alert('span')

        // 阻止事件冒泡 解决事件往上报 方式1

        return false

        // // 阻止事件冒泡 方式2

        // e.stopPropagation()

    })

</script>

</body>

三:事件委托

1.什么是事件委托？

在指定范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的。

<body>

<button>是兄弟 就来砍我！！！</button>

<script>

    // 事件委托

    // body内所有的点击事件委托给button触发

    $('body').on('click','button',function () {

      // 在指定范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的

        alert('别砍了 疼！！！')

    })

</script>

</body>

2.后面动态创建的演示

四:点赞动态展示

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>点赞动画示例</title>

     <!--bootstrap引入 CSS CDN-->

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!--jQuery引入 CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!--Bootstrap引入 Js CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

    body {

        /*居中展示*/

        text-align: center;

    }

    div {

      position: relative;

      display: inline-block;

    }

    div>i {

      /*展示 让行内标签具备块级标签可以修改长宽的特性*/

      /*也具备行内标签文本多大就占多大的特性*/

      display: inline-block;

      color: red;

      position: absolute;

      right: -16px;

      top: -5px;

      /*透明度*/

      opacity: 1;

    }

  </style>

</head>

<body>

<div id="d1">点赞</div>

<script>

    // 点击事件触发执行 《触发一次 div尾部增加一次i标签》

  $("#d1").on("click", function () {

    var newI = document.createElement("i");

    newI.innerText = "+1";

    // 将newI标签添加到 当前被操作标签尾部

    $(this).append(newI);

    // 当前被操作标签本身的孩子们 i标签都增加动画效果

    $(this).children("i").animate({

      opacity: 0  // 透明度

    }, 1000)  // 动态点赞显示时间

  })

</script>

</body>

</html>

五:未读信息(徽章)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--bootstrap引入 CSS CDN-->

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!--jQuery引入 CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!--Bootstrap引入 Js CDN-->

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

         <!--Font-Awesome引入 CSS-->

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>

<a href="#">Inbox <span class="badge"></span></a>

<script>

    var spanEle = document.createElement("i")

    var x = 1

    $('a').on('click',function () {

        spanEle.innerText = x

        $(this).children().append(spanEle)

        x++

    })

</script>

</body>

</html>

六:页面加载



1.BOM js原生中 等待页面加载完毕再执行代码

window.onload = function(){

  // js代码

}

2.jQuery中等待页面加载完毕

# 第一种

// document DOM文档 	,ready 准备

// 等待DOM文档加载等待完毕之后在触发下面js代码的运行

$(document).ready(function(){

  // js代码

})

# 第二种

// 等待页面加载完毕在执行js代码

$(function(){

  // js代码

})

# 第三种 (推荐使用)

"""直接写在body内部最下方"""

七：动画效果

$('#d1').hide(5000)  // 5秒后 隐藏

w.fn.init [div#d1]

$('#d1').show(5000)  // 5秒后 展示

w.fn.init [div#d1]

$('#d1').slideUp(5000) // 往上滑动

w.fn.init [div#d1]

$('#d1').slideDown(5000)  // 往下滑动

w.fn.init [div#d1]

$('#d1').fadeOut(5000)  // 渐变

w.fn.init [div#d1]

$('#d1').fadeIn(5000)  // 渐显

w.fn.init [div#d1]

$('#d1').fadeTo(5000,0.4)  // 渐变到某透明度不在变化

w.fn.init [div#d1]

巴特西

jQuery事件与动态效果

一:阻止后续事件执行

1.推荐使用阻止事件

2.未使用阻止后续事件执行

3.使用阻止后续事件执行

二:阻止事件冒泡

1.什么是事件冒泡？

2.未阻止事件冒泡

3.阻止事件冒泡

4.2.阻止冒泡事件

三:事件委托

1.什么是事件委托？

2.后面动态创建的演示

四:点赞动态展示

五:未读信息(徽章)

六:页面加载

七：动画效果

最新文章

热门文章

巴特西

jQuery事件与动态效果

一:阻止后续事件执行

1.推荐使用阻止事件

2.未使用 阻止后续事件执行

3.使用阻止后续事件执行

二:阻止事件冒泡

1.什么是事件冒泡？

2.未阻止事件冒泡

3.阻止事件冒泡

4.2.阻止冒泡事件

三:事件委托

1.什么是事件委托？

2.后面动态创建的演示

四:点赞动态展示

五:未读信息(徽章)

六:页面加载

七：动画效果

最新文章

热门文章

2.未使用阻止后续事件执行