您的位置：首页 > Web前端 > JQuery

JSP中如何使用JQuery？

2015-12-03 11:46 609 查看

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

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

然后在JSP中引入包：

[javascript] view
plaincopy print ?

<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
plaincopy print ?

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

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

[javascript] view
plaincopy print ?

$(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
plaincopy print ?

<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没有效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航