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>

事件

　　事件监听 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>

　　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>

　　双击的问题 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>

　　冒泡

<!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>

换肤下拉

day049--jQuery文档操作示例的更多相关文章

jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例使用 noConflict() 方法为 jQuery 变量规定新 ...
jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册实例设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
前端之JQuery：JQuery文档操作
jquery之文档操作一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
jQuery文档操作--append()、prepend()、after()和before()
append(content|fn) 概述向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似参数 content 要追 ...
jQuery 文档操作
一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...
jQuery文档操作之插入操作
append() 语法父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:string/element(js对象)/jQuery元素代码如下: var oli ...

随机推荐

03 入门 - 安装MVC 5和创建应用程序
目录索引:<ASP.NET MVC 5 高级编程>学习笔记本篇内容: 1. ASP.NET MVC 5的软件需求 2. 安装ASP.NET MVC 5 1)安装MVC 5开发组件 2)服 ...
PHP制作个人博客-广告位添加与调用推荐文章数据调取
上一节博客的导航我们已经动态调取,这一节我们主讲一下如何根据页面布局,后台添加广告位,及模板上动态调取广告.博客推荐文章的数据调用. 首先我们在云码博客的后台添加10条左右的测试数据,thinkcmf ...
vue中使用provide和inject刷新当前路由（页面）
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
iOS----------Xcode 无线调试
环境要求: 至少Mac OSX 10.12.6 iOS 11 Xcode 9 1. ”自己的工程“ -> windows -> Device and Simulators ,打开设备和模拟 ...
MySQL安装之yum安装
转载来源:https://www.cnblogs.com/brianzhu/p/8575243.html 1. 下载并安装MySQL官方的 Yum Repository 1 [root@BrianZh ...
C#中文件下载的几种方法演示源码
内容过程,把内容过程比较重要的内容做个珍藏,如下的内容是关于C#中文件下载的几种方法演示的内容,应该是对各朋友有较大好处. using System;using System.Data;using S ...
放下技术，是PM迈出的第一步
上一篇,我们从项目层面提出了PM的核心能力架构.今天,我想从公司层面,分析一下PM的核心能力架构中的过程能力,这也是PM当下最关心.最真切的痛点. 还记得上一篇我的同事老A吗? 为什么他能在知名外企带 ...
阿里云服务器部署Java Web项目全过程
最近需要将一个Java Web项目部署到服务器上,方便多人共享访问.这也是我第一次接触服务器之类的东西,也花了一点时间,最终总算部署成功,写下一篇文章记录以便日后回顾. 购买服务器第一步当然是需要购 ...
PowerShell或命令行运行javac xx.java提示“编码GBK的不可映射字符”
由于JDK是国际版的,我们在用javac编译时,编译程序首先会获得我们操作系统默认采用的编码格式(GBK),然后JDK就把Java源文件从GBK编码格式转换为Java内部默认的Unicode格式放入内 ...
[题解]SP703 SERVICE - Mobile Service_Done
设计状态F[i][j][k]代表完成任务i后,有一个员工在地点P[i],其他两人分别在j和k两地.所需要的最小代价. 转移的方式: 分别考虑派遣i,j,k三人前往下一个需求地点,并更新状态. #inc ...

day049--jQuery文档操作示例

DOM操作(CRUD增改查删)

创建元素

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

前置插入 prepend(), prenpendTo()

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

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

删除 remove(), detach()

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

事件

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

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

事件对象(event)

jQuery的事件

day049--jQuery文档操作示例的更多相关文章

随机推荐

热门专题

　　创建元素

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

　　前置插入 prepend(), prenpendTo()

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

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

　　删除 remove(), detach()

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

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

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

　　事件对象(event)

　　jQuery的事件