將 jQuery 程式分成 HTML、CSS、JavaScript 三個部分

我們可將 jQuery 程式分成 HTML、CSS、JavaScript 三個部分

by fannys

我們可將將 jQuery 程式分成 HTML、CSS、JavaScript 三個部分。

黑色為 HTML 部份、藍色為 CSS 部份、紅色為 JavaScript 部份

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>如何使用 jquery？</TITLE>
<!--CSS 程式碼由此開始-->
<style>
body
{
margin: 30px;
}

.content-set
{
font-size: 12pt;
color: Navy;
}

.author-set
{
font-style: italic;
border: 1px solid Green;
padding: 0.5em;
width: 20em;
float: right;
}

p.neat
{
display: none;
clear: both;
margin: 1em 0;
padding: 1em 15px;
background: #0F67A1;
color: #fff;
}
</style>
<!--CSS 程式碼到此結束-->
<!-------JavaScript 程式開始-------->
<script type="text/javascript" src="jQuery 檔案路徑/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.content').addClass('content-set');
  $('#author').addClass('author-set');
  
  if ($('#textfield').html().length==0){
        $('#textfield').html('預設的測試內容');
  }
  
  $("p.neat").addClass("ohmy").show("slow");
});

</script>
<!-------JavaScript 程式結束-------->
</HEAD>
<BODY>

<div id="container">
<div class="content" id="author">by fannys</div>
<div class="content" id="textfield"></div>
<div class="content" id="jQueryTest"><p class="neat">我們可將 jQuery 程式分成三個部分：HTML、CSS、JavaScript ... 。</p></div>
</div>


</BODY>

本報導資料來源：本資料取自小攻城師的戰場筆記 - jQuery 新手上路

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。

如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載並註明出處，以示尊重個人智慧財產，謝謝你的合作。

如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。

請按瀏覽器的檢視原始碼查看