前端-part9-jQuery操作样式二：元素追加+事件冒泡

2022-05-28 16:27:43 浏览数 (1)

1.添加到指定元素 内部 的后面

代码语言：javascript复制
$(A).append(B); // 把 B 追加到 A
$(A).appendTo(B); // 把 A 追加到 B

2.添加指定元素 内部 的前面

代码语言：javascript复制
$(A).preappend(B); // 把 B 前置到 A
$(A).preappendTo(B); // 把 A 前置到 B

3.添加到指定元素的 外部 的后面

代码语言：javascript复制
$(A).after(B); // 把 B 放到 A 的后面
$(A).insertAfter(B); // 把 A 放到 B 的后面

4.添加到指定元素 外部 的前面

代码语言：javascript复制
$(A).before(B); // 把 B 放到 A 的前面
$(A).insertBefore(B); // 把 A 放到 B 的前面

5.移除和清空元素

代码语言：javascript复制
remove() // 从 DOM 中删除所有匹配的元素
empty() // 删除匹配的元素集合中所有的子节点

6.关于登录时验证用户名或者密码不能为空的例子

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的登录验证</title>
    <style>

    </style>
</head>
<body>
<form action="" id="f1">
    <p>
        <label>用户名：
            <input type="text" name="username" id="i1">
            <span></span>
        </label>
    </p>
    <p>
        <label>密码：
            <input type="password" name="password" id="i2">
            <span></span>
        </label>
    </p>
    <button type="button" id="b1">登录</button>
</form>


<script src="jquery-3.3.1.js"></script>
<script>

    $("#b1").click(function () {
        var $inputEle_s = $("#f1 input"); // 首先找到 input 元素
        for (var i = 0; i < $inputEle_s.length; i  ) { 
            var tmp = $inputEle_s[i];
            if ($(tmp).val().length === 0) { // 如果 value 为空
                console.log($(tmp).parent().text().trim().slice(0, -1)); 
                          // .当前标签.父标签.文本.去空格.截取去冒号的文本串
                var s = $(tmp).parent().text().trim().slice(0, -1);
                $(tmp).next().text(s   "不能为空").css("color", "red");
            }
        }
    });
</script>
</body>
</html>

8.关于全选和取消全选以及反选的例子

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>全选和反全选</title>
    <style>

    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>二哈</td>
        <td>食屎</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>金毛</td>
        <td>撸管</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>柴柴</td>
        <td>装逼</td>
    </tr>
    </tbody>
</table>
<hr>
<button id="b1">全选</button>
<button id="b2">反选</button>
<button id="b3">取消</button>
<script src="jquery-3.3.1.js"></script>
<script>
    $("#b1").click( //定位到 "全选"
        function () {
            $(":checkbox").prop("checked", true); // 将 "checked" 属性设置为 true，即全选上 
        }
    );
    $("#b3").click( //定位到 "取消"
        function () {
            $(":checkbox").prop("checked", false);// 将 "checked" 属性设置为 false，即全不选 
        }
    );
    $("#b2").click(function() {
            var $check_s = $(":checkbox");
            for (var i = 0; i < $check_s.length; i  ) {
                var tmp = $check_s[i];  // 遍历所有的 "checkbox" 
                var s = $(tmp).prop("checked"); // 依次获得他们的 "checked" 属性值
                $(tmp).prop("checked", !s); // 设置为 ！属性，即全部为对应反属性
            }
        }
    )
</script>
</body>
</html>

9.文件操作之添加操作 ( 设置 PyCharm 的 JavaScript 的 language version 为 ECMAScript 6 )

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的文件操作</title>
    <style>

    </style>
</head>
<body>
<button id="b1">添加</button>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>二哈</td>
        <td>食屎</td>
        <td>
            <button class="delete">开除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>金毛</td>
        <td>装逼</td>
        <td>
            <button class="delete">开除</button>
        </td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
    $("#b1").click(function () { // 定位到 "添加" 这个按钮

        var trEle = document.createElement("tr"); // 创造一个元素
        trEle.innerHTML = `
        <td>2</td>
        <td>柴犬</td>
        <td>切糕</td>
        <td><button class="delete">开除</button></td>
    `;
        $("tbody").append(trEle) // 添加一行
    })
</script>
</body>
</html>

10.文件操作之复制操作

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的操作</title>
    <style>

    </style>
</head>
<body>
<button id="i1">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.js"></script>
<script>

    $("#i1").click(
        function () {
            $(this).clone(true).insertAfter(this)
            // clone 为 jQuery 的复制方法
            // 内部设置为 true 即代表复制出来的元素同样具备初始标签的 clone 方法
            // 如果后面遗忘了，可是把 this 去掉，点击其他生成按钮
            // 妈的，学你妈的前端啊，心真累...
        }
    );

    setInterval(f, 10)
</script>
</body>
</html>

11.关于事件的冒泡

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的事件冒泡</title>
    <style>

    </style>
</head>
<body>
    <div id="grandfather">
        <div id="father">
            <div id="son">儿子</div>
        </div>
    </div>
<script src="jquery-3.3.1.js"></script>
<script>
    $("#grandfather").click(
        function(){
            alert("爷爷辈的")
        }
    );
    $("#father").click(
        function(){
            alert("爸爸辈的")
        }
    );
    $("#son").click(
        function(event){
            alert("儿子辈的");
            event.stopPropagation() 
            // 阻止事件向上级冒泡，不然上面的 alert 会都弹出来的
            // 如果后面忘了，可以试着去掉 event.stopPropagation() 这句话
        }
    )
</script>
</body>
</html>
javascript version

0 人点赞