Inilah Pengertian, Fungsi, dan Modul Tutorial jQuery (+ Video Tutorial)

1. Manipulasi DOM yang Mudah : jQuery mempermudah pengembang dalam mengakses, memanipulasi, dan memanipulasi elemen-elemen dalam DOM. Anda dapat dengan mudah menambahkan, mengubah, atau menghapus elemen-elemen HTML.
2. Cross-browser Compatibility : jQuery menangani perbedaan dalam perilaku JavaScript di berbagai browser, sehingga Anda tidak perlu khawatir tentang masalah kompatibilitas lintas browser.
3. Plugin Ecosystem : jQuery memiliki ekosistem plugin yang kaya. Anda dapat menemukan berbagai plugin yang dibuat oleh komunitas untuk menambahkan fungsionalitas tambahan ke situs web Anda.
4. Event Handling yang Mudah : Penanganan peristiwa (event handling) dengan jQuery sangat mudah dipahami dan diimplementasikan. Anda dapat dengan cepat mengaitkan tindakan dengan peristiwa seperti klik tombol atau pengisian formulir.
5. Pustaka Populer : Karena popularitasnya, jQuery memiliki sumber daya online yang luas, termasuk tutorial, dokumentasi, dan forum dukungan. Ini memudahkan pengembang dalam mengatasi masalah dan belajar lebih lanjut tentang cara menggunakan jQuery.

Dan inilah beberapa Kekurangan jQuery :

1. Berat : Meskipun jQuery telah disederhanakan dibandingkan dengan JavaScript murni, perpustakaan ini tetap memiliki ukuran yang cukup besar. Ini dapat memperlambat waktu pemuatan halaman web jika digunakan tanpa perencanaan yang baik.
2. Penurunan Popularitas : Dengan munculnya kerangka kerja JavaScript modern seperti React, Angular, dan Vue.js, penggunaan jQuery dalam pengembangan aplikasi web canggih semakin berkurang. Para pengembang sering beralih ke kerangka kerja yang lebih kuat dan fleksibel.
3. Kinerja Terbatas : Dalam beberapa kasus, jQuery mungkin tidak seefisien atau tidak secepat pemrograman JavaScript murni, terutama dalam hal animasi atau manipulasi yang intensif.
4. Overhead untuk Fitur Tertentu : Terkadang, jQuery mungkin terlalu berlebihan untuk proyek sederhana atau ketika Anda hanya memerlukan beberapa fitur kecil. Ini bisa menambah overhead dan kompleksitas yang tidak perlu.
5. Perawatan dan Kedaluwarsa : Seiring berjalannya waktu, jQuery perlu diperbarui dan dikelola agar tetap relevan. Ketergantungan pada versi lama atau plugin yang sudah tidak terawat dapat mengakibatkan masalah keamanan atau kinerja.

D. Jenis-jenis Plugin jQuery

jQuery berperan dalam menyederhanakan fungsi-fungsi individu dan dapat diperluas melalui pembuatan plugin. Plugin, pada dasarnya, merupakan kumpulan kode Javascript yang menggunakan pustaka jQuery untuk menggabungkan fungsi-fungsi individu, menciptakan fitur dan alat-alat untuk situs web.

Pengguna jQuery dapat membuat plugin berdasarkan kode yang ada dalam pustaka jQuery dan membagikannya secara daring untuk digunakan oleh publik. Meskipun plugin dapat ditemukan di berbagai sumber, plugin yang terdapat dalam repositori resmi jQuery UI dianggap lebih aman dan memiliki kualitas yang terjamin.

Repositori ini dijaga oleh komunitas profesional jQuery, memastikan bahwa plugin-plugin yang ada telah melalui kurasi yang ketat. Berikut adalah beberapa contoh plugin jQuery yang banyak digunakan dan populer.

1. Effect

Effect adalah suatu plugin jQuery yang simpel, memungkinkan pengguna untuk menerapkan berbagai efek animasi pada elemen-elemen di halaman situs. Dengan menekan tombol yang telah ditetapkan untuk efek tertentu, elemen halaman akan menampilkan perilaku yang berbeda, seperti terpental, menghilang dalam pola lipat, geser, fade out, dan lainnya.

