Penulis Topik: JQuery  (Dibaca 10401 kali)

0 Anggota dan 1 Pengunjung sedang melihat topik ini.

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
JQuery
« pada: Mei 26, 2009, 10:09:00 am »
mungkin ada beberapa dudunger yang sudah tak asing dengan JQuery.
kalo yang belum tau, coba deh buka gmail (yang punya) dengan mode versi baru.
atau mozilla.org. atau FB, situs jejaring yang lagi hot-hotnya.

ngerasain beda ga?
maksudnya beda dengan page-page dari situs lain. kayak kalo kita buka link, browser seakan tidak melakukan yang namanya loading.
pokoknya, situs jadi terasa lebih elegan, ga banyak load sana-sini.

nah, kawan itu tuh berkat 'bantuan' JQuery...

disini, aku coba mengupas (ga harus tuntas) JQuery.

first, yuk download dulu librarynya

http://docs.jquery.com/Downloading_jQuery



to be continue....
next : apa itu JQuery?



kalo ada yang nambahin ilmunya disini dapet +5 deh ;)

d4vid_r5

  • Moderators
  • Hero Member
  • *****
  • Tulisan: 4.926
  • Reputasi: 40
  • Jenis kelamin: Pria
  • Dreaming...
    • Lihat Profil
Re:JQuery
« Jawab #1 pada: Mei 26, 2009, 10:25:09 am »
 <:-P <:-P <:-P
terusin kong sai...
lagi belajar java language nih.tiap posting tutor soal Jquery gw kasi rep + deh :D

sekarang baru bisa bikin "halo dunyo!" :D

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #2 pada: Mei 27, 2009, 12:16:04 pm »
Apa Itu JQuery?

sebenernya, JQuery bakal kerasa asing kalo kita belum kenal HTML dan JavaScript (JS). jadi bakal lebih baik kalo sebelum belajar JQuery, matengin dulu konsep HTML (dan PHP) dan JS baru belajar JQuery.

JQuery dikembangkan pertama kali oleh John Resig pada tahun 2005 yang terinspirasi dari kode Behavior. Saat itu, John merasa hasil dari kode Behavior tidak elegan, jelek. maka dikembangkan JQuery, dimana penulisan kode jadi lebih simple dengan hasil yang 'menyenangkan'. JQuery sendiri pertama kali rilis tanggal 14 Januari 2006. Dan sampai saat ini sudah rilis hingga versi 1.3.2


JQuery merupakan salah satu library JS. Kalo di PHP kita mengenal framework, maka JQuery bisa dianggap salah satu "framework" nya JS.

Pada kenyataannya jarang sekali sebuah situs dibuat murni JQuery. Biasanya JQuery diposisikan seperti sebuah 'function' atau class untuk di"tempel"kan pada sebuah web/aplikasi berbasis HTML atau PHP.

nah di thread ini, aku mau coba sharing hasil belajar JQueryku.jadi mungkin tools yang digunakan juga ngikutin aja ya.

sebagai awalan, di post sebelumnya ada link buat download JQuery nya, selanjutnya coba untuk download juga xampp (php,mysql,apache) sebagai webserver kemudian install seperti biasa. yakin deh ga ada yang kesulitan buat yang satu itu :D

ok, untuk hari ini segini dulu deh...  ;)

next, kita coba buat page sederhana yang ada JQuery nya ya ;)



silakan yang lain, ada +5 loh buat setiap tutor yang dipost....  >:D<

d4vid_r5

  • Moderators
  • Hero Member
  • *****
  • Tulisan: 4.926
  • Reputasi: 40
  • Jenis kelamin: Pria
  • Dreaming...
    • Lihat Profil
Re:JQuery
« Jawab #3 pada: Mei 27, 2009, 07:23:34 pm »
nambahin kong sai

JQuery tuh punya keunggulan pluginable, artinya JQuery bisa ditambahi berbagai plugin. buat belajar JQuery, paling ga harus kenal DOM, javascript dan konsep OOP tentunya :D

fungsi JQuery apaan?

1. ngakses bagian halaman tertentu dengan mudah
2. gubah tampilan bagian halaman tertentu
3. ngubah isi dari halaman
4. menambah animasi tanpa harus flash
5. ngeload data tanpa merefresh seluruh halaman
6. nyederhanain penulisan JS biasa

sok, ebuknya didownload disini
dokumentasinya: http://docs.jquery.com/Main_Page/
buat download frameworknya : http://docs.jquery.com/Downloading_jQuery
tutorialnya : http://docs.jquery.com/Tutorials
pluginnya : http://plugins.jquery.com/
demonya :
http://leandrovieira.com/projects/jquery/lightbox/
http://www.trirand.com/jqgrid/jqgrid.html

