一、文档结构

```js
var $sup = $('.sup');
console.log($sup.children()); // 子们
console.log($sup.parent()); // 父
console.log($sup.prev()); // 上兄弟
console.log($sup.next()); // 下兄弟
console.log($sup.siblings()); // 兄弟们
```

二、文档操作

- 操作步骤

```js
// 1.创建页面元素
var $box = $('<div class="box"></div>')
// 2.设置页面元素
$box.text('文本');
$box.click(fn);
// 3.添加到指定位置
$box.appendTo($('body'));
```

- 内部操作

```js
// append(): 父加子到最后
// prepend(): 父加子到最前
// appendTo(): 子加到父到最后
// prependTo(): 子加到父到最前
```

- 兄弟

```js
$('.box').after('<b></b>'); // 在box后添加一个b标签
$('.box').before('<b></b>'); // 在box前添加一个b标签
```

- 包裹(添加父级)

```js
$('.box').wrap('<div></div>'); // 为box添加一个div父级
```

- 替换

```js
$('.box').repleaceWith($('.ele')); // 把box替换为ele
$('p').repleaceAll($('b')); // 用p替换所有的b
```

- 删除

```js
// 1.清空所有子级
$('.box').empty(); // 将box的子级全部删除, 操作的返回值为自身

// 2.不保留事件的删除
// remove()操作的返回值为自身
$('.box').remove().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件不再拥有

// 3.保留事件的删除
// detach()操作的返回值为自身
$('.box').detach().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件依然拥有

```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
    <style>
        .ele1 {
            border: 1px solid black;
        }
        .ele2 {
            border: 1px solid orange;
        }
        .ele2 .div {
            background-color: pink;
        }
        .ele2 .div span {
            float: right;
            cursor: pointer;
        }

        .ele3 {
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <p class="p1">你是P</p>
    <div class="ele1">
        <p>原文本</p>
    </div>

    <div class="ele2"></div>

    <div class="ele3"><span>1</span><span>2</span><span>3</span></div>

    <div class="ele4">ele4 ele4 ele4</div>

    <!--需求: .wrap-ele5>.ele5 -->
    <div class="ele5">
        <div class="wrap"></div>
    </div>

    <!--repleaceWith-->
    <div class="container">
        <div class="inner first">Hello</div>
        <div class="inner second">And</div>
        <div class="inner third">Goodbye</div>
    </div>

    <!--repleaceAll-->
    <p>Hello</p><p>cruel</p><p>World</p>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 一.内部插入
    var $p1 = $('.p1');
    var $ele1 = $('.ele1');

    // 父添加子
    // $p1就是一个对象, 所以不管操作几次,或是如何操作, 最终只有一种位置结果
    $ele1.append($p1);  // 父 加 子 到最后
    $ele1.append($p1);

    $ele1.prepend($p1);  // 父 加 子 到最前

    $p1.appendTo($ele1); // 子 加到 父  到最后
    $p1.prependTo($ele1); // 子 加到 父  到最前
</script>
<script>
    // 二.操作文档三步骤
    // 1.创建页面元素对象
    // 2.设置页面元素对象(样式|属性|内容|事件...)
    // 3.添加到指定位置
    $ele2 = $('.ele2');

    // 1.
    var $div = $('<div class="div">我是div</div>');
    // 2.
    // $div.on('click', function () {
    //    alert('div被点击了!');
    // });
    // 委派添加事件
    $ele2.on('click', 'div', function () {
        alert('div被点击了!');
    });
    // 3.
    // $ele2.append($div);
    // 将div中假如一个span标签,在将自身添加到ele2中
    $div.append("<span>x</span>").appendTo($ele2);

    // 需求: 点击span的小x,删除$div
    // 思路: 给span绑定一个点击事件 => 操作让父级$div删除
    /* ① 通过选择器找到目标span
    $('.ele2 span').click(function (ev) {
        // 阻止冒泡
        ev.stopPropagation();
        // 删除操作
        // console.log(this)
        // 原生js操作 父删子
        // this.parentElement.parentElement.removeChild(this.parentElement);
        // jq操作 自删
        $(this).parent().remove();
    })
    */
    // ② 通过事件委派直接绑定给目标span
    $ele2.on('click', 'span', function (ev) {
        ev.stopPropagation();
        $(this).parent().remove();
    });
</script>

<script>
    // 三.删除操作

    // 1.清空所有子级
    // empty()操作的返回值为 自身
    $('.ele3').append("<span>4</span>").click(function () {
        // 打印子级所有文本
        // $(this).children().text() | $(this).text()
        console.log($(this).text())
    }).empty().text("00000");

    // 2.不保留事件的删除
    // remove()操作的返回值为 自身
    // $('.ele3').remove().appendTo($('body'));

    // 3.保留事件的删除
    // detach()操作的返回值为 自身
    // $('.ele3').detach().appendTo($('body'));

</script>

<script>
    // 四.兄弟结构操作
    $('.ele4').after('<b>after ele4</b>').before('<i>before ele4</i>')
</script>

<script>
    // 五.包裹操作(为自身添加父级)
    /*
    $('.ele5').wrap(function () {
        // this指的是ele5
        var _this = this;
        return $('.wrap').attr('class', function () {
             // this指的是wrap
            return this.className + "-" + _this.className;
        });
    }).empty();
    */
    var $wrap = $('.wrap');
    var $ele5 = $('.ele5').empty();
    $ele5.wrap($wrap);
    var tg_class = $wrap.attr('class') + "-" + $ele5.attr('class');
    console.log(tg_class)
    $ele5.parent().attr('class', tg_class);

</script>

<script>
    // 六.替换

    // 把third用裁剪的first来替换
    $('.third').replaceWith($('.first'));

    // 用b标签替换所有的p标签
    $("<b>Paragraph. </b>").replaceAll("p");
</script>

<!--DOM操作需求:
1.一个输入框,一个提交按钮,提交留言到一个列表中
2.每条留言可以删除
3.每条留言可以修改
-->
</html>

三、文档操作案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档操作案例</title>
    <style>
        input {
            vertical-align: middle;
        }
        ul, p {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .msg, .show {
            width: 260px;
            /*background-color: red;*/
        }
        .show li:hover {
            background-color: #aaa;
        }
        .show {
            margin-top: 14px;
        }
        .show li {
            line-height: 40px;
            position: relative;
        }
        .show span {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="msg">
        <input class="inp" type="text"><input class="btn" type="button" value="留言">
    </div>
    <ul class="show">
        <!--<li>-->
            <!--<p>第一条留言</p>-->
            <!--<span>&times;</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<p>一楼说的对</p>-->
            <!--<span>&times;</span>-->
        <!--</li>-->
    </ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 提交按钮的事件
    $('.btn').click(function () {
        // 输入框的内容
        var msg = $('.inp').val();
        // 输入框有内容才提交
        if (msg.length != 0) {
            addMsg(msg);
        }

        // 只要留言按钮点击后, 就应该清空输入框
        $('.inp').val("");
    });

    function addMsg(msg) {
        $('<li></li>')
            .append('<p>' + msg + '</p>')  // 为li添加子级p, p内容为留言内容
            .append('<span>&times;</span>')  // 为li添加子级span, 内容就是x
            .appendTo($('.show'))  // 将li添加到父级show最后
            .on('click', 'span', function (ev) {  // 通过li为子级span委派点击事件
                ev.stopPropagation();
                console.log(this); // span
                $(this).parent().remove();  // span找到父级li,进而删除当前li
            })
            .on('click', function () {  // 为li添加点击事件 => 进入编辑状态
                console.log(this);  // li
                // 将当前li的p内容取出 => 给编辑状态下的输入框
                var txt = $(this).children('p').text();
                // 如何才可以变为编辑方式 => 将p替换为input
                // $(this).children('p').replaceWith($('<input>').val(txt));
                $('<input>').val(txt)  // 进入编辑状态,新建input输入框,内容是当前留言p的内容
                    .attr('autofocus', 'true')  // ?
                    .replaceAll($(this).children('p'))  // 来替换显示内容的p标签
                    .blur(function () {  // 为当前编辑框添加失去焦点的事件
                        var edit_txt = $(this).val();  // 存储修改后的文本
                        if (edit_txt.length == 0) edit_txt = "null";  // 修改后的内容为空的安全处理
                        $('<p></p>').text(edit_txt).replaceAll(this);  // 将编辑完成后的input重新替换为p标签来显示
                    })
            })

    }

</script>
</html>

四、form表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        textarea {
            width: 300px;
            height: 200px;
            /*horizontal | vertical*/
            resize: none;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!--什么是form表单: form组合标签, 用来接收前端用户录入的数据信息 提交 给后台语言-->
    <!--表单元素:
    input: 基本上都是输入框, 通过type全局属性决定input类型, 默认为text
    label: 普通文本框(类似于span), 一般用来为紧跟其后的input框做文本提示
    -->

    <!--form属性:
    action: 后台处理请求的接口(往哪提交数据)
    method: 请求方式
        -- get: 将数据拼接在请求的接口之后, 拼接的长度是有限的,所有传输数据的大小也是有限的,且不安全
        -- post: 将数据作为数据包打包有请求携带给后台, 没有数据大小的限制, 安全
    -->
    <form action="" method="get">
        <div class="row">
            <!--普通输入框-->
            <label>用户名: </label>
            <input type="text" id="usr" name="usr">
        </div>
        <div class="row">
            <!--密文输入框-->
            <label>密码: </label>
            <input type="password" id="pwd" name="pwd">
        </div>
        <div class="row">
            <!--按钮-->
            <input type="button" value="普通按钮">
            <button class="btn1">btn按钮</button>
        </div>
        <div class="row">
            <!--提交按钮, 完成的是表单数据的提交动作, 就是为后台提交数据的 动作-->
            <input type="submit" value="提交">
            <button type="submit">btn提交</button>
        </div>
        <div class="row">
            <!--单选框-->
            <!--注; 通过唯一标识name进行关联, checked布尔类型属性来默认选中-->
            男<input type="radio" name="sex" value="male">
            女<input type="radio" name="sex" value="female">
            哇塞<input type="radio" name="sex" value="wasai" checked>
        </div>
        <div class="row">
            <!--复选框-->
            <!--注: 用户不能输入内容,但是能标识选择的表单元素需要明确value值-->
            篮球<input type="checkbox" name="hobby" value="lq">
            足球<input type="checkbox" name="hobby" value="zq">
            乒乓球<input type="checkbox" name="hobby" value="ppq">
            其他<input type="checkbox" name="hobby" value="other">
        </div>
        <div class="row">
            <!--文本域-->
            <textarea></textarea>
        </div>
        <div class="row">
            <!--下拉框-->
            <select name="place">
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div class="row">
            <!--布尔类型属性-->
            <!--autofocus: 自动获取焦点-->
            <!--required: 必填项-->
            <!--multiple: 允许多项-->
            <input type="text" autofocus required>
            <input type="file" multiple>
            <input type="range">
            <input type="color">
        </div>
        <div class="row">
            <!--重置-->
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消btn1的默认动作
    $('.btn1').click(function () {
        return false;
    });

    // 取消表单的默认提交动作 => type="submit"所有标签的提交事件都取消了
    $('form').submit(function () {
        // return false;
    })
</script>
</html>

五、正则

var re = /d{11}/ig
// 1.正则的语法书写在//之间
// 2.i代表不区分大小写
// 3.g代表全文匹配

// 匹配案例
"abcABCabc".search(/[abc]/); // 在字符串abcABCabc匹配单个字符a或b或c,返回匹配到的第一次结果的索引, 没有匹配到返回-1
"abcABCabc".match(/w/); // 进行无分组一次性匹配, 得到得到结果构建的数组类型[a, index:0, input:"abcABCabc"], 没有匹配到返回null
"abcABC".match(/w/g); // 进行全文分组匹配, 得到结果为结果组成的数组[a, b, c, A, B, C]
"abcABC".match(/(abc)(ABC)/);
// RegExp.$1取第一个分组
// RegExp.$2取第二个分组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正则</title>
</head>
<body>

</body>
<script>
    // 正则: 有语法规则的字符串, 用来匹配目标字符串
    // 定义正则

    // 第一种: 通过构造函数来创建正则对象, 特殊字符需要转义
    // var re = new RegExp('\d');
    // 第二种
    var re = /d{2}/;

    // 可以用正则的字符串方法
    var res = "#abc1abc56".search(re);
    console.log(res);
    // str.search(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-1


    var target = 'abc123你好ABC';
    var re = /((abc)((123)你好ABC))/;
    var res = target.match(re);
    console.log(res);
    // 取第四个分组
    console.log(res[4]);
    console.log(RegExp.$4);

    // str.match()
    // 匹配失败返回null, 匹配成功,如果非全文匹配, 返回匹配到的信息的数组形式
    // i: 不区分大小写  eg: /a/i 可以匹配a | A
    // g: 匹配匹配      eg: /a/g 可以匹配abcABCabc中的两个a
    console.log("abcABCabc".match(/(abc)ABCabc/g))
    console.log(RegExp.$1)
</script>
</html>

六、form案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>form案例</title>
    <style>
        .red {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--
http://api.map.baidu.com/place/v2/search

① query：搜索地点 （如：<input type="text" placeholder="如：肯德基" name="query">）
② region：区域中文名 （如：上海）
③ output：返回数据类型 （如：json /xml）
④ ak：密钥 （如：6E823f587c95f0148c19993539b99295）
-->
<form action="http://api.map.baidu.com/place/v2/search">
    地点(肯德基):<input class="query" type="text" name="query"> <span></span> <br>
    区域(上海):<input type="text" name="region"> <br>
    <select name="output">
        <option value="json">json</option>
        <option value="xml">xml</option>
    </select> <br>
    <input type="hidden" name="ak" value="6E823f587c95f0148c19993539b99295">
    <input type="submit" value="搜索">
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $('.query').blur(function () {
        if ($(this).val().search(/.+/) == -1) {
            $(this).next().text("请输入内容").addClass('red')
        }
    })
    $('.query').focus(function () {
        $(this).next().text("")
    })
</script>
</html>