jQuery 多种高级页面属性和动画效果

╰+攻爆jí腚メ 2022-07-16 09:43 183阅读 0赞

**完成目标：利用jQuery语法完成多种页面属性和动画效果**

**1.文字淡入淡出，显示及隐藏。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <script>
            $(function () {
                $('p').click(function () {
                    $('p').toggle("slow")
                })
                $('div').click(function () {
                    $('p').toggle("slow")
                })
            })
    
        </script>
    </head>
    <body>
    <p>可隐藏。可显示</p>
    <p>可隐藏。可显示</p>
    <div>点击</div>
    </body>
    </html>

效果：

**![Center][]![Center 1][]![Center 2][]  
2.点击按钮使文字放大。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <style>
        </style>
        <script>
          $(function () {
              $('#go').click(function () {
                  $('#block').animate({
                      width: "90%",
                      height: "100%",
                      fontSize: "10em",
                      borderWidth: 10
                  },1000)
              })
          })
        </script>
    </head>
    <body>
    <button id="go"> Run</button>
    <div id="block">Hello!</div>
    </body>
    </html>

效果：

**![Center 3][]![Center 4][]  
3.图片或文字的左移或右移，并伴随逐渐消失和逐渐显示效果**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <style>
            .block{
                background-image: url("../image/1.jpg");
                width: 500px;
                height: 500px;
                position: relative;
            }
        </style>
        <script>
            $(function () {
                $("#right").click(function(){
                    $(".block").animate({left: '+150px',height: 'toggle', opacity: 'toggle'}, "slow");
                });
    
                $("#left").click(function(){
                    $(".block").animate({left: '-150px'}, "slow");
                    $(".block").animate({
                        height: 'toggle', opacity: 'toggle'
                    }, "slow");
                });
            })
        </script>
    </head>
    <body>
    <button id="left">«</button>
    <button id="right">»</button>
    <div class="block"></div>
    </body>
    </html>

效果：

**![Center 5][]![Center 6][]![Center 7][]  
4.利用jQuery代码完成对表格的修改、保存和CheckBox的全选功能。**

**方法1：不适用于大型表格和数据，多用于练习使用。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.4.2.min.js"></script>
        <script>
            $(function () {
                $('#checkAll').click(function () {
                    if(this.checked){
                        $('.check').attr("checked",true);
                    }else {
                        $('.check').attr("checked",false);
                    }
                })
    
                $('.change').click(function () {
                    var ok=$(this).parents("tr");
                    var tdText1=ok.find("td:eq(1)").html();
                    var tdText2=ok.find("td:eq(2)").html();
                    var tdText3=ok.find("td:eq(3)").html();
                    var a=$("<input type='text' id='name'>");
                    var b=$("<input type='text' id='sex'>");
                    var c=$("<input type='text' id='age'>");
                    ok.find("td:eq(1)").html(a);
                    ok.find("td:eq(2)").html(b);
                    ok.find("td:eq(3)").html(c);
                    a.val(tdText1);
                    b.val(tdText2);
                    c.val(tdText3);
                })
                $('.save').click(function () {
                    var ok=$(this).parents("tr");
                    var text=document.getElementById("name");
                    var text1=document.getElementById("sex");
                    var text2=document.getElementById("age");
                    ok.find("td:eq(1)").html(text.value);
                    ok.find("td:eq(2)").html(text1.value);
                    ok.find("td:eq(3)").html(text2.value);
                })
            })
        </script>
    </head>
    <body>
    <table border="1" >
        <tr align="center">
            <td><input type="checkbox" id="checkAll"></td>
            <td width="100px">姓名</td>
            <td width="100px">性别</td>
            <td width="100px">年龄</td>
            <td width="100px">操作</td>
        </tr>
        <tr  align="center">
            <td><input type="checkbox" class="check"></td>
            <td >张三</td>
            <td >男</td>
            <td >18</td>
            <td>
                <input type="button" value="编辑" class="change" style="float: left">
                <input type="button" value="保存" class="save">
            </td>
        </tr>
        <tr  align="center">
            <td><input type="checkbox" class="check"></td>
            <td>李四</td>
            <td >女</td>
            <td>20</td>
            <td>
                <input type="button" value="编辑" class="change" style="float: left">
                <input type="button" value="保存" class="save">
            </td>
        </tr>
        <tr  align="center">
            <td><input type="checkbox" class="check"></td>
            <td>王五</td>
            <td >男</td>
            <td>25</td>
            <td>
                <input type="button" value="编辑" class="change" style="float: left">
                <input type="button" value="保存" class="save">
            </td>
        </tr>
    </table>
    </body>
    </html>

