How to use Jquery in xpage?

Jquery is very efficient for changing the visiblity and UI things...

It is very fast compare to our SSJS.,

Step 1:- Add the following url into Xpage -> resources -> Javascript Library...

"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"

Step 2:- Put the following code into your Xpage you wil find the nice animation and nice funtionality...

Thanks W3Schools

Code:-

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"><p></p>
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$("#animate").click(function(){
<!-- $("div").fadeTo("slow",0.25); -->
<!-- $("div").fadeOut(4000); -->
<!-- $("#test").animate({left:"100px"},"slow");
$("#test").animate({fontSize:"3em"},"slow");
$("#test").animate({left:"100px"},"slow");
$("#test").animate({fontSize:"1.3em"},"slow"); -->

$("#hide1").animate({left:300},"slow");
$("#hide1").animate({right:300},"slow");
$("#hide1").animate({left:100},"slow");
$("#hide1").animate({right:100},"slow");
<!-- $(this).hide(); -->
});

$("#hide1").click(function(){
<!-- $("div").fadeTo("slow",0.25); -->
<!-- $("div").fadeOut(4000); -->

$("#test").html("W3Schools");
});

});
</script><xp:this.resources>
<xp:script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" clientSide="true">



</xp:script>
</xp:this.resources><div id="test" style="background-color:yellow;height:100px;width:150px">
<xp:inputText id="inputText1" readonly="true">
<xp:this.value><![CDATA[#{javascript:"Hello "}]]></xp:this.value>
</xp:inputText>
</div>
<p id="animate">Click me to animate!</p>
<p id="hide1" style="position:absolute">Click me to hide!</p>


</xp:view>