jQuery的知识整理（2）-jQuery的元素操作，事件处理，委托

最新推荐文章于 2022-04-16 16:25:56 发布

Harry-iu

最新推荐文章于 2022-04-16 16:25:56 发布

阅读量114

点赞数

分类专栏：技术·教程 # jQuery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/www1577791638/article/details/114156636

版权

技术·教程同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

JavaScript

来源博客：【Harryの心阁】

元素操作

创建元素var li = $('<li></li>')
添加元素

内部添加 $('ul').append(li) 放到内容的后面， prepend 放到内容的前面
外部添加 $('ul').before(li) 放到指定元素的前面，after放到后面，兄弟关系

删除元素 $('ul').remove()zs的方式， empty或者html('')清空元素内的孩子

事件注册/处理

事件处理 ele.on({mouseenter:function(){},}),on可以处理一个或多个事件
相同元素不同处理方法，可以使用on(' ')多个事件用逗号隔开

事件委托

on(‘方法’，‘子元素’， ‘回调函数’),原理，冒泡处理
on可以给未来动态创建的元素绑定事件
事件处理off() 解绑事件 off(‘某个事件’)解绑某个事件 off('click','li')接触事件委托
one('')事件处理只会触发一次
自动触发方式

ele.click()
trigger(‘事件方法’)
triggerHandler(‘事件方法’) 不会触发元素的默认行为不会有光标闪烁

事件对象

注意有冒泡行为
拷贝对象$.extend(‘deep’,traget,obj,[objN])
true深拷贝完全克隆，而且不会覆盖，如果有相同属性会合并；false浅拷贝，把原来复杂数据类型地址老贝给目标对象，拷贝地址，会将原来的属性覆盖

多库并存

将$改为jQuery
让jquery 释放会$的控制权比如 var demo = jQuery.noConflict()

TodoList案例

亲兄弟才能使用$(this).index()
splice(index,删除几个元素)，数组的删除操作
attr(‘自定义属性’)，可获取元素的属性值
原理：输入数据后，首先获取本地的数据库，将输入的值存入本地数据库保存，在进行一系列的渲染
JSON.parse(data)方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
JSON.stringify()方法将一个 JavaScript 对象或值转换为 JSON 字符串

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    li {
        list-style: none;
    }

    .box {
        position: relative;
        width: 600px;
        height: 440px;
        margin: 100px auto 10px;
        background-color: #ccc;
        border-radius: 10px;
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 5px;
    }

    ::-webkit-scrollbar-track {
        background-color: rgba(50, 57, 61, 0.2);
        border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #202b33;
        background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, 0.4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent);
        border-radius: 2em;
    }

    span {
        display: block;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: rgb(9, 12, 11);
        margin: 5px;
    }

    .int {
        margin: 20px auto 0;
        padding: 10px;
        display: block;
        outline: none;
        overflow: auto;
        border-radius: 10px;
    }

    li p {
        display: inline-block;
        margin: 0 10px;
        color: rgb(49, 66, 141);
        font-size: 15px;
        font-weight: 600;
    }
    ol li,
    ul li {
        background-color: rgb(204, 235, 218);
        border-radius: 5px;
        padding-left: 10px;
        margin: 10px 0;
        border: 2px solid rgb(135, 198, 228);
    }

    ol li a,
    ul li a {
        float: right;
        text-decoration: none;
        font-size: 12px;
        font-weight: 550;
        color: rgb(33, 16, 49);
        line-height: 20px;
        margin-right: 10px;
    }

    ul,ol {
        width: 550px;
        height: 150px;
        background-color: rgba(80, 226, 202, 0.288);
        border-radius: 10px;
        margin: 5px auto 0;
        padding: 10px;
        overflow: auto;
    }
    h5{
        margin-left: 27px;
    }
</style>

