Jump to content
Sign in to follow this  
john pozy

Jquery Tutorial For Beginners

Recommended Posts

Asalamualaikum & selamat pagi :12:

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 :104:
[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 Edited by john pozy

Share this post


Link to post
Share on other sites
Asalamualaikum..

aku harap korang paham apa yg diterangkan..bg sapa2 yg kurang jelas sila ajukan soalan.. :152:... klu mampu, aku jawap...TQ
untuk esok aku akan cover 1 skop yg agak menarik...nantikannn yaaaa B)

[u][b]1.Hari Kedua : Jquery + CSS = jQuery Untuk Web Designer[/b][/u] <------- esok yer ^_^

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   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.

Loading...
Sign in to follow this  

  • Similar Content

    • By malikperangcic
      Assalamualaikum fellow Putera.com.
       
      Nak tanya macamana nak buat map macam mudah.my ? map dekat homepage http://www.mudah.my/.
       
      Guna jquery plugin jugak ke or camne? Sebab bila inspect element ,element masih lagi guna element <map name= .
       
      Maaf kekurangan knowledge tentang map dan javascipt ni.
       
      Kalau ada sumber-2 yang boleh dirujuk sila tinggalkan pautan untuk rujukan. thanks! :3:
    • By E1SY4
      Assalamualaikum & Salam 1 MALAYSIA .
       
      Saya ialah seorang pelajar semester 5 diploma komputer rangkaian dari salah satu institut kemahiran. since tahun depan merupakan tempoh untuk kami laksanakan Final Year Projects (FYP) kami, saya berdepan dengan beberapa masalah utk melaksanakan idea projek saya. :25:
       
      saya ingin membangunkan satu web utk memasukkan data berkenaan FYP pelajar terdahulu & akan datang sbg pusat utk pelaja baru jdkan rujukan. tapi, silibus pembelajaran sy adlh x termasuk pembelajaran mengenai 'web'. :103: 
       
      saya memang tiada apa-apa basic mengenai web. ^_^   sy budak baru belajar, slh silap minta ditunjuk ajar. ^_^
    • By anysah
      Mencari Job/project freelance berkait dengan web development/game development.

      Skilset seperti dibawah :
      HTML
      CSS
      JQUERY
      ASP
      PHP
      MYSQL
      MSSQL
      SEO
      FLASH ACTION SCRIPT
      FLASH ANIMATION

      sape-sape ada job please do not hesitate to contact me : [email protected] (YM/Email).

      Terima Kasih.
×
×
  • Create New...