2. TaggingJS

TaggingJS, sebuah skrip jQuery yang berasal dari JavaScript Library, memungkinkan penambahan sistem pemberian tag pada situs. Dengan menggunakan skrip ini, kamu dapat menambahkan topik atau subjek yang relevan ke dalam konten, meningkatkan kemampuan indeks dan peringkat konten dalam mesin pencari seperti Google.

3. Autocomplete

Plugin jQuery Autocomplete memberikan fitur yang mirip dengan fitur autocomplete yang ada di Google. Fitur ini memberikan saran pelengkapan otomatis untuk istilah pemrograman, meningkatkan pengalaman pengguna dengan memberikan opsi yang relevan selama pengetikan.

TUTORIAL DASAR MENGGUNAKAN JQUERY

Sumber : Malasngoding.com dan Educba.com

Ada 2 (Dua) cara untuk memulai penggunaan jQuery. Pertama, bisa melakukan Instalasi melalui Package Manager. Kedua, juga hanya bisa menyertakan Link CDN untuk JavaScript pada HTML.

A. Cara Online (Menghubungkan ke HTML)

1. Install via Package Manager (Mengetik Baris Perintah)

Sama seperti Bootstrap, jQuery juga mempunyai cara yang sama, yaitu dengan mengetik Baris Perintah. Salah satunya adalah dengan menggunakan NPM, dan ketiklah Perintah berikut ini :

npm install jquery

Maka hasilnya :

Anda juga bisa menginstal jQuery dengan cara lainnya, misalnya dengan menggunakan Yarn dan Bower.

Install jQuery dengan Yarn :

yarn add jquery

Install jQuery dengan Bower :

bower install jquery

Paket jQuery Bower berisi file tambahan selain distribusi default. Dalam kebanyakan kasus, Anda dapat mengabaikan file-file ini, namun jika Anda ingin mengunduh sendiri rilis defaultnya, Anda dapat menggunakan Bower untuk menginstal jQuery dari salah satu url di atas, bukan dari paket yang terdaftar. Misalnya, jika Anda ingin menginstal file jQuery terkompresi saja, Anda dapat menginstal file tersebut saja dengan perintah berikut ini :

bower install https://code.jquery.com/jquery-3.7.1.min.js

Untuk selengkapnya mengenai Cara Download dan Instalasi jQuery, silakan lihat di sini (Jquery.com).

2. Menyalin Kode Sumber JavaScript CDN

Anda juga dapat menggunakan jQuery CDN jika Anda tidak ingin mengunduh dan meng-host file jQuery sendiri dan ingin menggunakan CDN. Baik Microsoft dan Google meng-Hosting jQuery.

Microsoft CDN :

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
</head>

Google CDN :

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

Selain dari Microsoft dan Google, juga ada Content Delivery Network (CDN) lainnya untuk jQuery, yaitu CDNJS dan jsDelivr.

CDNJS :

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

jsDelivr CDN :

<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>

Sehingga, bisa menyertakan Library jQuery ke dalam Kode HTML :

<html>
    <head>
    <title>Contoh Penggunaan jQuery</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type = "text/javascript">
        $(document).ready(function() {
        document.write("HI there!");
        });
    </script>
    </head>
<body>
    <h1>Hello there!</h1>
</body>
</html>

Hasil :

B. Cara Offline (Menginstal/Download jQuery)

Untuk Anda yang jarang tersambung dengan koneksi internet cara ini sangat efektif karena Anda hanya perlu men-download file jQuery-nya dan menyimpan file jQuery-nya pada project kerja Anda, kemudian hanya tinggal menghubungkannya. Cara untuk menggunakan jQuery sangatlah mudah. sama seperti cara menghubungkan file JS dengan HTML atau PHP.

1. Download File jQuery

Tahap awal yang harus di lakukan adalah Anda harus men-Download file library jQuery-nya di Situs Resmi jQuery.

Kemudian, pilihilah salah satu Opsi untuk Download jQuery.