<body>
    <div class="box">
        <span>留言区</span>
        <input type="text" placeholder="请输入代办的事件" class="int">
        <h5>正在进行中</h5>
        <ul></ul>
        <h5>已经完成的事件</h5>
        <ol></ol>
    </div>
    <script>
        // $(function () {
        //     $('button').click(function () {
        //         var li = $('<li></li>');
        //         li.html($('textarea').val() + '<a href="javascript:;">删除</a>')
        //         if ($('textarea').val() != '') {
        //             $('ul').prepend(li);
        //             li.slideDown();
        //             $('textarea').val('');
        //         }
        //     })
        $(function () {
            // todolist案例
            eload();
            $('.int').on('keydown', function (event) {
                if (event.keyCode == 13) {
                    if ($(this).val() == '') {
                        alert('请输入内容')
                    } else {
                        var local = getData();
                        // console.log(local);
                        local.push({ title: $(this).val(), done: false });//追加数组
                        savedata(local);
                        eload();
                        $(this).val('');
                    }
                }
            })
            $('ol,ul').on('click', 'input', function () {
                var data = getData();
                var index = $(this).siblings('a').attr('id');
                // 修改数组中属性的值
                data[index].done = $(this).prop('checked');
                console.log(data);
                savedata(data);
                eload();
            })
            // 获取本地数据
            function getData() {
                var data = localStorage.getItem('todolist');
                if (data !== null) {
                    console.log(typeof data);
                    console.log(typeof JSON.parse(data));
                    // 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
                    return JSON.parse(data)
                } else {
                    return [];
                }
            }
            //保存本地存储
            function savedata(data) {
                // 设置本地存储 key，value，// 方法将一个 JavaScript 对象或值转换为 JSON 字符串
                localStorage.setItem('todolist', JSON.stringify(data));
                console.log(typeof JSON.stringify(data));
                console.log(JSON.stringify(data));
            }
            // 本地存储渲染加载数据
            function eload() {
                var data = getData();
                console.log(data);
                // 这个操作为先删除后在进行渲染遍历
                $('ul,ol').empty();
                // 遍历数据，i为index，当前i下n为属性
                $.each(data, function (i, n) {
                    console.log(n);
                    if (!n.done) {
                        $('ul').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>').stop().slideDown().show();
                    } else {
                        $('ol').prepend('<li><input checked ="1" type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '>删除</a></li>').stop().slideDown().show();
                    }
                })
            }
            // 删除对应的数据
            $('ul,ol').on('click', 'li a', function () {
                var data = getData();
                console.log(data);
                // 修改数据,查询自定义属性
                var index = $(this).attr('id');
                console.log(index);
                //截取删除，index为删除的位置，后一个为删除的数量
                data.splice(index, 1);
                savedata(data);
                eload();
            })

        })
        //     $('ul').on('click','li a',function(){
        //         $(this).parent('li').slideUp(function(){
        //             $(this).remove();
        //         }) 
        //     })
        // })
    </script>
</body>

jQuery的尺寸

width()/height() 获取元素的宽度和高度，只算width和height
innerWidth()/height() 获取元素的width和padding的大小
outerWidth()/Height() 包含padding，border
outerWidth(true) 包含padding，border,margin

jQuery的位置

offset() 方法设置或返回距离文档的距离，不受父级的影响，返回的是对象object{}left/top，可以获取设置
position() 获取元素的偏移量,先对于父级，只能获取不能设置
scrollTop()/Left $(window).scroll(function(){})
animate({scrollTop:0}),做动画效果，不能是文档，让body，html做动画效果

页面滚动楼层案例

使用排他思想，$(this).index() 获取当前索引号
使用节流阀控制滑动和点击时按钮抖动事件
使用链式编程，使用遍历each(function(i,ele){})方法
这里搭配节流阀，当点击按钮后flag=false，关闭页面滑动使得按钮添加类，等动画执行完成后在使得flag=true 添加一个回调函数

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        width: 80%;
        height: 2000px;
        display: flex;
        margin: 0 auto;
        flex-direction: column;
    }
    
    .box li {
        flex: 1;
        margin: 10px;
        background-color: #ccc;
        list-style: none;
        border-radius: 10px;
    }
    
    ol {
        position: fixed;
        top: 30%;
        left: 0;
        width: 50px;
        display: flex;
        flex-direction: column;
    }
    
    ol li {
        display: none;
        flex: 1;
        list-style: none;
        text-align: center;
        margin: 2px;
        background-color: #ccc;
        border-radius: 5px;
    }
    
    .box2 {
        width: 20%;
        height: 600px;
        margin: 100px;
        background-color: rgb(166, 224, 158);
        margin: 0 auto;
    }
    
    li {
        cursor: pointer;
    }
    
    .current {
        background-color: rgb(241, 117, 117);
    }
</style>

<body>
    <div class="box2"></div>
    <div class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <script>
        $(function () {
            // 当页面滑动到指定位置时，左侧的楼层显示出来
            // 封装页面刷新后不滑动bug
            // 页面自主滑动和点击按钮左侧按钮会出现抖动bug，这时候需要添加一个节流阀来控制
            var flag = true;
            scro();
            function scro(){
                if ($(document).scrollTop() > $('.box').offset().top) {
                    $('ol li').fadeIn();
                }
                else {
                    $('ol li').stop().fadeOut();
                }
            }
            $(window).scroll(function () {
                console.log($(document).scrollTop());
                scro();
                // 遍历大板块使得板块变化，左侧的楼层同步变化
                if(flag){
                    $('.box li').each(function(i,ele){
                    if($(document).scrollTop()>=$(ele).offset().top){
                        console.log(i);
                        $('ol li').eq(i).addClass('current').siblings().removeClass();
                    }
                })
                }
            })
            // 点击楼层后使楼层切换到该位置
            $('ol li').on('click', function () {
                flag = false;
                $(this).index();
                var boxH = $('.box li').eq($(this).index()).offset().top;
                // 这里搭配节流阀，当点击按钮后flag=false，关闭页面滑动使得按钮添加类，等动画执行完成后在使得flag=true 添加一个回调函数
                $('body,html').scroll().animate({
                    scrollTop: boxH
                },function(){
                    flag = true;
                })
                // 点击按钮后将背景颜色替换
                $(this).addClass('current').siblings().removeClass();
            })

        })
    </script>
</body>

Harry-iu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery的知识整理（2）-jQuery的元素操作，事件处理，委托

JavaScript元素操作事件注册/处理事件委托事件对象多库并存TodoList案例jQuery的尺寸jQuery的位置来源博客：【Harryの心阁】元素操作创建元素var li = $('<li></li>')添加元素内部添加 $('ul').append(li) 放到内容的后面， prepend 放到内容的前面外部添加 $('ul').before(li) 放到指定元素的前面，after放到后面，兄弟关系删除元素 $('ul').remove
复制链接

扫一扫