JSP中如何使用JQuery？

最新推荐文章于 2023-11-28 18:33:38 发布

原创最新推荐文章于 2023-11-28 18:33:38 发布 · 3.4w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jsp #function #html #测试

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在JSP环境中引入JQuery库，并通过示例展示了如何使用JQuery选择器来创建新的DOM元素并将其附加到页面上，同时演示了如何改变元素样式及响应用户交互。

首先要导入JQuery的包文件，可以在这里下载。

然后在JSP中引入包：

<mce:script src="lib/jquery-1.5.2.js" mce_src="lib/jquery-1.5.2.js" type="text/javascript"></mce:script>

接下来再引入自己的js：

<mce:script src="my.js" mce_src="my.js" type="text/javascript"></mce:script>

我的my.js文件内容如下：

$(document).ready(function() { $("<div><p>Hello</p></div>").appendTo("body"); $("#stop").css("background","yellow"); $("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); }, function () { $(this).css({"list-style-type":"disc", "color":"gray"}); } ); });

测试页面MyJQueryTest.html的内容如下：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My jQuery Test</title> <mce:script src="lib/jquery-1.5.2.js" mce_src="lib/jquery-1.5.2.js" type="text/javascript"></mce:script> <mce:script src="my.js" mce_src="my.js" type="text/javascript"></mce:script> </head> <body> <button>Change colors</button> <br/> <span>span</span> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div id="stop">Stop here</div> <div>div6</div> <div>div7</div> <div>div8</div> <br/> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> </body> </html>

运行效果如下：

前：