2015-11-04 60 views
1

我正在使用jQuery的第一次,我不能得到它下載。 我是新的發佈。如果我沒有正確地完成,我很抱歉;任何建設性的批評是受歡迎的。 我對編碼非常陌生。我現在在大學有3個季度,並且已經介紹了C#,Ruby,html,SQL,JS和PS。我知道數據類型,函數,變量和循環......但我的心臟語法知之甚少,而且我非常掙扎。 我需要新手級別的幫助,希望能夠通過簡單明瞭的步驟讓我的jQuery從下載到工作。 我覺得有點愚蠢,但我一直在這個太久,需要幫助。我相信這對熟悉它的人來說相當簡單。有人請幫助!我花了太多的時間嘗試沒有結果....如何下載Jquery如果鏈接只顯示源代碼並將其連接到我的html

爲了做到這一點,我明白我需要粘貼一個Jquery庫文件「下載未壓縮,開發jQuery 1.11.3」 和....「從jQuery官方站點下載未壓縮的開發jQuery Migrate 1.2.1「 」。

我試圖下載它,但我得到的只是源文件。我看着utube vids學習,但沒有找到太多東西,而我發現的東西是針對具體的教程目標,我無法吸收它。

我明白,爲了讓我的jQuery庫在我的html,我需要這樣的:

不知道,如果它在HTML的頭部或身體....我想我有在正確的位置? 我被告知必須在我的CDN前添加http:

我試圖做到這一點:

我的網頁應該如何工作。 關閉所有標題的頁面加載。當用戶點擊帶有加號的標題時,將顯示下面的文本,並且加號變爲減號。如果用戶單擊帶有減號的標題,則文本隱藏並且標誌變爲加號。

我有一個HTML頁面:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>FAQs</title> 
    <link rel="shortcut icon" href="images/favicon.ico"> 
    <link rel="stylesheet" href="index.css"> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="faqs.js"></script>  

</head> 

<body> 
    <section id="faqs"> 
     <h1>jQuery FAQs</h1> 
     <h2><a href="#" id="first_link">What is jQuery?</a></h2> 
     <div> 
      <p>jQuery is a library of the JavaScript functions that you're most likely 
       to need as you develop web sites. 
      </p> 
     </div> 
     <h2><a href="#">Why is jQuery becoming so popular?</a></h2> 
     <div> 
      <p>Three reasons:</p> 
      <ul> 
       <li>It's free.</li> 
       <li>It lets you get more done in less time.</li> 
       <li>All of its functions are cross-browser compatible.</li> 
      </ul> 
     </div> 
     <h2><a href="#">Which is harder to learn: jQuery or JavaScript?</a></h2> 
     <div> 
      <p>For most functions, jQuery is significantly easier to learn 
       and use than JavaScript. But remember that jQuery is JavaScript. 
      </p> 
     </div> 
    </section> 
</body> 
</html> 

,我有一個的CSS頁面:

/* type selectors */ 
article, aside, figure, figcaption, footer, header, nav, section { 
    display: block; 
} 
* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 87.5%; 
    width: 650px; 
    margin: 0 auto; 
    border: 3px solid blue; 
} 
section { 
    padding: 15px 25px; 
} 
h1 { 
    font-size: 150%; 
} 
h2 { 
    font-size: 120%; 
    padding: .25em 0 .25em 25px; 
    cursor: pointer; 
    background: url(images/plus.png) no-repeat left center; 
} 
h2.minus { 
    background: url(images/minus.png) no-repeat left center; 
} 
a { 
    color: black; 
    text-decoration: none; 
} 
h2:hover {background-color: #ccccff;} 
a:focus, a:hover { 
    color: blue; 
} 
div { 
    display: none; 
} 
div.open { 
    display: block; 
} 
ul { 
    padding-left: 45px; 
} 
li { 
    padding-bottom: .25em; 
} 
p { 
    padding-bottom: .25em; 
    padding-left: 25px; 
} 

and two .png images that are a and a minus plus signs. 
+0

'文件另存爲... ...和瞧,它被下載。然後簡單地指出一個腳本標籤 – charlietfl

回答

0

`

\t $(document).ready(function() { 
 
\t $("h2 a").click(function() { 
 
\t  var s = $(this).attr('id'); 
 
\t  $('.' + s).show(); 
 
\t }); 
 
\t });
/* type selectors */ 
 

 
article, 
 
aside, 
 
figure, 
 
figcaption, 
 
footer, 
 
header, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    font-size: 87.5%; 
 
    width: 650px; 
 
    margin: 0 auto; 
 
    border: 3px solid blue; 
 
} 
 
section { 
 
    padding: 15px 25px; 
 
} 
 
h1 { 
 
    font-size: 150%; 
 
} 
 
h2 { 
 
    font-size: 120%; 
 
    padding: .25em 0 .25em 25px; 
 
    cursor: pointer; 
 
    background: url(images/plus.png) no-repeat left center; 
 
} 
 
h2.minus { 
 
    background: url(images/minus.png) no-repeat left center; 
 
} 
 
a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
h2:hover { 
 
    background-color: #ccccff; 
 
} 
 
a:focus, 
 
a:hover { 
 
    color: blue; 
 
} 
 
div { 
 
    display: none; 
 
} 
 
div.open { 
 
    display: block; 
 
} 
 
ul { 
 
    padding-left: 45px; 
 
} 
 
li { 
 
    padding-bottom: .25em; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section id="faqs"> 
 
    <h1>jQuery FAQs</h1> 
 
    <h2><a href="#" id="first_link">What is jQuery?</a></h2> 
 
    <div class=first_link> 
 
    <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites. 
 
    </p> 
 
    </div> 
 
    <h2><a href="#" id="second_link">Why is jQuery becoming so popular?</a></h2> 
 
    <div class=second_link> 
 
    <p>Three reasons:</p> 
 
    <ul> 
 
     <li>It's free.</li> 
 
     <li>It lets you get more done in less time.</li> 
 
     <li>All of its functions are cross-browser compatible.</li> 
 
    </ul> 
 
    </div> 
 
    <h2><a href="#" class=third_link>Which is harder to learn: jQuery or JavaScript?</a></h2> 
 
    <div class=third_link> 
 
    <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript. 
 
    </p> 
 
    </div> 
 
</section>

`線

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

在您的網頁上加載jQuery庫。

你需要做什麼根據你的要求。

您需要的JavaScript代碼來完成任務

+0

首先....我必須感謝您的幫助。聽起來像jQuery 1.11是我的需求最好的選擇。因此,libray包含以JavScript語言編譯的代碼片段?我可以複製和粘貼一個特定的功能或方法?什麼樣的東西 – user5474108

+0

對不起...我打算編輯它,我還沒有準備好發送它...請稍等片刻。我正在查看jquery源代碼。 ......其餘的都是有道理的,很好的解釋。 – user5474108

1

您正確包括jQuery的,在你的<head>部分,您具備以下條件:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

在這裏你包括jQuery的版本1.9.1,但是在這個回答時e它的兩個最後版本,1.11.3和2.1.4,它們在支持Internet Explorer 8和瀏覽器下方是相同的,如果你需要支持這些瀏覽器,那麼使用1.x版本,如果不使用在這裏提到的2.x版http://jquery.com/download/#jquery-2-x

的jQuery 2.x中具有相同的API爲jQuery的1.x中,但不支持Internet Explorer 6,7或8的所有筆記了jQuery 1.9升級指南也適用於此處。由於IE 8仍然比較常見,我們建議使用1.x版本,除非您確定沒有IE 6/7/8用戶正在訪問該站點。

所以下載1.11版本,你很安全。

As,其中包括在你的網頁jQuery的,也可能是在head部分或頁面</body>前的底部,但記住所有的編碼你會使用jQuery做需要做的事情或包含您包括jQuery的後在你的頁面中。

如果您打算在頭部加載它,請確保在$(document).ready(function{ /*your code here */});之內編寫jQuery函數,以便它等到HTML DOM準備就緒,但是如果要在關閉body之前包含它,頁面,則不需要將其包裝在document.ready()函數中。

請記住,始終包括生產精縮.min.js文件,因爲它被壓縮,以較少的大小 - 97KB比較277KB的未壓縮的一個的情況下 - 你並不真的需要在大多數情況下

開發版
0

首先,你得到的是源代碼。看起來你之前沒有使用過JavaScript。 JavaScript是在運行時編譯的。所以,你不必編譯它。源代碼是JavaScript程序。這就是它的分佈。只需從jQuery網站獲取源代碼,然後將其粘貼到您項目中某個文件的jquery.js文件中即可。然後,您可以將它鏈接到:

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

此代碼僅在您的html頁面和jquery位於同一目錄中時有效。如果你決定把jquery.js一個js文件夾內,你就必須使用此代碼來代替:

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

該代碼應在您的網站的<head>節去的地方,或關閉</body>標記之前。建議將其放在</body>標籤之前,因爲它不會阻止頁面的呈現。

然後,要執行collpasing功能,首先向要摺疊的元素添加一個類,然後用css隱藏它們。然後,附加一個單擊事件對他們來說,這將切換自己的知名度,就像這樣:

<script> 
    $(document).ready(function() { 
     $("a").click(function(e) { 
      e.preventDefault(); 

      $(".element").toggle(); 
     }); 
    }); 
</script> 

所有加載了jQuery庫在HTML後jQuery代碼應該去。你可以看到我已經將代碼包裝在$(document).ready();中。我們這樣做是爲了確保我們的代碼只會在DOM被加載後開始運行。

我希望這可以讓您快速瞭解解決您的問題。

+0

謝謝你的回答。這非常好。我現在明白好多了。 5星先生.....我apriciate新手解釋。 – user5474108

+0

@ user5474108如果這對您有所幫助,您可以點擊答案左側的√圖標並將其投票,將其標記爲正確答案。很高興幫助你。 –