如何执行jQuery代码

我在这里有一个jQuery代码给朋友，我不知道如何使它工作。有人告诉我，我可以将它保存为html，因为代码有外部参考但是当我这样做的时候，它不起作用。如何执行jQuery代码

下面是代码：

<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>

来源

2011-05-05 tintincutes

*“我被告知，我可以将它保存为HTML作为代码具有参考外部” *这句话，令我您正在使用某种集成开发环境（IDE）并试图在该环境中使用jQuery和一个项目。你在使用哪种环境？另外：当你说“一个jQuery代码”时，你究竟是什么意思？一堆代码行？一份文件？ – 2011-05-05 06:35:04

@tintincutes，上面的代码应该工作，你得到什么错误，使用萤火虫和检查错误控制台 – kobe 2011-05-05 06:43:16

@ T.J。 Crowder：我发布了代码。我没有jQuery IDE。这是我第一次。我得到的是一个建议，并希望看到它是如何实施的 – tintincutes 2011-05-05 06:43:36

在通用，jQuery代码（即使用jQuery库的JavaScript代码）在Web浏览器上运行。您运行使用script标签网页浏览器的JavaScript代码，无论是其中的代码实际上是在标签：

<script> 
alert("I'm some JavaScript code"); 
</script>

...或者代码是在一个单独的文件和标签是指文件：

<script src="myfile.js"></script>

（请注意，结束标记是必需的，你不能写像<script src="myfile.js"/>一个自闭的标签。）

由于您使用jQuery，你必须包括jQuery库网络乐之前使用的任何代码吧：

<script src="jquery.min.js"></script>

或者，如果你使用它从一个CDN像谷歌的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

码要已经运行时，页面是“准备”你可以把一个函数内部的jQuery将调用页面时“准备”：

<script> 
jQuery(function() { 
    jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body); 
}); 
</script>

或者，也可以在最底层把你script标签在您的关闭</body>标记之前;如果你这样做，它仍然是最好的包装在一个函数的代码，这样你就不会创建不必要的全局符号：

<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或$，因此上述可能：

<script> 
$(function() { 
    $("<p>This paragraph added via jQuery</p>").appendTo(document.body); 
}); 
</script>

...但$用于其他图书馆，有一个办法让jQuery的不使用$符号。我提到了这个，所以你会理解为什么你在某些代码中看到jQuery，但在其他代码中为$。

下面是使用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>

Live copy

来源

2011-05-05 06:44:49

您可以创建一个HTML页面来测试jQuery的功能，如果你能提供更多的例子，我们可以帮助解决这些问题。我发现Cloud 9在开发Javascript应用程序时很有用，您可以试试看。

来源

2011-05-05 06:39:00 Pravin

如何执行jQuery代码

回答

相关问题