2. Meletakan File jQuery

Jika kita klik pada "Download Compressed/Uncompressed, maka akan muncul File JavaScript dari jQuery yang di-Hosting melalui CDN seperti pada Gambar di atas.

Caranya, Salin dari salah satu Kode jQuery diatas. Kemudian, Simpanlah dengan Nama File (dengan Versi jQuery Terbaru) ke dalam Folder jquery :

jquery/jquery-3.7.1.js

Untuk melakukan Minifikasi (Minify) Kode JavaScript jQuery, Salinlah (Copy) File jquery-3.7.1.js di Situs ini dan di-Download.

Dan inilah Struktur Folder dari Project jQuery pada Project Anda :

📁 nama_project_anda
├── 📁 jquery
   ├── jquery-3.7.1.js
├── 📁 css
├── 📁 js
├── index.html

Atau Anda juga bisa mengunduhnya (Download) File jQuery Versi Terbaru (3.7.1) di sini.

3. Menyalin Kode Sumber JavaScript dalam HTML

Kalian bisa memilih salah satu contoh berikut untuk menginstal jQuery secara online. Anda dapat memasukkannya dari CDN (Content Delivery Network) pada bagian <head> di halaman HTML Anda sama seperti menghubungkan HTML dengan JavaScript.

MaxCDN menyediakan dukungan CDN untuk JavaScript jQuery. Anda juga harus menyertakan jQuery :

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="../jquery/jquery-3.7.1.js"></script>

Sehingga, menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial belajar JQuery Part 1 : Pengertian dan cara menggunakan jquery</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="../jquery/jquery-3.7.1.js"></script>
</head>
<body>
 
</body>
</html>

DASAR-DASAR JQUERY

Sumber : Duniailkom.com, Tutorialspoint.com, dan Teachmesoft.com

Hampir semua situs-situs besar menggunakan jQuery untuk memudahkan proses penulisan kode JavaScript, termasuk situs Inzaghi's Sites yang dibangun dengan WordPress (secara default, WordPress juga menggunakan jQuery).

Query adalah sebuah library JavaScript. Dalam dunia Pemrograman, Library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi.

1. String

Sebuah string dalam JavaScript (jQuery) adalah objek yang tidak dapat diubah yang berisi tidak ada, satu, atau banyak karakter. Berikut adalah contoh-contoh valid dari String JavaScript :

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

2. Numbers

Angka dalam JavaScript adalah nilai format IEEE 754 berbasis presisi ganda 64-bit. Mereka tidak dapat diubah, sama seperti string. Berikut adalah contoh-contoh valid dari Numbers JavaScript :

5350
120.27
0.26

3. Boolean

Sebuah boolean dalam JavaScript (jQuery) dapat berupa true atau false. Jika suatu angka adalah nol, itu defaultnya menjadi false. Jika string kosong, defaultnya menjadi false. Berikut adalah contoh-contoh valid dari Boolean JavaScript:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

4. Objek

JavaScript (jQuery) mendukung konsep Objek dengan sangat baik. Anda dapat membuat objek menggunakan objek literal seperti berikut :

var emp = {
   name: "Zara",
   age: 10
};

Anda dapat menulis dan membaca properti objek menggunakan notasi titik sebagai berikut :

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

5. Array

Anda dapat mendefinisikan array menggunakan array literal seperti berikut :

var x = [];
var y = [1, 2, 3, 4, 5];

Sebuah array memiliki properti panjang yang berguna untuk iterasi :

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

6. Fungsi

Sebuah fungsi dalam JavaScript (jQuery) dapat menjadi bernama atau tanpa nama. Sebuah fungsi bernama dapat didefinisikan menggunakan kata kunci function seperti berikut :

function named(){
   // do some stuff here
}

Sebuah fungsi tanpa nama dapat didefinisikan dengan cara yang sama seperti fungsi normal tetapi tidak memiliki nama.

Sebuah fungsi tanpa nama dapat diberikan nilai ke variabel atau diteruskan ke metode seperti yang ditunjukkan di bawah.

