JSP中如何使用JQuery？

来源：互联网发布：网络的利与弊ppt 编辑：程序博客网时间：2024/05/20 06:53

转载自：http://blog.csdn.net/chenxingyi123/article/details/6321555

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

然后在JSP中引入包：

[javascript] view plaincopyprint?
<mce:script src="lib/jquery-1.5.2.js" mce_src="lib/jquery-1.5.2.js" type="text/javascript"></mce:script>  

接下来再引入自己的js：

[javascript] view plaincopyprint?
<mce:script src="my.js" mce_src="my.js" type="text/javascript"></mce:script>  

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

[javascript] view plaincopyprint?
$(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的内容如下：

[java] view plaincopyprint?
<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>  

运行效果如下：

前：

后：

最后值得注意的是，JQuery的包文件的引入必须在js引入的前面，不然JQuery没有效果。

0 0