HTML——jquery学习笔记+实例+动画效果+表格处理

最新推荐文章于 2024-07-03 21:14:45 发布

zhangyufeng0126

最新推荐文章于 2024-07-03 21:14:45 发布

阅读量1.9k

点赞数 2

分类专栏： HTML HTML 学习专栏文章标签： android 博客 html webview

本文链接：https://blog.csdn.net/zhangyufeng0126/article/details/52832887

版权

HTML 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

HTML 学习专栏

7 篇文章 2 订阅

订阅专栏

HTML——jquery学习笔记+实例

    $("img").hover(function () {
        alert("鼠标移动到图片上");
    },function () {
        alert("鼠标从图片上移出");
    })
})

绑定事件解除绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script src="../js/jquery-1.10.2.min.js"></script>
<script>
    //文档准备就绪
    $(function () {
//        $('p').append("<p>追加元素</p>")
//        $('p').appendTo("div");
        $('p').bind("click",function () {
            alert("绑定点击事件")
        })

        $('div').click(function () {
            $('p').unbind("click");

        })


    })

</script>

</head>
<body>
       <p>绑定</p>
       <p>绑定</p>
<div>解除绑定</div>
</body>
</html>

Band live 绑定时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clickme{
            width: 200px;
            height: 200px;
            background-color: #5d71fa;
        }

    </style>


    <script src="../js/jquery-1.4.2.min.js"></script>
    <script>
        //1.文档准备就绪
        $(function () {
//            $('p').append("<p>追加元素</p>");
            //2.把p标签加到div里
            // $('p').appendTo("div");
            //p点击事件
            $('p').bind("click",function () {
                alert("绑定点击事件");
            });
            //取消点击事件，没有参数解除所有事件
            $('div').click(function () {
                $('p').unbind("click");
            });
        });
        //die死亡
        $(function () {

            $('.clickme').live('click', function() {
                alert("Bound handler called.");
                $('body').append('<div class="clickme">Another target</div>');
            });
//            $('.clickme').bind('click', function() {
//                alert("Bound handler called.");
//                $('body').append('<div class="clickme">Another target</div>');
//            });
        })

    </script>

</head>
<body>
<div class="clickme" > Click here</div>
</body>
</html>

内层外层diiv监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    
    <script src="../js/jquery-1.4.2.min.js"></script>
<script>
    $(function () {
        $('#d1').click(function () {
            alert("点击了外层div");
        })
        $('#d2').click(function () {
            alert("点击了内层div");
            return false;
    })
        $('a').click(function (evt) {
            alert("点击了超链接");
            evt.stopPropagation();
        })
    })
</script>

</head>
<body>
<div id="d1" style="background-color: #9b256b;width: 200px;height: 200px">
    <div id="d2" style="background-color: #589b4c;width: 100px;height: 100px">
        <p>
            <a href="#">
                点击我
            </a>
        </p>
        
    </div>
    
</div>
</body>
</html>

简单动画效果

1.滑动上下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script src="../js/jquery-1.4.2.min.js"></script>
<script>
    $(function () {
//        $("p").show("slow",function(){
//            $(this).text("Animation Done!");
//        });
//        $('p').click(function () {
//            $(this).hide(10000)
//        })
//        $('p').toggle(function () {
//            $('p').hide(2000);
//        })

$('p').click(function () {
    $("p").toggle("slow");

})
        $('div').click(function () {
            $('p').toggle("slow");

        })


    })

</script>

</head>
<body>
<p>   Hello</p>
<p>   Hello</p>
<div> 出来</div>
</body>
</html>

2 放大缩小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.4.2.min.js"></script>
    <style>
        .block{
            width:100%;
            height:100%;
            fontSize: "10em";
            borderWidth: 10
        }

    </style>
<script>
    $(function () {

//        $("#go").click(function(){
//            $("#block").animate({
//                width: "90%",
//                height: "100%",
//                fontSize: "10em",
//                borderWidth: 10
//            }, 1000 );
//        });
        $("#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="../js/jquery-1.4.2.min.js"></script>
<style>
    .block{
        
        background-image: url("../../img/b.jpg");
    position: absolute;
      width: 854px;
        height: 1280px;
    }
    
</style>
<script>
    $(function () {
        $("#right").click(function(){
            $(".block").animate({left: '+150px', opacity: '0.3'}, "slow");

        });

        $("#left").click(function(){
            $(".block").animate({left: '-150px',opacity: '1'}, "slow");
        });
    })
    
</script>
</head>
<body>

<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>

</body>
</html>

表格出来增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/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()
//                $('table tr').eq(2).remove();
            })
        })





    </script>

</head>
<body>
<table border="1">
    <input type="button" value="新增表格" id="add">
    <input type="button" value="删除表格" id="del">
    <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>

</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/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()
//                $('table tr').eq(2).remove();
            })
        })





    </script>

</head>
<body>
<table border="1">
    <input type="button" value="新增表格" id="add">
    <input type="button" value="删除表格" id="del">
    <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>

</table>
</body>
</html>