Matawebsite Promo Lebaran 2022

Belajar Dasar-Dasar JQuery

date 16 Oct 2021
date Sulfikardi
date 508
date Web Design
Belajar Dasar-Dasar JQuery

JQuery adalah sebuah library javascript yang sengaja di buat untuk memudahkan kita dalam mendevelop sebuah website dan ingin membuat efek-efek animasi dan keperluan penggunaan javascript lainnya di dalam pengembangan sebuah website. Sampai saat ini jQuery sudah sangat di kenal di dunia web programming, sehingga banyak plugin-plugin web lainnya yang di bangun menggunakan JQuery sebagai base nya, contohnya seperti plugin calender, grafik, export html to image, design komponen web dan sebagainya.

Cara Menghubungkan JQuery dengan Project Kita

1. Menggunakan JQuery secara offline

menggunakan jquery secara offline maksudnya adalah dengan cara mendownload file jquery dan kemudian menghubungkan file html atau php dengan file jquery. Kita dapat mendownload file JQuery pada situs resmi JQuery.

2. Menggunakan JQuery secara online

menggunakan jquery secara online maksudnya adalah menggunakan jquery dengan cara menghubungkan file HTML atau PHP dengan link online langsung dari jquery.

<script   src="https://code.jquery.com/jquery-3.6.0.js"   integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="   crossorigin="anonymous"></script>

Mengenal Selector Pada JQuery 

Selector merupakan element yang akan kita seleksi atau elemen yang akan kita manipulasi, dalam artian kata selector di sini ialah pemilihan terhadap element HTML yang akan di berikan method event atau aksi oleh  Jquery. Selector pada html yaitu class dan id atau dapat juga menggunakan elemen itu sendiri. yang mana class di panggil dengan cara memberikan tanda titik (.) dan id di panggil dengan cara menggunakan tanda pagar (#).

Contoh Selector dengan Class.

<script>

       let button = $('.btn-primary')

   </script>

Contoh Selector Dengan Id.

  <script>

       let operator  = $('#operator')

    </script>

Menggunakan Event Pada Jquery

Event merupakan method atau aksi yang di lakukan oleh JQuery. contohnya seperti menambah element, menyembunyikan element, menampilkan element, mengambil data pada atribut element dan lainnya seperti yang dapat di lakukan oleh javascript. Event di tetapkan pada saat setelah menentukan  selector yang ingin di berikan method atau aksi oleh jquery.

Tampilan HTML

<body>

    <div class="container row justify-content-center">

        <h1 class="text-center mt-5 col-md-12">Tutorial JQuery Dasar</h1>

        <div class="col-md-6 mt-5">

            <div class="card">

                <div class="card-body row justify-content-center">

                    <p class="text-center col-md-12">Kalkulator</p>

                    <div class="form-group col-md-5">

                        <input type="email" class="form-control" id="angka_pertama" aria-describedby="emailHelp">

                    </div>

                    <div class="form-group col-md-2 text-center" id="operator">

                       Tambah

                    </div>

                    <div class="form-group col-md-5">

                        <input type="email" class="form-control" id="angka_kedua" aria-describedby="emailHelp">

                    </div>

                    <div class="form-group text-center">

                        <button class="btn btn-primary">Tambah</button>

                        <button class="btn btn-primary">Kurang</button>

                        <button class="btn btn-primary">Kali</button>

                        <button class="btn btn-primary">Bagi</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

Contoh Event Click

 <script>

       $('.btn-primary').click(function(){

           $('#operator').text($(this).text())

       })

    </script>

 Pada kode diatas, kita melakukan seleksi pada button dan melakukan event klik, yang mana pada saat button di klik, text pada button akan di isi ke elemen dengan id operator.

Contoh Event Change dan Keypress

$('#angka_pertama').on("change input keypress", function(evt){

        var charCode = (evt.which) ? evt.which : evt.keyCode;

          if (charCode != 46 && charCode > 31

            && (charCode < 48 || charCode > 57))

             return false;

          return true;

    })

Pada kode diatas, kita memilih selector dengan id angka_pertama, kemudian kita melakukan beberapa event pada element tersebut, dan pada saat event terjadi, akan dilakukan pengecekan, apakah yang di inputkan berupa angka atau bukan, jika yang di inputkan bukan angka, maka tidak akan ditampilkan pada form input.

Matawebsite Promo Lebaran 2022
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Terkait

Halo, ada yang bisa kami bantu?
Daftar Sekarang