py fullstack 3-44 js jquery练习

后面的课程会经常用到之前学的，或练习的内容，所以在开始的时候尽量做练习，对知识点要比较熟悉

jquery 属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div class="div1" con="hello"></div>
 
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
 
<input type="text" value="good">
<div value="haha"></div>
 
<div id="id1">
    test,test
    <p>hello,world</p>
</div>
 
<script src="jquery-3.3.1.js"></script>
<script>
    // 判断某个标签是否有某个属性,返回布尔值
    // res=$("div").hasClass("div4");
    // console.log(res);
 
    // .attr属性
    // console.log($("div").attr("con"));
    // console.log($("div").attr("con","hahaha"));
 
    // .attr属性某些场景不可用，比如input标签的checked=checked属性，如果在标签内没明确写checked=checked，则通过attr属性获
    // 取的值为undifined,因此没法拿这个值做某些判断,能多自定义的属性做操作
    // console.log($(":checkbox:first").attr("checked"));  // 结果 checked 这里input标签专有语法，获取第一个input标签的属性名checkbox的值
    // console.log($(":checkbox:last").attr("checked"));   // 结果 undefined 这里input标签专有语法，获取第二个input标签的属性名checkbox的值
 
    // 因此有个prop属性可以解决这个问题，prop属性能获取到用户到底有没有选择，如果有选择则prop获取的值为true,否则为false,
    // 因此就可以基于这个值做判断操作，但是prop属性只对标签默认自带的属性有效，自定义的属性就不行
    // console.log($(":checkbox:first").prop("checked"));  // true
    // console.log($(":checkbox:last").prop("checked"));  // false
 
    // console.log($("div").prop("con"));  // undefined
    // console.log($("div").prop("class"));  // div1
 
    // console.log($("#id1").html());  // <p>hello,world</p>
    // console.log($("#id1").text());  // hello,world
    // console.log($("#id1").html("<h1>hahaha</h1>"));  // 覆盖之前的html的内容,只显示渲染后的内容
    // console.log($("#id1").text("<h1>hahaha</h1>"));  // 覆盖之前的内容，当做文本展示
 
    // val方法，只能对标签的固有属性生效
    // console.log($(":text").val());
    // console.log($(":text").next().val());  // 由于是自定义的属性，这里不生效，无结果
    // console.log($(":text").val("789"));   // 重新赋值
 
    // css样式，多个键值对可用一个字典的形式
    // $("div").css("color","red"); // 单个键值对的方式
    // $("div").css({"color":"red", "background-color":"green"});
</script>
 
</body>
</html>

插入代码推荐的插件工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1" con="hello"></div>

<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见

<input type="text" value="good">
<div value="haha"></div>

<div id="id1">
    test,test
    <p>hello,world</p>
</div>

<script src="jquery-3.3.1.js"></script>
<script>
    // 判断某个标签是否有某个属性,返回布尔值
    // res=$("div").hasClass("div4");
    // console.log(res);

    // .attr属性
    // console.log($("div").attr("con"));
    // console.log($("div").attr("con","hahaha"));

    // .attr属性某些场景不可用，比如input标签的checked=checked属性，如果在标签内没明确写checked=checked，则通过attr属性获
    // 取的值为undifined,因此没法拿这个值做某些判断,能多自定义的属性做操作
    // console.log($(":checkbox:first").attr("checked"));  // 结果 checked 这里input标签专有语法，获取第一个input标签的属性名checkbox的值
    // console.log($(":checkbox:last").attr("checked"));   // 结果 undefined 这里input标签专有语法，获取第二个input标签的属性名checkbox的值

    // 因此有个prop属性可以解决这个问题，prop属性能获取到用户到底有没有选择，如果有选择则prop获取的值为true,否则为false,
    // 因此就可以基于这个值做判断操作，但是prop属性只对标签默认自带的属性有效，自定义的属性就不行
    // console.log($(":checkbox:first").prop("checked"));  // true
    // console.log($(":checkbox:last").prop("checked"));  // false

    // console.log($("div").prop("con"));  // undefined
    // console.log($("div").prop("class"));  // div1

    // console.log($("#id1").html());  // <p>hello,world</p>
    // console.log($("#id1").text());  // hello,world
    // console.log($("#id1").html("<h1>hahaha</h1>"));  // 覆盖之前的html的内容,只显示渲染后的内容
    // console.log($("#id1").text("<h1>hahaha</h1>"));  // 覆盖之前的内容，当做文本展示

    // val方法，只能对标签的固有属性生效
    // console.log($(":text").val());
    // console.log($(":text").next().val());  // 由于是自定义的属性，这里不生效，无结果
    // console.log($(":text").val("789"));   // 重新赋值

    // css样式，多个键值对可用一个字典的形式
    // $("div").css("color","red"); // 单个键值对的方式
    // $("div").css({"color":"red", "background-color":"green"});
