Home > Developer > Web Develop
There is a growing sense that conventional javascript is not keeping pace, and is going to learn to step in and learn from jquery.
jquery is a JavaScript library that can be downloaded from jquery.com and placed locally, using
<script src= "Jquery.js" ></script>
Statement to reference. If you don't want to download jquery, you can refer to the jquery library on the web and reference their jquery library from Google or Microsoft's servers.
Quote Google's jquery library:
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>
Quote Microsoft's jquery library:
<script src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" ></script>
It is recommended to cite Google or Microsoft's jquery library. Many users have already loaded jQuery from Google or Microsoft while visiting other sites. So the result is that when they visit your site, JQuery is loaded from the cache, which reduces the load time. At the same time, most cdns ensure that when a user requests a file, the response is returned from the server closest to the user, which can also increase the load speed.
All jquery functions are in one of the document ready functions
$ (document). Ready (function () {
---jQuery functions go here----
});
This is to prevent the document from running JQuery code before it is fully loaded (ready). If you run the function before the document is fully loaded, the operation may fail.
The jquery selector is out of the story. Two to pay attention to the place is finished, the following demonstration of an example, I have previously written in the regular JavaScript progress bar with jquery has been re-written again, although the use of knowledge points are very simple, but written out also cost me a little thought, because some things and regular JavaScript is still different, This is put in the back of the code. The following is the complete code for the progress bar.
<!doctype Html>"Utf-8"><title>jquery's progress bar </title><!--loading Google's Jquer library y-<script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>$ (document). Ready (function(e) {var i =0;//Progress Score//Add the Click event for the element that id= "BTN" (Start button), and the progress bar starts to grow$("#btn"). Click (function(){ //animate elements of the id= "Val" (progress bar div), which increases the width of the progress bar from 0px to 300px within 3000 milliseconds$("#val"). Animate ({width:'300px'}, the); $ (this). attr ("Disabled",true);//Disable the Start button$("#btnp"). attr ("Disabled",false);//Enable pause buttonSetpercent ();//Call the Setpercent () function, and the following percentage starts counting }); //percent Count function functionsetpercent () {//when the progress bar is not full if(I <= -) { $("#percent"). HTML (i+"%");//set the value of the progress percentagei = i +1;//make progress hundred points +1st = SetTimeout (setpercent,3);//This function is executed once every 3 milliseconds, which is equivalent to the progress bar increasing 1% every 3 milliseconds } //when the progress bar is full Else{cleartimeout (ST);//Progress percentage stops increasing$("#btnc"). attr ("Disabled",false);//enable the Clear button$("#btnp"). attr ("Disabled",true);//Disable the pause button } } //Add the Click event to the id= "BTNC" element (Clear button) and click Back to the initial state$("#btnc"). Click (function() {i =0;//Progress hundred points 0$("#val"). CSS ("width","0px");//progress bar 0$("#percent"). HTML ("0%");//Progress hundred points 0$("#btnp").Val("Pause");//pause button value is set to "pause"$("#btn"). attr ("Disabled",false);//enable the Start button$("#btnp"). attr ("Disabled",true);//Disable the pause button$("#btnc"). attr ("Disabled",true);//Disable the Clear button }); //Add the Click event for the element that id= "BTNP" (pause button), and the progress bar is paused or resumed when clicked$("#btnp"). Click (function(){ //if the button value is pause, it means that the progress is paused after pressing if("Pause"== $("#btnp").Val()) { $("#val"). Stop ();//Stop a progress bar animationCleartimeout (ST);//Stop the growth of the hundred score$("#btnp").Val("Go on");//Set the button value to go on$("#btnc"). attr ("Disabled",false);//enable the Clear button } //if the button value is go on, it means that the progress is continued after pressing Else{i = parseint (Delend ($ ("#percent"). HTML ()));//gets the percent-score string when paused, removes the semicolon, and turns to an integervar temp = -* ( --i);//Calculate animation remaining time$("#val"). Animate ({width:'300px'}, temp);//Continue animationSetpercent ();//hundred points continue to grow$("#btnp").Val("Pause");//Set the button value to "Pause"$("#btnc"). attr ("Disabled",true);//Disable the Clear button } }); //The function of removing the semicolon inside the hundred-score string functiondelend (str) {var temp=""; for(Var i=0; I < str.length-1; i++) {Temp=temp+str[i]; } return temp; }}); </script>"Bar"style="width:300px; height:30px; border:solid 1px; float:left;"> <div id="Val"style="height:100%; Background-color: #03F; width:0px ;"></div></div><div id="percent"style="float:left; line-height:30px;">0%</div><div style="Clear:both"></div><br/><input id="btn" type="Button"Value="Start"/><br/><input id="BTNC" type="Button"Value="Clear"disabled/><br/><input id="BTNP" type="Button"Value="Pause"Disabled/></body>
This time it took a while to achieve the growth of the hundred points, because to use the SetTimeout () function, in jquery, SetTimeout (code,delay) inside the code if it is a function, just fill in the function name, do not need quotation marks, do not need parentheses. For example, there is a function show (), set 500ms to call Show (), which should be written in jquery:
SetTimeout (show, 500);
And in traditional JavaScript it's written like this:
SetTimeout ("Show ()", 500);
This is the same for setinterval ().
Getting Started with jquery-progress bar
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