var handler = function (){
   // do some stuff here
}

jQuery sering menggunakan fungsi tanpa nama seperti berikut :

$(document).ready(function(){
   // do some stuff here
});

7. Argumen

Variabel argumen JavaScript (jQuery) adalah semacam array yang memiliki properti panjang. Contoh berikut menjelaskannya dengan baik.

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Objek argumen juga memiliki properti callee, yang merujuk pada fungsi di dalamnya. Misalnya :

function func() {
   return arguments.callee;
}

func();                // ==> func

8. Context

Kata kunci terkenal this dalam JavaScript (jQuery) selalu merujuk pada konteks saat ini. Dalam suatu fungsi, konteks this dapat berubah, tergantung pada cara fungsi tersebut dipanggil :

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Anda dapat menentukan konteks untuk panggilan fungsi menggunakan metode built-in call() dan apply().

Perbedaan antara keduanya adalah bagaimana mereka meneruskan argumen. Call meneruskan semua argumen sebagai argumen ke fungsi, sementara apply menerima larik sebagai argumen.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

$("#myform").submit(function() {
   return false;
});

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
       print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };

})();

Untuk selengkapnya, silakan tunggu saja Pembahasan tentang Modul Pemrograman JavaScript selanjutnya.

B. Aturan Dasar Penulisan Kode jQuery

Sumber : Duniailkom.com

Berikut ini adalah beberapa Aturan Dasar Penulisan Kode dalam jQuery.

1. Pengertian jQuery Object ($)

Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar '$' (dollar sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id="tombol", kita bisa menulis :

$("#tombol")

Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain), bisa menggunakan jQuery(), seperti berikut :

jQuery("#tombol")

2. Pengertian jQuery Action dan Event

$(selector).action()

Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll. Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain. Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan isitilah chaining.

Berikut contoh penulisan jQuery Object, selector dan action :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Belajar jQuery Bersama Inzaghi</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        // Simpan nilai asli dari elemen h1
        var originalFontSize = $("h1").css("font-size");
        var originalColor = $("h1").css("color");

        $("#tombol_hide").click(function () {
          $("h1").hide();
        });

        $("#tombol_show").click(function () {
          $("h1").show();
        });

        $("#tombol_small").click(function () {
          $("h1").css("font-size", "20px");
        });

        $("#tombol_red").click(function () {
          $("h1").css("color", "red");
        });

        $("#tombol_reset").click(function () {
          $("h1").css("font-size", originalFontSize);
          $("h1").css("color", originalColor);
        });
      });
    </script>
  </head>
  <body>
    <h1>Belajar jQuery di Inzaghi's Blog</h1>
    <button id="tombol_hide">Sembunyikan</button>
    <button id="tombol_show">Tampilkan</button>
    <button id="tombol_small">Perkecil</button>
    <button id="tombol_red">Merahkan</button>
    <button id="tombol_reset">Ulangi</button>
  </body>
</html>

Hasil Output :

Tampilan diatas masih sangat sederhana, dimana ketika tombol ditekan, akan terjadi "sesuatu" terhadap tag <h1>. Menggunakan jQuery, kita bisa membuat berbagai efek menarik lainnya.

Untuk sementara, anda dapat abaikan apa maksud kode-kode diatas. Disini saya hanya memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti  $("h1").hide(), atau $("h1").css("font-size","20px"). Ini semua adalah cara penulsain gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.

JQUERY MANIPULATION

Sumber : Tutorialsteacher.com, Tutorialspoint.com, dan W3schools.com

Anda telah mempelajari tentang pemilih jQuery pada bagian sebelumnya. Pemilih jQuery menemukan elemen-elemen DOM tertentu dan melingkupinya dengan objek jQuery. Sebagai contoh, document.getElementById() dalam JavaScript akan mengembalikan objek DOM, sedangkan $('#id') akan mengembalikan objek jQuery. Gambar berikut mengilustrasikan perbedaannya.

jQuery menyediakan sejumlah metode untuk memanipulasi DOM secara efisien. Anda tidak perlu menulis kode yang besar dan kompleks untuk mengatur atau mengambil konten dari elemen HTML apa pun.