**效果：**

**![Center 8][]**

**![Center 9][]**

**方法2：可适用于大型表格，也可做开发使用。并增加删除和新增行的功能。**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>可编辑的表格</title>
        <script src="jquery-1.4.2.min.js"></script>
        <style>
            table{
                border: 1px solid black;
                border-collapse: collapse;
                width: 500px;
            }
            table th {
                border: 1px solid black;
                width: 25%;
            }
            table td {
                align-items: center;
                border: 1px solid black;
                width: 25%;
            }
            table th {
                background-color: #A3BAE9;
            }
        </style>
        <script>
            //文档准备就绪
            $(function () {
                //设置 所有 td 居中
                $('table td').attr("align","center");
                //标签+属性选择所有<编辑>按钮
                $('input[value="编辑"]').click(function () {
                    //获取每一个<编辑>按钮的 下标（从0开始 所以需要+2 = 按钮在表格的所在行数）
                    var numId = $('input[value="编辑"]').index($(this))+2;
                    //选择表格中的所有tr 通过eq方法取得当前tr
                    var ttr = $('table tr').eq(numId);
                    /*当前行使用find方法找到每一个td列
                     each方法为每一个td设置function
                     */
                    ttr.find("td").each(function () {
                        /*过滤 td中的元素
                         checkbox 、 button、text 不需要执行append
                         注意 return 为 跳出当前 each
                         return false 为 跳出整个 each
                         */
                        if($(this).children("input[type='checkbox']").length>0){
                            return ;
                        }
                        if($(this).children("input[type='button']").length>0){
                            return ;
                        }
                        if($(this).children("input[type='text']").length>0){
                            return ;
                        }
    
                        var tdText = $(this).html();
                        $(this).html("");
                        var inputObj = $("<input type='text'>");
                        inputObj.appendTo($(this));
                        inputObj.css("width","95%");
                        inputObj.val(tdText);
                    });
                })
                //为每一个确定按钮设置点击事件
                $('input[value="确定"]').click(function () {
                    /*通过parents方法获取<确定>按钮的父容器tr
                     再为 tr中的每一个text设置function
                     */
                    var ttr=$(this).parents("tr");
                    ttr.find('input[type="text"]').each(function () {
                        var inputVal = $(this).val();
                        $(this).parents('td').html(inputVal);
                    })
                })
                //全选/反选
                $('#cha').click(function () {
                    //判断checkbox是否选中
                    if($(this).is(':checked')){
                        $('input[type="checkbox"]').attr("checked","true");
                    }else{
                        $('input[type="checkbox"]').removeAttr("checked");
                    }
                })
                $('#add').click(function () {
                    $('table tr').eq(2).clone(true).appendTo("table");
                })
                $('#del').click(function () {
                    $('tr:last').remove();
                })
            })
        </script>
    </head>
    <body>
    <table border="1">
        <thead>
        <tr>
            <th colspan="4">编辑表格</th>
        </tr>
        </thead>
    
        <tr>
            <th><input type="checkbox" id="cha"></th>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>000001</td>
            <td>张三</td>
            <td >
                <input type="button" value="编辑" >
                <input type="button" value="确定" >
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>000002</td>
            <td>李四</td>
            <td>
                <input type="button" value="编辑" >
                <input type="button" value="确定" >
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>000003</td>
            <td>王五</td>
            <td>
                <input type="button" value="编辑" >
                <input type="button" value="确定" >
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>000004</td>
            <td>赵六</td>
            <td>
                <input type="button" value="编辑" >
                <input type="button" value="确定" >
            </td>
        </tr>
        <input type="button" value="新增" id="add">
        <input type="button" value="删除" id="del">
    </table>
    </body>
    </html>

效果：

**![Center 10][]  
![Center 11][]**

[Center]: https://img-blog.csdn.net/20161013195902234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20161013195909766?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220716/ef1d0413cf5a4df8975d84ae9ffe7c6d.png
[Center 3]: https://img-blog.csdn.net/20161013200338490?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220716/10aa9e0fc14d4cd2aee01f44361a130b.png
[Center 5]: https://img-blog.csdn.net/20161013201429366?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: https://img-blog.csdn.net/20161013201458492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: /images/20220716/9435aceecf8e4aeeafbe361788999ccc.png
[Center 8]: /images/20220716/570858729f2648d28a126a5f85408442.png
[Center 9]: /images/20220716/4dd1e152cdc5421fa7284350c43a852c.png
[Center 10]: /images/20220716/22a69612432449758f161a7b3561945b.png
[Center 11]: /images/20220716/99c3b6aceae741ed8fc3b6483c830992.png