点击按钮对数据进行操作(1)

最新推荐文章于 2022-01-20 14:40:36 发布

xiao_hei_1

最新推荐文章于 2022-01-20 14:40:36 发布

阅读量634

点赞数 1

本文链接：https://blog.csdn.net/xiao_hei_1/article/details/78229721

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <style>
        .skewClass{
            transform: skew(50deg);
        }
    </style>
    <script>
        $(document).ready(function(){
            $("button:eq(0)").click(function(){
                $("img").removeClass("skewClass");
            });
            $("button:eq(1)").click(function () {
                $("img").addClass("skewClass");
            });
            $("button:eq(0)").hover(function(){
                $("img").addClass("skewClass");
            },function(){
                $("img").removeClass("skewClass");
            });
            $("button:eq(2)").click(function(){
                $("div").html("ABC123");
            });
            $("button:eq(3)").click(function(){
                $("div").empty();
            });

            $("button:eq(4)").click(function(){
                for(var i=0;i<4;i++){
                    var a=$("li:eq("+i+")").text();
                    $("li:eq("+i+")").text(a.toUpperCase());

                }
            });
            $("button:eq(5)").click(function(){
                $("li").each(function(){
                    var t=$(this).text();
                    $(this).text(t.toLowerCase());
                });
            });
        });
    </script>
</head>
<body>
<button>点击我,移除class</button>
<button>点击我,添加class</button><br>
<button>点击我，向Div中添加ABC123</button>
<button>点击我，移除Div中字符串</button>
<button>点击我，把字母转换大写</button>
<button>点击我，把字母转换小写</button>
<img src="dou.jpg"/>
<div style="width: 300px;height: 300px; border: 2px solid red"></div>

<ul>
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
    <li>jkl</li>
</ul>
</body>
</html>