如何執行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代碼

回答

相關問題