tambahan : blog JQuery : http://blog.jquery.com/2009/03/13/this-week-in-jquery-vol-1/
:cool:

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #4 pada: Mei 28, 2009, 09:53:41 am »
^^

sipp...
bahas disini dave hasil linknya.

"if mohammed can't go to the mountain, let's mountain get the mohammed"
kalo dudunger ga mau buka n belajar dari linknya, kita 'bawa' linknya kesini :D

...

kemaren nyoba henge Xaraya+JQuery untuk fungsi pager bawaanya Xaraya. jadi link pager di modifikasi supaya ga load page baru. melainkan hanya meload 'isi' data kemudian menampilkan di area tertentu yang di inisialisasi dengan <div>
hasil, untuk kali pertama berhasil, tapi digunakan kembali yang di load malah isi datanya yang ke load. belum 100% berhasil :(

belum bisa ditampilkan disini :D

d4vid_r5

  • Moderators
  • Hero Member
  • *****
  • Tulisan: 4.926
  • Reputasi: 40
  • Jenis kelamin: Pria
  • Dreaming...
    • Lihat Profil
Re:JQuery
« Jawab #5 pada: Juli 23, 2009, 02:44:47 pm »
lho mana ini tutornya? ;))
ditunggu lho...

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #6 pada: Juli 23, 2009, 03:00:51 pm »
lho mana ini tutornya? ;))
ditunggu lho...

gyahaha...

agak susah dave. maksudnya susah cari waktu nulisnya.

langsung implementasi aja.

ni salah satu contoh menu pake jQuery yang kubuat.
ini untuk salah satu aplikasi Toyota Astra.
aku kasih licensi GPL deh, mangga di explore n edit-edit sepuasnya.
syukur-syukur kalo dipake.
mudah-mudah bisa membantu.

nb: image logo nya ku hapus untuk jaga privasi

Luthi

  • Hero Member
  • *****
  • Tulisan: 3.155
  • Reputasi: 30
  • Jenis kelamin: Pria
  • forgiven
    • Lihat Profil
Re:JQuery
« Jawab #7 pada: Juli 23, 2009, 07:48:22 pm »
nunggu..sambil mantau disini ah :-?

d4vid_r5

  • Moderators
  • Hero Member
  • *****
  • Tulisan: 4.926
  • Reputasi: 40
  • Jenis kelamin: Pria
  • Dreaming...
    • Lihat Profil
Re:JQuery
« Jawab #8 pada: Agustus 02, 2009, 12:49:05 am »
okelah, gw share duluan yak!

first, kita mulai dari awal dulu...
biasa, dalam dunia IT, baik itu pemrograman apa aja, pastilah dimulai ama "Hello World!" :D karena ini java, kita rubah jadi "Hei cah!" :)) sori GJ :-j

oh ya, tahu slogannya JQuery? yup. write less, do more! //jadi status fb gw kemaren :D
kenapa gitu? ya iyalah, coba kita bandingkan, JQuery ama JS (JavaScript)

Kode: [Pilih]
/* is this stuff defined? */
if (!document.ELEMENT_NODE) {
document.ELEMENT_NODE = 1;
document.ATTRIBUTE_NODE = 2;
document.TEXT_NODE = 3;
document.CDATA_SECTION_NODE = 4;
document.ENTITY_REFERENCE_NODE = 5;
document.ENTITY_NODE = 6;
document.PROCESSING_INSTRUCTION_NODE = 7;
document.COMMENT_NODE = 8;
document.DOCUMENT_NODE = 9;
document.DOCUMENT_TYPE_NODE = 10;
document.DOCUMENT_FRAGMENT_NODE = 11;
document.NOTATION_NODE = 12;
}

document._importNode = function(node, allChildren) {
/* find the node type to import */
switch (node.nodeType) {
case document.ELEMENT_NODE:
/* create a new element */
var newNode = document.createElement(node.nodeName);
/* does the node have any attributes to add? */
if (node.attributes && node.attributes.length > 0)?
/* add all of the attributes */
for (var i = 0, il = node.attributes.length; i < il;)?
newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i++].nodeName));
/* are we going after children too, and does the node have any? */
if (allChildren && node.childNodes && node.childNodes.length > 0)?
/* recursively get all of the child nodes */
for (var i = 0, il = node.childNodes.length; i < il;)?
newNode.appendChild(document._importNode(node.childNodes[i++], allChildren));
return newNode;
break;
case document.TEXT_NODE:
case document.CDATA_SECTION_NODE:
case document.COMMENT_NODE:
return document.createTextNode(node.nodeValue);
break;
}
};

