前端全栈学习第十七天-jq-第二天

绝地灬酷狼 2021-09-18 16:52 346阅读 0赞

1：链式编程

2：动画

3：表单

4：滚动

1：链式编程
    1.1多行代码合并成一行代码，需要提前认清此行代码返回的是不是对象，是对象才能链式编程
    1.2案例
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        /*
         * 多行代码合成一行代码，提前要知道此行代码返回的是不是对象，是对象才可以链式编程
         *获取列表中每个li，当前的li有高亮显示，点击的时候，可以让当前被点击的li字体变大，颜色改变
         * */
        $(function () {
            $("ul>li").mouseover(function () {
    
                $(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
            }).click(function () {
                $(this).css("fontSize", "50px").siblings("li").css("fontSize", "");
            })
        })
        
    </script>
    <body>
    <ul>
        <li>大家哈</li>
        <li>大</li>
        <li>大哈</li>
        <li>家哈</li>
    </ul>
    </body>
    </html>
    1.3获取兄弟元素的几个方法
    next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
    nextAll();//当前元素之后的所有兄弟元素
    prev();//当前元素之前的紧邻着的兄弟元素（上一个）
    prevAll();//当前元素之前的所有兄弟元素
    siblings();//当前元素的所有兄弟元素
    案例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul {
                list-style-type: none;
                width: 200px;
                position: absolute;
                left: 500px;
            }
    
            ul li {
                margin-top: 10px;
                cursor: pointer;
                text-align: center;
                font-size: 20px;
            }
        </style>
        <script src="../../jquery-1.12.2.js"></script>
        <script>
            $(function () {
                $("ul>li").mouseenter(function () {
                    $(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
                }).mouseout(function () {
                    $("ul>li").css("backgroundColor", "");
                }).click(function () {
                    /*
                     * 断链：对象调用方法，返回的不是当前对象，再调用方法，调用不了
                     * 解决锻炼-----修复锻炼
                     * .end()恢复到锻炼之前的效果
                     * */
                    $(this).prevAll().css("backgroundColor", "yellow").end().nextAll().css("backgroundColor", "blue");
                });
            })
        </script>
    </head>
    <body>
    <ul>
        <li>青岛啤酒（TsingTao）</li>
        <li>瓦伦丁（Wurenbacher）</li>
        <li>雪花（SNOW）</li>
        <li>奥丁格教士（Franziskaner）</li>
        <li>科罗娜喜力柏龙（Paulaner）</li>
        <li>嘉士伯Kaiserdom</li>
        <li>罗斯福（Rochefort）</li>
        <li>粉象（Delirium）</li>
        <li>爱士堡（Eichbaum）</li>
        <li>哈尔滨牌蓝带</li>
    </ul>
    
    </body>
    </html>
    2.1动画
    常见的显示隐藏
    Show(),hide(),里面既可以是number类型，也可以是字符串类型
    “slow”，“normal”，“fast”   ====200ms，400ms，600ms
    隐藏动画案例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 400px;
            }
    
            img {
                width: 90px;
                height: 90px;
                vertical-align: top;
            }
    
        </style>
        <script src="../../jquery-1.12.2.js"></script>
        <script>
            $(function () {
                $("#btn1").click(function () {
                    //获取div,最后一个图片,隐藏
                    $("div>img").last("img").hide(800, function () {
                        //arguments.callee相当于递归
                        $(this).prev().hide(800, arguments.callee);
                    });
                });
                //显示
                $("#btn2").click(function () {
                    $("div>img").first("img").show(800, function () {
                        //arguments.callee相当于递归
                        $(this).next().show(800, arguments.callee);
                    });
                });
            });
        </script>
    </head>
    <body>
    <input type="button" value="隐藏动画" id="btn1"/>
    <input type="button" value="显示动画" id="btn2"/>
    
    <div>
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
    </div>
    </body>
    </html>
    2.2其他动画的方法
    滑入滑出，切换划入划出 slideUp,slideDown,slideToggle
    淡入淡出，切换淡入淡出fadeIn,fadeOut,fadeToggle
    设置透明度：fadeTo(时间，到达的透明度)
    动画方法
    Animate({},动画的时间，回调函数)
    第一个参数:键值对,(数值的属性可以改,颜色不能改)
    第二个参数:动画的时间
    第三个参数:回调函数
    $("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
    $("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
    });
    3
    Jq中创建元素和追加元素
    .html(“”)  $(“”)
    $("div").html("");//清空层中内容
    $("div").empty();//清空层中的内容
    $("div").remove();//干掉自己
    $("#btn").click(function () {
    var cloneUl=$("#dv1").children().clone();
    cloneUl.css("fontSize","50px");
    $("#dv2").append(cloneUl);
    })
    案例动态创建表格
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            div {
                margin-left: 300px;
                margin-top: 100px;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
    
            td {
                font: 14px "微软雅黑";
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
        </style>
        <script src="../../jquery-1.12.2.js"></script>
        <script>
            // 模拟从后台拿到的数据
            var datas = [
                {
                    name: "传智播客",
                    url: "http://www.itcast.cn",
                    type: "IT最强培训机构"
                },
                {
                    name: "黑马程序员",
                    url: "http://www.itheima.com",
                    type: "大学生IT培训机构"
                },
                {
                    name: "传智前端学院",
                    url: "http://web.itcast.cn",
                    type: "前端的黄埔军校"
                }];
    
    
            $(function () {
                $("#btnCreate").click(function () {
                    var arr = [];
                    for (var i = 0; i < datas.length; i++) {
                        var data = datas[i];
                        arr.push("<tr> <td><a href=" + data.url + ">" + data.name + "</a></td>    <td>" + data.type + "</td>     </tr>")
                    }
                    $("#tbd").html(arr);
                })
            })
    
        </script>
    </head>
    
    <body>
    <input type="button" value="获取数据" id="btnCreate"/>
    
    <div>
        <table>
            <thead>
            <tr>
                <th>名称</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody id="tbd">
            </tbody>
        </table>
    </div>
    </body>
    
    </html>
    3.2通过val()来获取和设置表格的value值，
    $("#s1").val(2);//设置value为2的选中
    设置和获取系统或者自定义的属性的值
    Attr()可以设置属性值,两个参数:1.属性名字,2,属性值
    1个参数:1.属性名字,
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="../../jquery-1.12.2.js"></script>
        <script>
            $(function () {
                //点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
                $("#btn").click(function () {
                    //获取div,创建超链接
                    var aObj=$("<a></a>");
                    //attr();可以写两个参数:1参数；属性,2属性值
                    //attr();只写了一个参数,获取该元素的这个属性的值
                    aObj.attr("title","传智播客好帅"); //没啥用？
                    aObj.attr("href","http://www.itcast.cn");
                    aObj.text("传智播客");  //要显示的文字
    //                $("#dv").append(aObj);
                    aObj.appendTo($("#dv"));
                    console.log(aObj.attr("href"));
    
                });
            });
        </script>
    </head>
    <body>
    <input type="button" value="设置超链接" id="btn"/>
    <div id="dv"></div>
    </body>
    </html>
    
    3.3全选和全不选
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .wrap {
                width: 300px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
    
            td {
                font: 14px "微软雅黑";
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
        </style>
        <script src="../../jquery-1.12.2.js"></script>
        <script>
            //        $(function () {
            //            //为全选的复选框添加点击的方法
            //            $("#j_cbAll").click(function () {
            //                //当前的复选框选中
            //                //结果:true或者false
            //                var checked=$("#j_cbAll").prop("checked");
            //                $("#j_tb").find(":checkbox").prop("checked",checked);
            //            });
            //            //为tbody中所有的checkbox添加点击的方法
            //            $("#j_tb").find(":checkbox").click(function () {
            //                //获取所有的checkbox的个数
            //                var checkboxLength=$("#j_tb").find(":checkbox").length;
            //                //获取所有选中的checkbox的个数
            //                var checkedLength=$("#j_tb").find(":checked").length;
            //                //判断个数是否相等
            //                if(checkboxLength==checkedLength){
            //                    $("#j_cbAll").prop("checked",true);
            //                }else{
            //                    $("#j_cbAll").prop("checked",false);
            //                }
            //            });
            //
            //        });
        </script>
        <script>
            $(function () {
                //全选的复选框注册点击的事件
                $("#j_cbAll").click(function () {
                    //获取该复选框的选中状态,为下面所有的复选框的选中状态设置
                    var checked = $(this).prop("checked");
                    //获取所有的复选框
                    $("#j_tb").find(":checkbox").prop("checked", checked);
                });
                //获取所有的复选框
                $("#j_tb").find(":checkbox").click(function () {
                    //先获取所有复选框的个数
                    var length1 = $("#j_tb").find(":checkbox").length;
                    //获取所有选中的复选框的个数
                    var length2 = $("#j_tb").find(":checked").length;
                    console.log(length1 + "======" + length2);
                    //对比个数是否相同,如果相同则全选,否则反选
                    if (length1 == length2) {
                        $("#j_cbAll").prop("checked", true);
                    } else {
                        $("#j_cbAll").prop("checked", false);
                    }
                });
            });
        </script>
    </head>
    
    <body>
    <div class="wrap">
        <table>
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll"/>
                </th>
                <th>课程名称</th>
                <th>所属学院</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>JavaScript</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>css</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>html</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>jQuery</td>
                <td>前端与移动开发学院</td>
            </tr>
                </tbody>
        </table>
    </div>
    </body>
    
    </html>
    4.1设置和获取元素的宽和高
    .css  .height()  .width()
    Offset()方法返回的是对象,并且,对象中有一个left和一个top,并且
    值是数字类型
    设置的时候也可以没有px
    设置的时候元素在设置前如果没有脱离文档流,设置的时候会自
    动进行脱离文档流,默认为relative
    如果设置前有脱离文档流,那么设置的时候直接改变位置