Dalam bahagian ini, kita akan melakukan cubaan dan contoh pertama menggunakan JQuery dengan memaparkan satu mesej "Hai, selamat datang". Mesej ini akan dipaparkan menerusi perisian pelayar kita.

Memanggil fail JQuery

Seperti yang diterangkan dalam tutorial sebelum ini, fail JQuery perlu dipanggil dengan melakukan rujukan menerusi <script></script> pada bahagian <head></head>.

Fail JQuery adalah terlalu kecil sekitar 70kb dan tiada memberi beban yang lebih kepada halaman sekiranya ianya dipanggil. Tambahan, setiap perisian pelayar mempunyai kelebihan untuk mengendalikan cache. Sebaik sahaja fail ini dimuat turun pada kali pertama, ianya akan digunakan tanpa memerlukan muat turun semula sehingga sampai kepada satu tempoh masa.

Berikut adalah contoh kod HTML dan JQuery yang digunakan bersama:

<html>
  <head>
   <title>jQuery Hello World</title>
   <script type="text/javascript" src="https://www.drupalnote.my/jquery-1.8.3.js"></script>
  </head>

  <script type="text/javascript">

  $(document).ready(function(){
    $("#mesej").html("Hai, selamat datang (dipaparkan dengan JQuery)");
  });

  </script>
  <body>
    <font color="red">
      Hai, selamat datang (dipaparkan dengan HTML)
    </font>
    <font color="blue">
      <div id="mesej">
      </div>
    </font>
  </body>
</html>

Keterangan kepada kod di atas

Perkara pertama dan paling penting adalah memanggil fail JQuery seperti berikut:

<script type="text/javascript" src="https://www.drupalnote.my/jquery-1.8.3.js"></script>

Jika anda perhatikan dalam kod di atas, fail yang dimuat turun perlu disimpan bersama-sama dengan fail HTML ini dalam satu direktori. Pastikan nama fail perlu ditukarkan kepada jquery-1.8.3.js.

Lokasi fail ini boleh diletakkan dalam folder yang berlainan tetapi pastikan kedudukan folder ditakrifkan dengan betul.

Seterusnya perhatikan pada kod berikut:

  <script type="text/javascript">

  $(document).ready(function(){
    $("#mesej").html("Hai, selamat datang (dipaparkan dengan JQuery)");
  });

  </script>

Untuk mengaktifkan penggunaan JQuery, setiap kod aturcara perlu ditulis dalam tag <script></script>. Kod yang pertama (seperti di bawah ini) memainkan peranan untuk memeriksa sama ada halaman telah dimuat turun dan diproses sepenuhnya (memastikan elemen DOM telah dibaca semuanya). Maka sekiranya syarat tersebut dipenuhi, kod di dalamnya akan dijalankan.

$(document).ready(function(){
  // Kod arahan JQuery anda di sini
});

Seterusnya kod yang digunakan (seperti di bawah) akan memaparkan teks mesej pada tag <div> yang dikesan berdasarkan kepada ID #mesej.

$("#mesej").html("Hai, selamat datang (dipaparkan dengan JQuery)");

Hasilnya diperoleh seperti berikut:

[title]-[filefield-fid]

Penilaian: 
1
Average: 1 (1 vote)