tahu, kan itu code buat apa?
nah, dalam JQuery, kita cuma butuh satu baris code!
Kode: [Pilih]
$(“#content”).load(“page.html”);ya itu doank!
lebay si, tapi emang gitu kenyataannya mau gimana lagi... :D

sip, kita lanjut.first tutorial "Hello World!"


Kutip
<html>
   <head>
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      
      <script type="text/javascript">
         $(document).ready(function(){ // bisa diperpendek dengan ngetik ini doank $(function(){
            alert('Hallo Dunia!!!')
         });
      </script>
      <title>Jquery : Install</title>
   </head>
   <body>
   </body>
</html>

udah itu aja dulu :D

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #9 pada: Agustus 04, 2009, 08:22:58 am »
good shared

+ 5 dave

minta ijin tulisannya dicopas ya :p

oki_toink

  • Hero Member
  • *****
  • Tulisan: 1.635
  • Reputasi: 47
  • Jenis kelamin: Pria
    • Lihat Profil
Re:JQuery
« Jawab #10 pada: Agustus 04, 2009, 09:02:58 am »
mendengan query kirain tentang database yah

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #11 pada: Agustus 04, 2009, 10:54:27 am »
Nada Dasar 1

JQuery(expression)
bisa juga ditulis dengan $(expression)
semua hal dalam JQuery bisa dipastikan menggunakan fungsi ini. digunakan untuk menemukan elemen (expression) pada suatu halaman HTML untuk selanjutnya dimanipulasi.

contoh:
Kode: [Pilih]
$("div > p").css("border", "1px solid gray");sematkan pada body
Kode: [Pilih]
<body>
     <p>one</p> <div><p>two</p></div> <p>three</p>
</body>

page utuhnya
Kode: [Pilih]
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("div > p").css("border", "1px solid gray");
  });
  </script>
  
</head>
<body>
  <p>one</p> <div><p>two</p></div> <p>three</p>
</body>
</html>

ini akan memanipulasi p didalam div sehingga memiliki css border 1px berwarna gray.
perhatikan, bahwa p yang lain tidak berada didalam tag div, sehingga tidak dipengaruhi css yang diberikan.
« Edit Terakhir: Agustus 04, 2009, 10:56:33 am oleh sai »

sai

  • Moderator
  • Hero Member
  • *****
  • Tulisan: 5.929
  • Reputasi: 68
  • Jenis kelamin: Pria
  • matahari pertama
    • Lihat Profil
Re:JQuery
« Jawab #12 pada: Agustus 10, 2009, 12:07:48 pm »
Nada Dasar 1 :: Lanjutan

di post sebelumnya kita sudah belajar tentang fungsi dasar $(ekspresi)

ada 1 'keunikan' ekspresi ini.

pada contoh diatas, tag yang kita pakai adalah <div>. salah satu tag standar yang ada di html. artinya fungsi $(ekspresi) bisa juga diterapkan pada tag lain seperti <span>, <input> atau <body>.

nah yang jadi keunikan, ternyata fungsi $(ekspresi) ini juga punya 'kemampuan' tag yang 'tidak biasa'. maksudnya, tag yang diluar standar html. kita bisa membuat tag sendiri, misal <elemen1>, JQuery tetap bisa mengenali.

contoh coding
Kode: [Pilih]

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("[color=red]elemen1[/color]").click(function(event){
        $("[color=blue]#container[/color]").show('slow');
    });
  });
  </script>
  
</head>
<body>
  <[color=red]elemen1[/color] style="cursor:pointer;">Click Here!!</[color=red]elemen1[/color]><br>
  <div id=[color=blue]container [/color]style="display:none;">Success!!</div>
</body>
</html>


faishal

  • Moderators
  • Hero Member
  • *****
  • Tulisan: 1.020
  • Reputasi: 8
  • Jenis kelamin: Pria
  • Lihat dengan mata hatimu ...
    • Lihat Profil
Re:JQuery
« Jawab #13 pada: Desember 16, 2009, 10:44:59 am »
pake jQuery emang mantap, aku pake disitus wedding aku

http://pernikahan.herikurniawan.com/gallery.html


medirosjr

  • Newbie
  • *
  • Tulisan: 25
  • Reputasi: 0
    • Lihat Profil
Re: JQuery
« Jawab #14 pada: Maret 03, 2010, 08:18:42 pm »
simak dimaree kawan, tinggal Unduh  ;D

Indowebster