12月23日jQuery表单验证-九期线上班

jQuery表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery增添元素</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        #phpcn{
            background-color: #0C9A9A;
            border-radius: 2px;
            padding: 20px;
        }
        button{
            background-color: #0E9A00;
            border: 0;
            border-radius: 2px;
            padding: 10px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p id="phpcn">【PHP中文网-33703259@qq.com】</p>
    </div>
    <button type="button" onclick="appends()">[appends]在匹配元素末尾处插入参数内容</button>
    <button type="button" onclick="appendTos()">[appendTo]将匹配的元素插入到目标元素的最后面</button>
    <button type="button" onclick="prepends()">[prepend]将参数内容插入到每个匹配元素的前面</button>
    <button type="button" onclick="prependTos()">[prependTo]将所有元素插入到目标前面(元素内)</button>
    <button type="button" onclick="afters()">[after]在匹配元素后面插入指定内容</button>
    <button type="button" onclick="befores()">[before]在匹配元素前面插入指定内容</button>
    <button type="button" onclick="insertAfters()">[insertAfter]在目标元素后面插入匹配的元素</button>
    <button type="button" onclick="insertBefores()">[insertBefore]在目标元素前面插入匹配的元素</button>
    <button type="button" onclick="replaceWiths()">[replaceWith]用提供的内容替换匹配元素并删除原本元素</button>
    <button type="button" onclick="emptys()">[empty]移除匹配元素的子节点</button>
    <button type="button" onclick="removes()">[remove]移除匹配元素</button>
</body>
<script>
    //移除匹配元素
    function removes() {
        $('#phpcn').remove();
    }
    //移除匹配元素的子节点
    function emptys() {
        $('#phpcn').empty();
    }
    //用提供的内容替换匹配元素并删除原本元素
    function replaceWiths() {
        $('#phpcn').replaceWith('<p id="phpcn">【QQ:33703259】</p>')
    }
    //在目标元素前面插入匹配的元素
    function insertBefores() {
        $('<p id="phpcn">888</p>').insertBefore('#phpcn');
    }
    //在目标元素后面插入匹配的元素
    function insertAfters() {
        $('<p id="phpcn"> 999</p>').insertAfter('#phpcn');
    }
    //在匹配元素末尾处插入参数内容
    function appends() {
        $('#phpcn').append('666');
    }
    //将匹配的元素插入到目标元素的最后面
    function appendTos() {
        $('<p id="phpcn">666</p>').appendTo('#phpcn');
    }
    //将参数内容插入到每个匹配元素的前面
    function prepends() {
        $('#phpcn').prepend('WDM');
    }
    //将所有元素插入到目标前面(元素内)
    function prependTos() {
        $('<p>NEW</p>').prependTo('#phpcn');
    }
    //在匹配元素后面插入指定内容
    function afters() {
        $('#phpcn').after('<p id="phpcn">php</p>');
    }
    //在匹配元素前面插入指定内容
    function befores() {
        $('#phpcn').before('<p id="phpcn">phpcn</p>');
    }
</script>
</html>
jQuery表单验证

相关文章
