JQuery(三)

最新推荐文章于 2023-04-21 10:38:56 发布

「已注销」

最新推荐文章于 2023-04-21 10:38:56 发布

阅读量217

点赞数 1

分类专栏： # JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45419127/article/details/119542308

版权

本文详细介绍了JQuery的事件处理，包括普通注册、on()方法、事件解绑off()以及自动触发事件。同时探讨了JQuery事件对象、多库共存策略，并举例说明了如何实现微博发布和TodoList功能。此外，还涵盖了JQuery插件的使用，如瀑布流、懒加载和全屏滚动，以及JQuery在bootstrap框架中的应用和本地存储操作。

摘要由CSDN通过智能技术生成

JQuery事件处理之普通注册

JQuery提供方便的事件注册机制，但有以下优缺点。

优点:操作简单，且不用担心事件覆盖等问题
缺点：不能解绑事件，且不能实现事件委托

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之事件处理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <div></div>
</body>
<script>
    $('div').click(function() {
        $(this).css('backgroundColor', 'yellow')
    })
    $('div').mouseenter(function() {
        $(this).css('backgroundColor', 'pink')
    })
</script>

</html>

在这里插入图片描述

JQuery事件处理之on()

on():用于事件绑定，是目前最好用的事件处理

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery事件处理之on()</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<style>
    * {
   
        margin: 0;
        padding: 0;
    }
    
    div {
   
        width: 400px;
        height: 400px;
        margin: 20px auto;
        background-color: red;
    }
    
    ul,
    ol {
   
        list-style: none;
        width: 400px;
        margin: 20px auto;
    }
</style>

<body>
    <div></div>
    <ul>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
    </ul>
    <ol>

    </ol>
</body>
<script>
    // 1. on()方法 可以绑定多个事件
    $('div').on({
   
        click: function() {
   
            $(this).css('backgroundColor', 'blue')
        },
        mouseenter: function() {
   
            $(this).css('backgroundColor', 'yellow')
        },
        mouseleave: function() {
   
            $(this).css('backgroundColor', 'green')
        }
    })

    //2.on()可以实现事件委托
    $('ul').on('click', 'li', function() {
   
            alert('Hello Word')
        })
        //3.可以给动态创建的元素绑定事件
    $('ol').on('click', "li", function() {
   
        alert('Hello China')
    })
    let li = $("<li>Hello China</li>");
    $('ol').append(li)
</script>

</html>

在这里插入图片描述

JQuery事件处理之微博发布

1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。

2.点击的删除按钮，可以删除当前的微博留言

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery事件处理之微博发布</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        
        .box {
   
            width: 600px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid red;
            padding: 50px;
        }
        
        h2 {
   
            text-align: center;
        }
        
        textarea {
   
            width: 536px;
            height: 200px;
            outline: none;
            resize: none;
            vertical-align: bottom;
        }
        
        ul {
   
            list-style: none;
            width: 536px;
        }
        
        ul li {
   
            height: 25px;
            border-bottom: 1px dashed #cccccc;
        }
        
        a {
   
            float: right;
            text-decoration: none;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <div class="box">
        <h2>留言</h2>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button class="bth">提交</button>
        <ul>

        </ul>
    </div>
</body>
<script>
    // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul中 
    $('.bth').on('click', function() {
   

        if ($('.txt').val() === '') {
   
            alert('请输入内容')
        } else {
   
            let li = $('<li></li>');
            li.html($('.txt').val() + "<a href='javascript:;'>删除</a>");
            li.slideDown();
            $('ul').prepend(li);
            $('.txt').val("");
        }

    })

    //2.点击删除按钮 删除a链接所在的li
    $('ul').on('click', 'a', function() {
   
        $(this).parent().slideUp(function() {
   
            $(this).remove()
        })
    })
</script>

</html>

在这里插入图片描述

JQuery之事件解绑off()

off():用来解绑事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之事件解绑off()</title>
    <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>`

<body>
    <div> </div>
    <ul>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
        <li>Hello Word</li>
    </ul>
    <p>Hello</p>
</body>
<script>
    $(function() {
   
        $('div').on({
   
            click: function() {
   
                console.log('click');
            },
            mouseenter: function() {
   
                console.log('mouseover');
            }
        });
        $('ul').on('click', 'li', function() {
   
                alert('Hello Word')
            })
            // one():只触发一次
        $('p').one('click', function() {
   
            alert('Hello')
        })

        //事件解绑off 
        //解除div的点击事件
        $('div').off('click');
        // 解除事件委托
        $('ul').off('click', 'li')
    })
</script>

</html>

在这里插入图片描述

JQuery事件处理之自动触发事件

在这里插入图片描述

JQuery事件

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。

JQuery事件对象

事件被触发，就会有事件对象的产生。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之事件对象</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            background-color: red;
        }
    </style>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <div></div>
</body>
<script>
    $(function() {
        $(document).on('click', function() {
            alert('Document')
        })
        $('div').on('click', function(event) {
            alert('DIV')
                //阻止冒泡
            event.stopPropagation()
                //阻止默认行为
            event.preventDefault()
        })
    })
</script>

</html>

在这里插入图片描述

JQuery拷贝对象

JQuery为我们提供两套的快速获取和设置元素尺寸和位置的API,方便易用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之拷贝对象</title>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>

</body>
<script>
    $(function() {
   
        // 浅拷贝
        var targetObj = {
   };
        var obj = {
   
            id: 1,
            name: 'YaoZiMo'
        };
        $.extend(targetObj, obj);
        console.log(targetObj);
        // 深拷贝
        var targetObjone = {
   
            id: 5,
            sex: '男'
        };
        var obj = {
   
            id: 1,
            name: 'YaoZiMo'
        };
        $.extend(true, targetObjone, obj);
        targetObjone.name = 'Star'
        console.log(targetObjone);
        console.log(obj);

    })
</script>

</html>

在这里插入图片描述

JQuery之多库共存

采用jQuery和$符为命名空间的js库越来越多便产生冲库，于是出现JQuery多库共存。

在这里插入图片描述



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之多库共存</title>
</head>
<script src="./jquery-3.6.0.js"></script>

<body>
    <div></div>
    <span></span>
</body>
<script>
    $(function() {
   
        function $(ele) {
   
            return document.querySelector(ele)
        };
        console.log($('div'));
        jQuery.each()
        let Zepto = jQuery.noConflict();
        console.log(Zepto('span'));
        Zepto.each()
    })
</script>

</html>

在这里插入图片描述

JQuery插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

JQuery常用网站

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤

引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

JQuery之瀑布流插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery之瀑布流</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/default.css">
    <style type="text/css">
        #gallery-wrapper {
   
            position: relative;
            max-width: 75%;
            width: 75%;
            margin: 50px auto;
        }
        
        img.thumb {
   
            width: 100%;
            max-width: 100%;
            height: auto;
        }
        
        .white-panel {
   
            position: absolute;
            background: white;
            border-radius: 5px;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
            padding: 10px;
        }
        
        .white-panel h1 {
   
            font-size: 1em;
        }
        
        .white-panel h1 a {
   
            color: #A92733;
        }
        
        .white-panel:hover {
   
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
            margin-top: -5px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
    </style>
    <!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script