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

最新推荐文章于 2024-05-14 07:21:49 发布

孺子-小哥

最新推荐文章于 2024-05-14 07:21:49 发布

阅读量5.6k

点赞数

分类专栏： Java Script 文章标签： JavaScript jQuery

本文链接：https://blog.csdn.net/d18865556765/article/details/52809574

版权

Java Script 专栏收录该内容

8 篇文章 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>

效果：

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>

效果：

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>

效果：

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>

效果：

方法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>

效果：

孺子-小哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 多种高级页面属性和动画效果

完成目标：利用jQuery语法完成多种页面属性和动画效果1.文字淡入淡出，显示及隐藏代码： Title $(function () { $('p').click(function () { $('p').toggle("slow") })
复制链接

扫一扫