First, import the jquery package file.
Download.
Then introduce the package in JSP:
<MCE: script src = "lib/jquery-1.5.2.js" mce_src = "lib/jquery-1.5.2.js" type = "text/JavaScript"> </MCE: SCRIPT>
Next, introduce your own JS:
<MCE: script src = "My. js" mce_src = "My. js" type = "text/JavaScript"> </MCE: SCRIPT>
The content of my. js file is as follows:
$ (Document ). ready (function () {<br/> $ ("<div> <p> Hello </P> </div> "). appendto ("body"); </P> <p> $ ("# Stop" ).css ("background", "yellow "); </P> <p> $ ("Li "). toggle (<br/> function () {<br/> Functions (this).css ({"list-style-type": "disc", "color": "blue "}); <br/>}, <br/> function () {<br/> Functions (this).css ({"list-style-type": "disc", "color ": "Red"}); <br/>}, <br/> function () {<br/> Functions (this(.css ({"list-style-type": "disc ", "color": "gray"}); <br/>}< br/>); <br/> });
The content of myjquerytest.html on the test page is as follows:
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> my jquery test </title> <br/> <MCE: script src = "lib/jquery-1.5.2.js" mce_src = "lib/jquery-1.5.2.js" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script src = "My. JS "mce_src =" My. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <button> change colors </button> <br/> <br /> <span> span </span> <br/> <div> div1 </div> <br/> <div> div2 </div> <br/> <Div> div3 </div> <br/> <div> div4 </div> <br/> <Div id = "stop"> stop here </div> <br/> <div> div6 </div> <br/> <div> div7 </div> <br/> <div> div8 </div> <br/> <br/> <ul> <br/> <li> Li1 </LI> <br/> <li> li2 </LI> <br/> <li> li3 </LI> <br/> <li> LI4 </LI> <br/> <li> li5 </LI> <br/> </ul> <br/> </body> <br/> </ptml>
The running effect is as follows:
Before:
After:
Finally, it is worth noting that the introduction of jquery's package file must be prior to the introduction of JS, otherwise jquery will not work.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
