Jump to content
  • ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By john pozy
      Asalamualaikum & selamat pagi

      sini aku nk share ckt knowladge aku pasai jquery nie...bkn nk tnjuk pro,tp just untuk share(sharing is caring). lgpun dh lama x contribute dkt putera nie. Banyak benda yg kita boleh buat dengan jQuery nie... ajax,animation,browser tweek,dynamic css dll.... klu dri segi pembangunan web based system plak mmg bnyak improve terutamanya dari segi UI(User Interface) & UX(User Experiance). mari kita mulakan
      [b][u]1.[/u][/b][b][u]Hari Pertama : [/u][/b][b][u]Pengenalan Kepada jQuery[/u][/b][list]
      [*]jQuery merupakan [i]cross-browser javascript library(semua browser boleh guna)[/i] yang dicipta untuk memudahkan penulisan HTML. [i][size=2]source [/size][/i][i][size=2][url="http://en.wikipedia.org/wiki/JQuery"]http://en.wikipedia.org/wiki/JQuery[/url][/size][/i]
      [*]apa yang menarik tentang jQuery ialah ia dapat manipulate CSS, buat animation, AJAX Request, plug-in support dan macam2 lg..
      [*]Terdapat 2 jenis fail jQuery iaitu minified(yang dh dikecilkan saiznya) dan uncompressed(saiz besar..tapi sesuai untuk debug)
      [/list]
      [b][u]2. Hari Pertama : Asas-asas jQuery[/u][/b]

      [b]a) Cara Nak Embed jQuery Dalam Fail Html[/b][list]
      [*]ada 2 cara yang boleh kita guna iaitu local embed atau hosted embed. bagi local embed anda perlu muatturun @ donload script jQuery yang latest terlebih dahulu. Bagi hosted embed pula anda boleh pilih mana CDN(Content Delivery Network) yang hostkan fail jQuery nie...antaranya ialah google API(sy musti pilihh) dan jQuery CDN. rujuk contoh dibawah :
      [/list]
      [u]Local Embed[/u] [size=2][i][url="http://docs.jquery.com/Downloading_jQuery#Current_Release"]jQuery Current Release Download[/url][/i][/size]
      [CODE]
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Contoh</title>
      </head>
      <script src="nama.folder/fail.jquery.js"></script> <-- Cara local embed
      <script>
      .... jquery script.....
      </script>
      <body>
      ....html script....
      </body>
      </html>
      [/CODE]

      [u]Hosted Embed[/u] [i][size=2][url="http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery"]jQuery CDN List[/url][/size][/i]
      [CODE]
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Contoh</title>
      </head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <-- Cara hosted embed
      <script>
      .... jquery script.....
      </script>
      <body>
      ....html script....
      </body>
      </html>
      [/CODE]

      [b]b)Mulakan Scripting...[/b]
      [CODE]
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Contoh</title>
      </head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      </script>
      $(document).ready(function() { <--- rujuk note b.1
      .... jQuery script......
      });
      </script>
      <body>
      ....html script....
      </body>
      </html>
      [/CODE]
      [size=2][i]note b.1 : biasakan scripting anda dengan menggunakan fungsi ini. fungsi ini bertujuan untuk menunggu fail anda selesai dimuat(load) kemudian baru fail anda akan dimanipulasikan.[/i][/size]

      [CODE]
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Contoh</title>
      </head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script>
      $(document).ready(function() {
      alert("popup ini akan keluar setelah fail ini selesai diload");
      });
      </script>
      <body>
      ....html script....
      </body>
      </html>
      [/CODE]
      [size=2][i]note b.2 : popup akan keluar setelah fail selesai diload[/i][/size]

      [b]c)jQuery Event Handler[/b]

      Ada banyak jQuery event handler. tapi saya akan cover event handler yang slalu digunapakai. antaranya ialah :[list]
      [*]click()
      [/list]
      [b]d)jQuery Selector[/b]

      jQuery selector pon ada banyak. saya cover basic selector ja...yg lain tuan/puab boleh rujuk [url="http://api.jquery.com/category/selectors/"]jQuery Selectors[/url].[list]
      [*]CSS selector (class(.) dan ID(#))
      [*]form element selector (:button, :select......)
      [/list]
      [u]d.1)CSS Selector (Class)[/u]
      [CODE]
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Contoh</title>
      <link href="inc/style.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      $('.butang').click(function() {
      alert("Hai!");
      });
      });
      </script>
      </head>

      <body>
      <a href="#" class="butang">Klik Disini</a>
      </div>
      </body>
      </html>
      [/CODE]

      [u]d.1)CSS Selector (ID)[/u]
      [CODE]
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Contoh</title>
      <link href="inc/style.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      $('#butang').click(function() {
      alert("Hai!");
      });
      });
      </script>
      </head>

      <body>
      <a href="#" id="butang">Klik Disini</a>
      </div>
      </body>
      </html>
      [/CODE]

      [u]d.2) Form Element Selector[/u]
      [CODE]
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Contoh</title>
      <link href="inc/style.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {

      var jumlah = parseInt($('#no1').val()) + parseInt($('#no2').val());

      $(':button').click(function() {
      alert("Jumlah = "+jumlah);
      });
      });
      </script>
      </head>

      <body>
      <form method="post">
      <p>Nombor Pertama : <input type="text" name="no1" id="no1" /></p>
      <p>Nombor Kedua : <input type="text" name="no2" id="no2" /></p>
      <br />
      <p><button>Kira</button>
      </form>
      </div>
      </body>
      </html>
      [/CODE]
      [size=2][i]important note : selalunya event handler nie berkait rapat dengan selector. contohnya button(selector) yang mempunyai fungsi(event).[/i][/size]

      [size=4]Contoh Penggunaan Event Handler Dan CSS Selector[/size]
      [CODE]
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Contoh</title>
      </head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script>
      $(document).ready(function() {
      $('#butang').click(function(){
      alert("anda telah klik butang");
      });
      });
      </script>
      <body>
      <button id="butang">Butang</button>
      </body>
      </html>
      [/CODE]
      [u]Huraian Script Diatas[/u]

      i)[color=#ff0000]$('#butang')[/color] : element yang mempunyai id [i]butang. [/i]Tak kira apa element, button ka, html tag ka(div,span,a,p.....) asalkan mempunyai id [i]butang.[/i]

      ii)[color=#ff0000].click() [/color]: merupakan event pada selector [i]butang.[/i] Untuk yang nie kita gunakan event click(mouse click)

      iii)[color=#ff0000]alert("anda telah klik butang")[/color] : merupakan fungsi yang akan diexecute bila butang diklik

      iv)[color=#ff0000]<button id="butang">Butang</button>[/color] : element html yang mempunyai id [i]butang. [/i]macam yg sy bgtau, kita boleh guna apa2 element asalkan valid
×
×
  • Create New...