Scribd Logo
Unggah

Selamat datang di Scribd!

  • JQuery

    Diunggah oleh

    KevinPrilian
    14 tayangan31 halaman
    Program Web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Program Web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan31 halaman

    JQuery

    Diunggah oleh

    KevinPrilian
    Program Web

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 31

    TIB22 – PERANCANGAN

    PEMROGRAMAN WEB
    JQUERY
    Pertemuan ke-11 dan 12
    Sub-CPMK
    Mahasiswa mampu menggunakan jQuery yang dapat
    mengatur interaksi antara JavaScript dengan HTML (C3,
    A3)

    Materi
    1. Pengantar jQuery
    2. Selector
    3. Event
    4. Plugin jQuery
    5. jQuery dan CSS
    1. Pengantar jQuery
    1.1 jQuery
    • jQuery merupakan salah satu dari JavaScript
    library.
    • jQuery berisi kumpulan fungsi JavaScript yang
    siap pakai, sehingga mempermudah dan
    mempercepat dalam membuat kode
    JavaScript.
    • Dengan menggunakan jQuery, skrip JavaScript
    yang panjang dapat disingkat menjadi beberap
    baris kode saja.
    1.2 Penggunaan jQuery
    Cara penggunaan jQuery sebagai berikut.
    • Library jQuery dapat di download dari website
    resminya yaitu https://jquery.com/download/
    • Simpan jQuery dalam sebuah folder yang diinginkan.
    • Buat file HTML kemudian panggil jQuery diantara tag
    <head> . . . </head>
    2. Selector
    2.1 Format Selector
    • Selector adalah skrip yang digunakan untuk
    memilih suatu elemen HTML yang akan
    dimanipulasi dengan jQuery.
    • Penulisan selector ditulis di dalam tanda
    kurung setelah tanda dolar.

    $(‘selectors’)
    2.2 Basic Selector
    • Basic selector merupakan selector dasar sesuai yang
    dipakai pada CSS.
    Selector Fungsi
    Selector all Memilih semua elemen HTML.
    Bentuk umum: $(‘*’)
    Selector tag Memilih tag HTML dengan cara menuliskan nama tagnya langsung.
    Bentuk umum: $(‘namaTag’)
    Selector Memilih tag HTML yang memiliki atribut class tertentu.
    class Bentuk umum : $(‘.namaClass’) atau $(‘namaTag.namaClass’)
    Selector id Memilih tag HTML yang memiliki atribut id tertentu.
    Bentuk umum : $(‘#namaId’)
    Multiple Memilih elemen HTML dengan beberapa selector sekaligus yang
    selector dipisahkan dengan tanda koma.
    Bentuk umum : $(‘selector1,selector2,…,dst’)
    2.3 Contoh Selector
    Code Output
    3. Event
    3.1 Event
    • Event merupakan skrip yang akan mendeteksi
    sebuah aksi dari user misalnya ketika user
    menekan mouse, memindahkan mouse, dan
    sebagainya.
    • Format penulisan event adalah sebagai
    berikut
    $(‘selectors’).event(function(){
    ...
    });
    3.2 Contoh Event
    Code Output
    4. Plugin jQuery
    4.1 Plugin jQuery
    • Plugin jQuery merupakan skrip jQuery yang
    dibuat oleh pihak ketiga yang dapat digunakan
    untuk tujuan tertentu pada aplikasi website
    secara instan sehingga penggunaan jQuery
    menjadi sangat mudah.
    • Beberapa contoh plugin jQuery yakni
    Fancybox, Nivo Slider, FullCalender, Data
    Table, dan lain sebagainya.
    4.2 Penggunaan
    Plugin jQuery
    • Panggil file plugin seperti saat memanggil file
    jQuery. Jika plugin mempunyai file CSS, maka
    panggil juga file CSS-nya didalam tag <head>

    • Tambahkan id atau class pada elemen HTML yang


    akan diterapkan plugin
    4.2 Penggunaan
    Plugin jQuery (Lanj..)
    • Gunakan plugin jQuery dengan aturan skrip
    sebagai berikut
    4.3 Contoh Plugin jQuery
    Code
    4.3 Contoh Plugin jQuery
    Output
    5. jQuery dan CSS
    5.1 jQuery dan CSS
    • jQuery dan CSS tidak dapat dipisahkan satu
    sama lain.
    • CSS menciptakan desain web yang powerful
    dan jQuery mengambil dan memanipulasi nilai
    pada properti pada CSS.
    • Cara mengambil nilai properti pada CSS adalah
    dengan menggunakan perintah css().
    5.2 Bentuk Umum
    • Bentuk umum penggunaan css() sebagai
    berikut:
    – Return the CSS property value

    Example $(“body”).css(“background”)

    – Set the CSS property and value

    – Example $(“body”).css(“background”, “red”)


    5.2 Bentuk Umum (Lanj..)
    – Set multiple properties and values

    Example $(“body”).css(“background”:”red”, “color”:”blue”)


    5.3 Contoh jQuery dan CSS
    Code
    5.3 Contoh jQuery dan CSS
    (Lanj..)
    Output
    Contoh jQuery
    Dropdown
    Code

    Output
    Scroll to Top
    Code Output
    Docking Style
    Code

    Output
    Ringkasan
    • jQuery berisi kumpulan fungsi JavaScript yang
    siap pakai, sehingga mempermudah dan
    mempercepat dalam membuat kode
    JavaScript.
    • Selector adalah skrip yang digunakan untuk
    memilih suatu elemen HTML yang akan
    dimanipulasi dengan jQuery.
    • Event merupakan skrip yang akan mendeteksi
    sebuah aksi dari user.
    Terima Kasih

    Anda mungkin juga menyukai