day049--jQuery文档操作示例

DOM操作(CRUD增改查删)

　　创建元素

$('span')  // 创建一个span标签

　　后置插入操作 append(), appendTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">

</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {

        $('#append').click(function () {
            let content = $('input[type=text]').val();

            $('.comment').append(`<li>${content}</li>`);

            //清空
            $('input[type=text]').val('');
        })
    })
</script>

</body>
</html>

文档追加示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>吴老板</li>
</ul>
<script src="libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //追加字符串
        $('.comment').append(`<li id="item">alex</li>`);

        $('#item').click(function () {
            alert($(this).text());
        });

        //追加js对象
        var li = document.createElement('li');
        li.innerText = 'wusir';
        $('.comment').append(li);

        //如果是jQuery对象,相当于移动操作,把原对象移动到指定位置,不会重新创建对象
        setTimeout(function () {
            $('.comment').append($('li').eq(0));
        },2000);
        clearTimeout();

        $('<li>你好</li>').appendTo('.comment').click(function () {
            alert($(this).html());
        });

        $('button').click(function () {
            $('.comment').append($('<li>呵呵呵</li>'));
        })


    })
</script>

</body>
</html>

append追加+创建元素$('li')

　　前置插入 prepend(), prenpendTo()

　　兄弟插入(后) after(), insertAfter()

　　兄弟插入(前) before(), insertBefore()

　　删除 remove(), detach()

　　清空 empty(), text(''), html('')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">后置追加</button>
<button id="prepend">前置追加</button>
<button id="after">兄弟追加后</button>
<button id="replace">替换</button>
<button id="del">删除</button>
<button id="detach">删除2</button>
<button id="empty">清空</button>
<ul class="comment">
    <li id="item">alex</li>
    <li><a href="#">sb</a></li>
    <li><a href="#">sb2</a></li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>


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

        //1.后置追加
        console.log($('input[type=text]').val());
        // 变量不能在全局声明,否则值为空,因为初始化的时候没有值.写在事件内部,在事件发生时获取值.
        let content = $('input[type=text]').val();
        if (!content){
            //如果内容为空不执行操作
            return;
        }

        $('.comment').append(`<li>${content}</li>`);

        //清空  添加后把输入框中的内容清空
        $('input[type=text]').val('');
    })

    //2. 前置
    $('#prepend').click(function () {
        let content = $('input[type=text]').val();
        if (!content){
            return;
        }

        // $('.comment').prepend('<li>'+content+'</li>');
        //推荐使用``

        //prepend()方法  前置添加   父.prepend(子)
        // $('.comment').prepend(`<li>${content}</li>`);
        //prependTo()方法 前置添加   子.prependTo(父)
        $(`<li>${content}</li>`).prependTo($('.comment'));
        $('input[type=text]').val('');

    })

    //3.兄弟追加  后置追加
        $('#after').click(function () {

            let content = $('input[type=text]').val();

            if (!content){
                return;
            }
            // 目标.after.新内容
            // $('#item').after(`<li>${content}</li>`);
            // 新内容.after.目标
            $(`<li>${content}</li>`).insertAfter($('#item'));
            $('input[type=text]').val('');

        });

    // 4. 替换
    $('#replace').click(function () {
        let content = $('input[type=text]').val();

            if (!content){
                return;
            }
            $('.comment li a').replaceWith(`<span>${content}</span>`);
            $('input[type=text]').val('');
    });

    //5.remove() 删除 表示整个标签都删除(事件也删除)
    $('#del').click(function () {
        alert(1);
        // $('ul').remove();

        var dBtn = $(this).remove();
        console.log(dBtn);

        $('.comment #item').append(dBtn);
    });

    //删除标签 事件不删除
    $('#detach').click(function () {
        alert(1);
        var dBtn = $(this).detach();
        console.log(dBtn);

        $('.comment #item').append(dBtn);

    });

    //清空父级元素的子内容 三种方法
    $('#empty').click(function () {
        // $('.comment').empty();
        // $('.comment').html('');
        $('.comment').text('');
    })

</script>
</body>
</html>

View Code

事件

