AJAX-1

第一課

在用$("xxxx")jQuery選擇器的時候,HTML必須先加載完,jQuery才能夠找得到元素。
所以HTML要寫在上面,把script寫在下面。如果倒過來的話就沒有效果:

<p>
  <a id="my-click">Click Me</a>
</p>

<div id="foo" style="border: 1px solid red;">
  <p>bar</p>
</div>

<script>
  $("#my-click").click(function(){
    $("#foo").html('<h1>zoo</h1>');
  })
</script>

解說:

<script>...</script> 包起來的部分就是寫JavaScript 的地方
這個錢號 等同於jQuery
$("#my-click")是jQuery的選擇器用法,會挑出id是my-click的元素,在這裡就是指Click Me的超連結。在HTML上id是唯一的,不能有重複的id。
.click( function(){...} ) 會綁訂一個點擊(click)事件在該元素上面,當用戶點擊這個元素時,就會執行里面的function
$("#foo").html('<h1>zoo</h1>') 會把#foo 這個元素的內容置換成 <h1>zoo</h1>





如果JS寫錯

從錯誤的地方開始,以下的JavaScript 程序都不會執行喔

想在JavaScript程序中觀察變量的話,可以用alert語法,去找哪裡有錯誤

  $ ( "#my-click" ). click ( function (){ 
    alert ( "test" ); 
  })

或用 console.log 就会出现在开发者工具的 Console 里面:

  console.log("checkpoint A");

  $("#my-click").click(function(){
    console.log("checkpoint C");
  })

  console.log("checkpoint B");

JS寫在前面的話用$(document).ready 是一個瀏覽器的事件,會在加載HTML 完成之後,才執行里面的function,
就可以解決JS讀不到這個問題。

$(document).ready(function(){
code包在裡面
})
comments powered by Disqus