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文档操作示例的更多相关文章

  1. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  2. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  3. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  4. 前端之JQuery：JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

  5. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  7. jQuery文档操作--append()、prepend()、after()和before()

       append(content|fn)  概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数    content  要追 ...

  8. jQuery 文档操作

    一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...

  9. jQuery文档操作之插入操作

    append() 语法 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:string/element(js对象)/jQuery元素 代码如下: var oli ...

随机推荐

  1. FreeNas搭建踩坑指南（一）

    0x00 背景 最近公司的旧群晖服务器Raid6,因为同时坏了两块硬盘存储池损毁,所以领导决定买了Dell R730自己搭NAS,选来选去最后选了FreeNAS,这里记录一些踩过的坑. 0x01 问题 ...

  2. 重建程序员能力(2)-如何使asp.net mvc应用增加js和其他功能

    1. 在Visual Studio的解决方案资源管理器,找到项目右键展开右键菜单后选择 管理NuGet程序包. 2.在打开的页面中,可以按需要选择Jquery.BootStrap等页面展现框架. 有工 ...

  3. python的学习笔记01_6练习

    # 一.[用户登陆程序]# 基础需求:# 让用户输入用户名密码# 认证成功后显示欢迎信息# 输错三次后退出程序 count = 0 name = "cheng" password ...

  4. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  5. Java：全局变量（成员变量）与局部变量

    分类细则: 变量按作用范围划分分为全局变量(成员变量)和局部变量 成员变量按调用方式划分分为实例属性与类属性 (有关实例属性与类属性的介绍见另一博文https://blog.csdn.net/Drag ...

  6. 「汇编」加深理解段地址*10H（*16）必须是16的倍数

    王爽的汇编语言,有这样一道题: 检测点2.2 (2)  有一数据存放在内存20000H单元中,现给定段地址为SA,若想用偏移地址寻到此单元.则SA应满足的条件是:最小为         , 最大为   ...

  7. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  8. Mysql原理与优化

    原文:https://mp.weixin.qq.com/s__biz=MzI4NTA1MDEwNg==&mid=2650763421&idx=1&sn=2515421f09c1 ...

  9. Winform开发中对界面的组织布局

    在设计界面的时候,不管是在Web端,还是在Winform端,或者是WPF或者移动界面等应用上,我们对界面的组织布局,一直是比较有趣的话题,而组织界面的好坏从用户的感受来看,可以提供程序可使用性高低,也 ...

  10. Windows系统下的TCP参数优化（注册表\TCPIP\Parameters）

    转自:https://blog.csdn.net/libaineu2004/article/details/49054261 Windows系统下的TCP参数优化   TCP连接的状态与关闭方式及其对 ...