Home > Developer > Web Develop
1 <%@ Page Language="Java"Import="java.util.*"pageencoding="UTF-8"%>2 <%3 StringPath=Request.getcontextpath ();4 StringBasePath=Request.getscheme ()+ "://"5 +Request.getservername ()+ ":" +Request.getserverport ()6 +Path+ "/";7 %>8 9 <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en">Ten <HTML> One <Head> A <Basehref= "<%=basePath%>"> - - <title>My JSP ' jquery.jsp ' starting page</title> the - <Metahttp-equiv= "Pragma"content= "No-cache"> - <Metahttp-equiv= "Cache-control"content= "No-cache"> - <Metahttp-equiv= "Expires"content= "0"> + <Metahttp-equiv= "keywords"content= "Keyword1,keyword2,keyword3"> - <Metahttp-equiv= "description"content= "This is my page"> + <Scripttype= "Text/javascript"src= "/common/easyui/jquery.min.js"></Script> A <Scripttype= "Text/javascript"> at $ (document). Ready (function(){ - functionAnidiv () { - $("#box"). Animate ({width: -},"Slow"); - $("#box"). Animate ({width: -},"Slow", anidiv); - } - Anidiv (); in $(". BTN1"). Click (function(){ - $(": Animated"). CSS ("Background-color","Blue"); to }); + }); - </Script> the <styletype= "Text/css"> * Div{ $ background:#98bf21;Panax Notoginseng Height:40px; - width:100px; the position:relative; + Margin-bottom:5px; A } the </style> + </Head> - <Body> $ <Div></Div> $ <DivID= "box"></Div> - <Div></Div> - <Buttonclass= "BTN1">Mark animated Element</Button> the </Body> - </HTML>
Key explanations:
26 $ ( " #box "). Animate ({width: 100}, "slow ",anidiv);
The bank uses the jquery animate method, which animate changes the state of the element, which can be found in W3school, Anidiv is a method that executes after changing an element, similar to a loop here. $ (": Animated"). CSS ("background-color","blue");
: Animated
Matches all elements that are performing animations
Similar knowledge points:
: EQ (Index)
The element that matches the given index value
$ ("Tr:eq (1)")
Select a second TR element
: Even
Matches all elements with an even number of index values, counting from 0
$ ("Tr:even")
Match all TR with an even number of index starting from 0
: Odd
Matches all elements with an odd index value, counting from 0
$ ("tr:odd")
Match all of the index's odd tr starting from 0
: First
Match the first element found
$ ("Tr:first")
Match the first TR element found
: Last
Match the last element found
$ ("Tr:last")
Match the last TR element found
: GT (Index)
Match all elements greater than the given index value
$ ("tr:gt (0)")
Match all TR elements with indexes greater than 0
: LT (Index)
Matches all elements that are less than the given index value
$ ("Tr:lt (2)")
Match all TR elements with index less than 2
: Header
Match tag to Title element h
$ (": Header"). CSS ("Background", "#EEE");
Set the background color of the title to Eee
: not
Removes all elements that match a given selector
$ ("Input:not (: Checked)")
Select an element for which input is not checked
jquery Learning (Selector-simple-animated)
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
