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

来源：互联网发布：seo网站分析案例编辑：程序博客网时间：2024/06/06 13:27
<!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>
阅读全文
1 0