</script>

</body>
</html>

练习 jquery方式正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <button onclick="selectall();">全选</button>
    <button onclick="cancel();">取消</button>
    <button onclick="reverse();">反选</button>

    <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
    </table>

    <script src="jquery-3.3.1.js"></script>
    <script>
        function selectall(){
            $(":checkbox").each(function () {
            $(this).prop("checked", true);
            })
        }

        function cancel(){
            $(":checkbox").each(function () {
            $(this).prop("checked", false);
            })
        }

        function reverse(){
            $(":checkbox").each(function () {
                if ($(this).prop("checked")){
                    $(this).prop("checked", false)
                }else{
                    $(this).prop("checked", true)
                }
            })
        }
    </script>
</body>
</html>

练习 jquery 模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


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

    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

    }
</script>
</body>
</html>

jquery 文档标签操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div class="div1">
    <p>ppp</p>
</div>


<button class="bt">按钮</button>
<script src="jquery-3.3.1.js"></script>
<script>

    // jquery 增加一个onclick事件
    // $(".bt").click(function () {
    //     alert(12345);
    // })

    // jquery 增加一个标签对象 方式1
    // $(".bt").click(function () {
    //     $(".div1").append("<h1>hahaha</h1>");
    // });

    // jquery 增加一个标签对象 方式2  这种方式更灵活，想创建标签对象，在创建内容，可以在浏览器按F12后看Elements增加标签的层级结构
    $(".bt").click(function () {
        var $ele=$("<h1>");
        $ele.html("AAAA");
        $ele.css("color","red");

// 向标签内部插入的方法
        // $(".div1").append($ele); // 在cless=div1标签下面添加标签对象，在已存在标签的后面加标签对象
        // $ele.appendTo(".div1");  // 添加标签对象到class=div1的标签
        // $(".div1").prepend($ele);  // 会向已存在标签前面增加标签对象
        // $ele.prependTo(".div1");  // 会向已存在标签前面增加标签对象，只是写法不一样

// 向标签外部插入
        // $(".div1").after($ele);
        // $ele.insertAfter(".div1");
        // $(".div1").before($ele);
        // $ele.insertBefore(".div1");
// 替换
        // $(".div1 p").replaceWith($ele);

// 删除或清空
        $(".div1").empty();  // 只是清空.div1这个标签里面的html及内容，软删除
        // $(".div1").remove();  // 真正删除标签及内容，物理删除

    })
// 复制
//     见 jquery_复制标签示例
</script>
</body>
</html>

jquery_复制标签示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<!--<div class="outer">-->
    <!--<div class="item">-->
        <!--<button onclick="add()">+</button>-->
        <!--<input type="text">-->
    <!--</div>-->
<!--</div>-->


<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="jquery-3.3.1.js"></script>
<script>
    // 这样写的话，每点一次“+”号就会去clone一份class=item的所有标签，多点几次后标签就成倍增加，这种方式不可取
    // function add() {
    //     var $clone_ele=$(".item").clone();
    //     $(".outer").append($clone_ele);
    // }

    // 在button的onclick事件函数中加一个this，这样的话每次都可以复制一个标签
    function add(self) {
        var $clone_ele=$(self).parent().clone();
        $clone_ele.children("button").text("-").attr("onclick","remove_obj(this)");  // 这里用prop是不生效的
        $(".outer").append($clone_ele);
    }

    function remove_obj(self) {
        $(self).parent().remove();
    }
</script>
</body>
</html>