如何执行jQuery代码 [英] How to execute a jQuery code
问题描述
我这里有一个朋友给的jQuery代码，我不确定如何使它工作. 有人告诉我可以将其另存为html，因为代码具有外部引用 但是当我这样做的时候，它是行不通的.
I have a jQuery code here given by a friend and I'm not sure how to make it work. I was told that I can save it as html as the code has a reference as external But when I did it didn't work.
这是代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tyu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tintin
{
position:relative;
color:white;
font-size:18pt;
font-style:bold;
font-family:Calibri;
width:800px;
height:500px;
}
#text
{
top:0px;
position:absolute;
filter:alpha(opacity=100);
opacity:100;
left:600px;
}
</style>
<script type="text/javascript">
//var txt=['text 1','text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'], init=0,i=0,k=0,speed=40,el;
//var loopCount=1000;
//var j=0;
//var padd = 50; //set this to an approriate increment
//function fade(){
//init==0?i++:i--;
//el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
//el.firstChild.nodeValue=txt[k];
//if(i==100)init=1;
//if(i==0) {init=0;k++;j++;
//el.style.paddingLeft=50*k;
//}
//if(k==txt.length)k=0;
//if (j<loopCount) setTimeout('fade()',speed);
//}
//window.onload=function(){
//el=document.getElementById('tintin');
//fade();
//}
$(document).ready(function () {
var txt = ['text 1', 'text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'];
var k = -1;
fade();
function fade() {
k++;
if (k == 9) {
k = 0;
}
$("#text").text(txt[k]);
$("#text").css("left", (600 - k * 100) + "px");
$("#text").fadeTo(1, 100);
console.log((600 - k * 100) + "px");
console.log($("#text").css("left"));
$("#text").css("top", (k * 100) + "px");
var nl = "-=" + (k*100) + "px";
console.log(nl);
var nt = "-=" + (300 - k*100) + "px";
var op = Math.floor((-($("#text").css("left").replace("px", "") - 600 - k * 100)) / 600) + .3;
$("#text").animate({
left: "300px", //
opacity: op,
top: "300px"
}, 1000);
$("#text").animate({
left: nl, //
opacity: 0,
top: nt
}, 1000);
setTimeout(fade, 2000);
}
});
</script>
</head>
<body>
<div id="tintin" style="color:#fff !important; background-color:blue;">
<div id="text">
</div>
</div>
</body>
</html>
推荐答案
在 general 中，jQuery代码(即使用jQuery库的JavaScript代码)在Web浏览器上运行.您可以使用script标记在Web浏览器中运行JavaScript代码，而该代码实际上位于标记中:
In general, jQuery code (that is, JavaScript code that uses the jQuery library) runs on the web browser. You run JavaScript code in web browsers using script tags, either where the code is actually in the tag:
<script>
alert("I'm some JavaScript code");
</script>
...或者代码位于单独的文件中，且标记指向文件:
...or where the code is in a separate file and the tag refers to the file:
<script src="myfile.js"></script>
(请注意，结束标记是必需的，您不能将其写为自闭标记，例如<script src="myfile.js"/>.)
(Note that the end tag is required, and you cannot write it as a self-closing tag like <script src="myfile.js"/>.)
由于您使用的是jQuery，因此必须在所有使用该代码的代码之前 包括jQuery库文件:
Since you're using jQuery, you must include the jQuery library file before any code that uses it:
<script src="jquery.min.js"></script>
或者如果您是通过CDN(例如Google的CDN)来使用它的话，
Or if you're using it from a CDN like Google's:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
要在页面就绪"时运行的代码，可以放入页面就绪"时jQuery将调用的函数:
Code you want to have run when the page is "ready" you can put inside a function that jQuery will call when the page is "ready":
<script>
jQuery(function() {
jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body);
});
</script>
或者，您可以将script标记放在页面的最底部，紧接在关闭</body>标记之前；如果这样做，仍然最好将代码包装在一个函数中，这样就不必不必要地创建全局符号:
Alternately, you can put your script tag at the very bottom of your page, just before your closing </body> tag; if you do, it's still best to wrap your code in a function so you don't create global symbols unnecessarily:
<script>
// This creates a function to contain any symbols that you create, then
// immediately calls it. As written, it assumes it's at the very bottom of
// the page and so things are basically ready.
(function() {
jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body);
})();
</script>
jQuery的主要功能jQuery作为jQuery或$可用，因此上面的内容可能是:
jQuery's main function, jQuery, is available either as jQuery or $, so the above could be:
<script>
$(function() {
$("<p>This paragraph added via jQuery</p>").appendTo(document.body);
});
</script>
...但是由于其他库使用了$，因此有一种方法可以使jQuery不使用$符号.我提到这一点是为了让您理解为什么在某些代码中看到jQuery，而在其他代码中看到$.
...but as $ is used by other libraries, there's a way to make jQuery not use the $ symbol. I mention this so you'll understand why you see jQuery in some code, but $ in other code.
这是使用jQuery的完整示例:
Here's a complete example of using jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Test Page</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<input type='button' id='theButton' value='Click Me'>
<script>
jQuery(function() {
// Hook the button click
jQuery("#theButton").click(function() {
jQuery("<p>This paragraph was added via jQuery.</p>").appendTo(document.body);
});
});
</script>
</body>
</html>
这篇关于如何执行jQuery代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