　　事件监听 addEventListener(事件,fn,boolen)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

        window.onload = function () {

            var oBtn = document.getElementById('btn');

            //1
            document.addEventListener('click', function () {
                console.log('document处于事件捕获阶段');
            }, true);

            //2
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件捕获阶段');
            }, true);

            //3
            document.body.addEventListener('click', function () {
                console.log('body处于事件捕获阶段');
            }, true);

            //4
            oBtn.addEventListener('click', function () {
                console.log('btn处于事件捕获阶段');
            }, true);

            //4

            oBtn.addEventListener('click', function () {
                console.log('btn处于事件冒泡阶段');
            }, false);
            //5  false 表示冒泡
             document.body.addEventListener('click', function () {
                console.log('body处于事件冒泡阶段');
            }, false);
            // //6
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件冒泡阶段');
            }, false);

            //7
            document.addEventListener('click', function () {
                console.log('document处于事件冒泡阶段');
            }, false);





        };

    </script>
</head>
<body>
<a href="javascript:void(0);" id="btn">按钮</a>
</body>
</html>

事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>alex</p>
        <button id="btn">按钮</button>
    </div>
    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            //jquery中没有捕获阶段  只有冒泡阶段
            //每一个事件的回调函数 都会有一个事件对象(js)
            $('#btn').click(function (e) {
                console.log(e);
                //阻止冒泡
                e.stopPropagation();
                $('.box p').css({
                    fontSize:20
                })
            });

            $('.box').click(function (e) {
                e.stopPropagation();
                alert(1);
                $(this).css({
                    backgroundColor:'green'
                })
            });

            $('body').click(function () {
                $(this).css({
                    backgroundColor:'yellow'
                })
            })

        })
    </script>

</body>
</html>

jQuery中的事件冒泡

　　数据驱动视图(双向的数据绑定)

　　oninput 定义和用法

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="alex">
<p></p>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    //初始化操作
    $('p').html($('input[type=text]').val());

    // oninput监听事件, 事件在用户输入时触发
    $('input[type=text]')[0].oninput = function (e) {
        console.log(e);
        var val = e.target.value;
        console.log(val);
        $('p').html(val);

    }
</script>
</body>
</html>

数据驱动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            color: red;
        }
    </style>
</head>
<body>
    <ul>

</ul>
<script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            var data = {
                status:200,
                lists:[
                   {
                    title:'完美世界222',
                    author:'辰东',
                    status:'连载中',
                    addr:'起点中文网'
                },
                 {
                    title:'蛮荒记',
                    author:'我吃西红柿',
                    status:'已完结',
                    addr:'起点中文网'
                },
                 {
                    title:'辟邪剑谱',
                    author:'吴老板',
                    status:'连载中ing',
                    addr:'起点中文网'
                }
                ]
            };

            if (data.status == 200){
                data.lists.forEach(function (item,index) {
                    $(`<li>
                            <p class="title">${item.title}</p>
                            <p class="author">${item.author}</p>
                            <p class="stats">${item.status}</p>
                            <p class="addr">${item.addr}</p>
                        </li>`).appendTo('ul');
                })
            }
        })
    </script>

</body>
</html>

数据驱动百度小说

　　事件对象(event)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            function enter() {
                alert(1);
            }

            $('input[type=text]').keydown(function (e) {
                console.log(e.keyCode);
                console.log(e.target); //jsdom对象
                console.log(e.currentTarget); //jsdom对象
                console.log(this); //jsdom对象

                switch (e.keyCode){
                    case 13:
                        //回车键
                        enter();
                        break;
                }

            })

        })
    </script>

</body>
</html>

View Code

　　e.target(), e.currentTarget(), this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 200px;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="box">
    <p>alex</p>
    <button id="btn">按钮</button>
</div>
<script src="./libs/jquery-3.3.1.js"></script>

<script>
    $(function () {
        //jquery中没有捕获阶段  只有冒泡阶段
        //每一个事件的回调函数 都会有一个事件对象(js)
        $('#btn').click(function (e) {
            console.log(this);
            console.log(e.target);
            e.stopPropagation();
            console.log(e.currentTarget);

        });

        $('.box').click(function (e) {
            console.log(this);
             console.log(e.target); //传递事件的对象, 事件源
            e.stopPropagation();
             console.log(e.currentTarget);   // this和currentTarget的对象相同
        });

        $('body').click(function (e) {
            console.log(this);
             console.log(e.target);
              console.log(e.currentTarget);
        });

    })
</script>

</body>
</html>

事件对象处理

键盘事件

1.键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

keydown：按键按下
keyup：按键抬起

keypress：按键按下抬起