A. jQuery DOM Manipulation

jQuery menyediakan metode-metode seperti attr(), html(), text(), dan val() yang berfungsi sebagai pengambil dan pengatur untuk memanipulasi konten dari dokumen HTML.

Berikut adalah beberapa operasi dasar yang dapat Anda lakukan pada elemen-elemen DOM dengan bantuan metode-metode standar dari Library jQuery :

• Ekstrak konten dari sebuah elemen
• Ubah konten dari sebuah elemen
• Menambahkan elemen anak di bawah elemen yang sudah ada
• Menambahkan elemen induk di atas elemen yang sudah ada
• Menambahkan elemen sebelum atau setelah elemen yang sudah ada
• Menggantikan elemen yang sudah ada dengan elemen lain
• Menghapus elemen yang sudah ada
• Membungkus konten dalam sebuah elemen

1. Get Content

jQuery menyediakan metode html() dan text() untuk mengekstrak konten elemen HTML yang cocok. Berikut adalah Sintaks dari kedua metode ini :

$(selector).html();

$(selector).text();

Metode text() jQuery mengembalikan nilai teks biasa dari konten, sedangkan html() mengembalikan konten dengan tag HTML. Anda perlu menggunakan pemilih jQuery untuk memilih elemen target.

Contoh :

Berikut adalah contoh bagaimana cara mendapatkan konten dengan metode text() dan html() jQuery :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

Output :

2. Get Form Fields

Metode val() jQuery digunakan untuk mendapatkan nilai dari bidang formulir apa pun. Berikut adalah sintaks sederhana dari metode ini.

$(selector).val();

Contoh :

Berikut adalah contoh lain untuk menunjukkan bagaimana mendapatkan nilai dari suatu bidang input dengan metode val() jQuery.

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert($("#name").val());
      });
      $("#b2").click(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Inzaghi Posuma"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>
   
   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

Output :

3. Set Content

Metode html() dan text() jQuery dapat digunakan untuk mengatur konten elemen HTML yang cocok. Berikut adalah sintaks dari kedua metode tersebut ketika digunakan untuk mengatur nilai :

$(selector).html(val, [function]);

$(selector).text(val, [function]);

Di sini, val adalah HTML atau teks yang akan diatur sebagai konten elemen. Kita dapat menyediakan fungsi callback opsional ke metode-metode ini yang akan dipanggil ketika nilai elemen akan diatur.

Metode text() jQuery mengatur nilai teks biasa dari konten, sedangkan metode html() mengatur konten dengan tag HTML.

Contoh :

Berikut adalah contoh yang menunjukkan bagaimana mengatur konten suatu elemen dengan metode text() dan html() jQuery :

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#text").click(function () {
          $("p").text(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
        $("#html").click(function () {
          $("p").html(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
      });
    </script>
  </head>
  <body>
    <p>Click on any of the two buttons to see the result</p>

    <button id="text">Set Text</button>
    <button id="html">Set HTML</button>
  </body>
</html>

Output :

4. Set Form Fields

Metode val() jQuery juga digunakan untuk mengatur nilai dari bidang formulir apa pun. Berikut adalah sintaks sederhana dari metode ini ketika digunakan untuk mengatur nilai.

$(selector).val(val);

Di sini, val adalah nilai yang akan diatur untuk bidang input. Kita dapat menyediakan fungsi callback opsional yang akan dipanggil ketika nilai bidang tersebut akan diatur.

Contoh :

Berikut adalah contoh lain yang menunjukkan bagaimana mengatur nilai suatu bidang input dengan metode val() jQuery.

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#b1").click(function () {
          $("#name").val("Inzaghi Posuma");
        });
        $("#b2").click(function () {
          $("#class").val("Class 12th");
        });
      });
    </script>
  </head>
  <body>
    <p>Name: <input type="text" id="name" value="" /></p>
    <p>Class: <input type="text" id="class" value="" /></p>

    <button id="b1">Set Name</button>
    <button id="b2">Set Class</button>
  </body>
</html>