js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下：
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
使用event对象的keyCode属性判断输入的键值
eg：if(event.keyCode==13)alert(“enter!”);
键值对应表
A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD
如果要使用组合键，则可以判断是否同时按下了这几个键，比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键

keyCode对照表

　　jQuery的事件

　　鼠标移入和移出 (冒泡)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        ul li{
            float: right;
            margin-right: 100px;
            width: 80px;
            height: 32px;
            font-size: 14px;
            position: relative;
            background-color: red;
            line-height: 32px;
            text-align: center;
        }
        ul li .list{
            display: none;
            width: 200px;
            height: 300px;
            background-color: green;
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">alex</a>
            <div class="list">
                <p>个人中心</p>
                <p>账号设置</p>
                <p>意见反馈</p>
                <p>退出</p>
            </div>
        </li>
    </ul>
    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {



            // 冒泡导致了问题
            // 鼠标穿过备选元素 或者是被选的子元素
            // $('ul li').mouseover(function () {
            //     console.log('进来了')
            //     $('ul li .list').show();
            // })
            //  $('ul li').mouseout(function () {
            //     console.log('出去了')
            //     $('ul li .list').hide();
            // })

              $('ul li').mouseenter(function () {
                console.log('进来了')
                $('ul li .list').show();
            })
             $('ul li ').mouseleave(function () {
                console.log('出去了')
                $('ul li .list').hide();
            })
        })

    </script>

</body>
</html>

View Code

　　双击的问题 dblclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('button').click(function () {
            console.log('单击了');
        });

        $('button').dblclick(function () {
            console.log('双击了');
        })
    })
</script>
</body>
</html>

view code

　　解决单双击事件冲突

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
        // 双击时候 出现两次单击（干掉）
        var time = null;
        //双击  ---》（ 1次单击+（小于200ms）1次单击）
        $('button').click(function () {
            // 取消上次延时未执行的方法
            clearTimeout(time);
            //执行延时
            time = setTimeout(function () {
                //do function在此处写单击事件要执行的代码
                console.log('单机')
            }, 300);
        });

        $('button').dblclick(function(){
            clearTimeout(time)

            console.log('双击了')
        })



</script>
</body>
</html>

网络版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    // 双击时候 出现两次单击（干掉）
    var timer = null;
    //双击  ---》（ 1次单击+（小于500ms）1次单击）
    $('button').click(function () {
        //取消上次延时未执行的方法
        clearTimeout(timer);
        //执行延时
        timer = setTimeout(function () {
            //do function在此处写单击事件要执行的代码
            console.log('单击了');
        },500);
    });

    $('button').dblclick(function () {
        clearTimeout(timer);
        console.log('双击了')
    })
</script>

</body>
</html>

亲测版本--双击事件是第一次单击后500ms内触发第二次单击

　　单双击冲突的解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
        // 双击时候 出现两次单击（干掉）
        var time = null;
        //双击  ---》（ 1次单击+（小于200ms）1次单击）
        $('button').click(function () {
            // 取消上次延时未执行的方法
            clearTimeout(time);
            //执行延时
            time = setTimeout(function () {
                //do function在此处写单击事件要执行的代码
                console.log('单机')
            }, 300);
        });

        $('button').dblclick(function(){
            clearTimeout(time)

            console.log('双击了')
        })



</script>
</body>
</html>

View Code

　　冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .fuBox {
            width: 100%;
            height: 300px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }

        .fuBox .container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .fuBox .container span {
            position: absolute;
            right: 0;
            top: 30px;
            cursor: pointer;
            color: #0086b3;
            font-weight: bold;
        }


    </style>
</head>
<body style="height: 2000px;">
<button class="changefu">换肤</button>
<div class="fuBox">
    <div class="container">
        <ul>
            <li>热门</li>
            <li>热门</li>
            <li>热门</li>
        </ul>
        <span>收起</span>
    </div>
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {

        changeFu();


        function changeFu() {

            $('.changefu').click(function (e) {
                e.stopPropagation();
                $('.fuBox').stop().slideDown(400);
            });

            $('.fuBox .container span, body').click(function (e) {
                $('.fuBox').stop().slideUp(400);
            });

            $('.fuBox').click(function (e) {
                e.stopPropagation();
            });

            $('.fuBox .container ul li').click(function (e) {
                e.stopPropagation();
                alert(1);
            })


        }
    })
</script>

</body>
</html>

换肤下拉