JavaScript vs jQuery: Perbezaan Utama yang Perlu Anda Ketahui

Kami telah mengetahui JavaScript dan JQuery selama beberapa tahun. JavaScript dicipta lebih awal daripada jQuery. Kedua-duanya kuat dan digunakan dalam pengembangan web dan digunakan untuk tujuan yang sama iaitu untuk menjadikan laman web interaktif dan dinamik. Dengan kata lain, mereka menghidupkan halaman web. Orang mungkin tertanya-tanya bahawa jika ia digunakan untuk tujuan yang sama maka mengapa kedua-dua konsep ini terpisah? Dalam artikel JavaScript vs jQuery ini, kita akan mengetahui mana yang lebih baik daripada yang lain dalam urutan berikut:

• JavaScript: Bahasa yang hebat dalam pembangunan web
• JQuery: Perpustakaan yang dibangunkan dari JavaScript
• Mengapa JQuery dibuat dan apakah keupayaan khas JQuery
• Perbezaan antara JavaScript dan JQuery dengan contoh
  • Menambah JavaScript dan JQuery dalam dokumen HTML kami
  • Perjalanan dan Manipulasi DOM
  • Pengendalian Acara
  • Panggilan Ajax
  • Animasi

JavaScript: Bahasa yang hebat dalam pembangunan web

JavaScript adalah bahasa skrip yang digunakan untuk menambahkan interaktiviti ke laman web kami. Ini adalah salah satu daripada tiga teknologi teras bersama HTML dan CSS yang digunakan untuk membuat laman web. Walaupun HTML dan CSS menentukan struktur halaman web dan tampilan / gaya halaman web, JavaScript digunakan untuk membuat halaman web dinamis dengan menambahkan interaktivitas padanya yang berarti dengan JavaScript kita dapat menambahkan beberapa kod untuk klik mouse, mouse over dan lainnya acara di laman web dan banyak lagi.

JavaScript didukung oleh semua penyemak imbas web dan penyemak imbas web mempunyai mesin JavaScript bawaan untuk mengenal pasti kod JavaScript dan bekerja dengannya. Oleh itu, JavaScript adalah bahasa utama pelanggan. Ini adalah satu bahasa yang dapat digunakan sebagai bahasa prosedural dan juga bahasa berorientasikan objek berdasarkan prototaip. Apabila kita menggunakan JavaScript utama kita bekerja dengan bahasa prosedural sementara JavaScript lanjutan menggunakan konsep berorientasikan objek.

Mari teruskan dengan JavaScript vs jQuery kami dan fahami perpustakaan yang dikembangkan dari JavaScript.

jQuery: Perpustakaan yang dibangunkan dari JavaScript

Selama bertahun-tahun JavaScript telah menjadi bahasa yang kuat untuk pembangunan web. Terdapat banyak perpustakaan dan kerangka kerja yang dibangun di atas JavaScript. Perpustakaan dan kerangka kerja ini dikembangkan untuk memperluas kemampuan JavaScript, melakukan banyak perkara dengannya dan juga untuk memudahkan kerja pembangun.

jQuery adalah salah satu perpustakaan JavaScript yang dibina daripadanya. Ia adalah perpustakaan JavaScript paling popular yang dicipta oleh John Resign dan dikeluarkan pada Januari 2006 di BarCamp NYC. jQuery adalah percuma, perpustakaan sumber terbuka, yang dilesenkan di bawah Lesen MIT. Ini mempunyai ciri kuat keserasian merentas penyemak imbas. Ia dapat menangani masalah lintas penyemak imbas dengan mudah yang dapat kita hadapi dengan JavaScript. Oleh itu, banyak pembangun menggunakan jQuery untuk mengelakkan masalah keserasian antara penyemak imbas.

Sekarang mari kita lanjutkan dengan blog JavaScript vs jQuery kami dan lihat mengapa jQuery dibuat.

Mengapa jQuery dibuat dan apakah keupayaan khas jQuery?

Dalam JavaScript, kita harus menulis banyak kod untuk operasi asas sementara dengan jQuery operasi yang sama dapat dilakukan dengan satu baris kod. Oleh itu pembangun merasa lebih senang bekerja dengan jQuery daripada menggunakan JavaScript.

• Walaupun JavaScript adalah bahasa asas dari mana jQuery berkembang, jQuery membuat pengendalian acara, manipulasi DOM, panggilan Ajax jauh lebih mudah daripada JavaScript. jQuery juga membolehkan kami menambahkan kesan animasi di laman web kami yang memerlukan banyak kesakitan dan garis kod dengan JavaScript.
• jQuery mempunyai plugin bawaan untuk menjalankan operasi di laman web. Kita hanya perlu memasukkan atau mengimport plugin di laman web kita untuk menggunakannya. Oleh itu, pemalam membolehkan kita membuat abstraksi animasi dan interaksi atau kesan.
• Kami juga boleh membuat plugin tersuai kami dengan jQuery. Sekiranya kita memerlukan animasi dilakukan di halaman web dengan cara tertentu, kita dapat mengembangkan plugin sesuai dengan persyaratan dan menggunakannya di halaman web kita.
• jQuery juga mempunyai pustaka widget UI peringkat tinggi. Perpustakaan widget ini mempunyai pelbagai jenis plugin yang dapat kami impor di laman web kami dan menggunakannya untuk membuat laman web yang mesra pengguna.

Mari fahami perbezaannya.

JavaScript vs jQuery

Bergerak dengan perbezaan antara JavaScript dan jQuery dengan Contoh.

JavaScript vs jQuery dengan contoh

Mari kita lihat contohnya.

Menambah JavaScript dan jQuery dalam dokumen HTML kami

JavaScript ditambahkan secara langsung dalam dokumen HTML di dalam tag atau file JavaScript eksternal dapat ditambahkan dalam dokumen HTML menggunakan atribut src.
Ditulis secara langsung di dalam tag skrip:

amaran ('Kotak amaran ini dipanggil dengan peristiwa muatan')

Untuk menggunakan jQuery, kami memuat turun fail dari laman webnya dan merujuk jalan fail jQuery yang dimuat turun dalam atribut src dari tag SCRIPT atau kami dapat memperolehnya secara langsung dari CDN (Rangkaian penghantaran kandungan).

Menggunakan CDN :

Mari kita fahami DOM Traversal and Manipulation

Perjalanan dan Manipulasi DOM

Dalam JavaScript:

Kita dapat memilih elemen DOM dalam JavaScript menggunakan kaedah document.getElementById () atau dengan menggunakan kaedah document.querySelector ().

var mydiv = document.querySelector ('# div1')

atau

document.getElementById ('# div1')

Di jQuery:

Di sini, kita hanya perlu menggunakan simbol $ dengan pemilih dalam kurungan.

$ (pemilih) $ ('# div1') - Pemilih adalah id 'div1' $ ('. div1') - Pemilih adalah kelas 'div1' $ ('p') - Pemilih adalah ayat dalam Halaman html

Dalam pernyataan di atas, $ adalah tanda yang digunakan untuk mengakses jQuery, pemilih adalah elemen HTML.

Menambah gaya dalam JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Menambah gaya dalam jQuery:

$ ('# myDiv'). css ('background-color', '# FFF')

Pemilih #myDiv merujuk kepada pengecam 'myDiv'

Pemilihan dan manipulasi elemen DOM jauh lebih ringkas dalam jQuery daripada pada JavaScript.

Bergerak dengan pengendalian acara.

Pengendalian Acara

Dalam JavaScript, kami memilih elemen HTML:

document.getElementById ('# button1'). addEventListener ('click', myCallback) fungsi myCallback () {konsol ('di dalam fungsi myCallback')}

Di sini kaedah getElementById () digunakan untuk memilih elemen dengan idnya, kemudian kita menggunakan kaedah addEventListener () untuk menambahkan pendengar Acara ke acara. Dalam contoh ini, kami menambahkan fungsi myCallback sebagai pendengar untuk acara 'klik'.

Kita juga boleh menggunakan fungsi tanpa nama dalam contoh di atas:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('di dalam fungsi')})

EventListener boleh dikeluarkan dengan menggunakan kaedah removeEventListener ()

document.getElementById ('# button1'). removeEventListener ('klik', myCallback)

Di jQuery

jQuery telah menentukan peristiwa untuk hampir semua tindakan DOM. Kita boleh menggunakan acara jQuery khusus untuk tindakan.

$ (“P”). Klik (fungsi () {// klik tindakan})

Contoh lain adalah:

$ ('# Button1'). Dblclick (function () {// tindakan untuk acara klik dua kali pada elemen html dengan id 'button1'}

Kaedah JQuery ‘on’ digunakan untuk menambahkan satu atau lebih peristiwa ke elemen DOM.

$ ('# Button1'). On ('klik', fungsi () {// tindakan di sini})

Kita boleh menambah pelbagai acara dan pelbagai pengendali acara dengan kaedah on.

$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})

Dua atau lebih acara boleh mempunyai pengendali yang sama seperti di bawah:

$ ('# Button1'). On ('klik dblclick', fungsi () {// tindakan di sini})

Oleh itu, kita melihat bahawa dengan kod yang lebih rendah dan ringkas, pengendalian acara lebih mudah di jQuery daripada di JavaScript.

Bergerak dengan Panggilan Ajax.

Panggilan Ajax

Dalam JavaScript

JavaScript menggunakan objek XMLHttpRequest untuk menghantar permintaan Ajax ke pelayan. XMLHttpRequest mempunyai beberapa kaedah untuk membuat panggilan Ajax. Dua kaedah biasa adalah terbuka (kaedah, URL, async, user, PSW), send () dan send (string).
Mari buat XMLHttpRequest terlebih dahulu:

var xhttp = XMLHttpRequest baru () Kemudian gunakan objek ini untuk memanggil kaedah terbuka: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Kaedah terbuka membuat permintaan mendapatkan ke pelayan / lokasi, yang benar menentukan bahawa permintaan tersebut tidak segerak. Sekiranya nilainya salah, ini bermaksud permintaan tersebut segerak.

Membuat permintaan pos:

cara menukar binari ke perpuluhan dalam java

var xhttp = XMLHttpRequest baru () Kemudian gunakan objek ini untuk memanggil kaedah terbuka dan membuat permintaan kiriman: xhttp.open ('POST', 'D: //postinfo.txt', true)

Untuk memposting data dengan permintaan, kami menggunakan metode setRequestHeader xhttp untuk menentukan jenis data yang akan dikirim dan metode kirim mengirim data dalam pasangan kunci / nilai:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & nama keluarga = Kumar')

Di jQuery

jQuery mempunyai beberapa kaedah inbuilt untuk membuat panggilan Ajax. Dengan kaedah ini, kita dapat memanggil data dari pelayan dan mengemas kini sebahagian laman web dengan data tersebut. Kaedah jQuery menjadikan panggilan Ajax mudah.
Kaedah jQuery load (): Kaedah ini mengambil data dari URL dan memuat data ke pemilih HTML.
$ (“P”). Muat (URL, data, panggilan balik)
URL adalah lokasi yang dipanggil untuk data, parameter data pilihan adalah data (pasangan kunci / nilai) yang ingin kami kirimkan bersama dengan panggilan dan parameter pilihan 'callback' adalah kaedah yang ingin kami laksanakan setelah pemuatan sudah selesai.

Kaedah jQuery $ .get () dan $ .post (): Kaedah ini mengambil data dari URL dan memuatkan data ke pemilih HTML.
$ .get (URL, panggilan balik)
URL adalah lokasi yang dipanggil untuk data dan panggilan balik adalah kaedah yang ingin kita laksanakan setelah pemuatan selesai.

$. pos (URL, data, panggilan balik)
URL adalah lokasi yang dipanggil untuk data, data adalah pasangan kunci / nilai yang ingin kami kirimkan dengan panggilan dan panggilan balik adalah kaedah yang ingin kami laksanakan setelah pemuatan selesai. Di sini parameter data dan panggilan balik adalah pilihan.

Panggilan jQuery Ajax lebih ringkas daripada JavaScript. Dalam JavaScript, kita menggunakan objek XMLHTTPRequest, di jQuery kita tidak perlu menggunakan objek tersebut.

Bergerak dengan Animasi.

Animasi

Dalam JavaScript

JavaScript tidak mempunyai fungsi animasi tertentu seperti fungsi jQuery animate (). Dalam kesan animasi JavaScript dicapai terutamanya dengan memanipulasi gaya elemen atau dengan menggunakan CSS transform, translate atau animate properties. JavaScript juga menggunakan kaedah setInterval (), clearInterval (), setTimeout () dan clearTimeout () untuk kesan animasi.

setInterval (myAnimation, 4) fungsi myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20 darjah) '}

Animasi dalam JavaScript terutamanya mengenai memanipulasi sifat CSS.

Di jQuery

jQuery mempunyai banyak kaedah bawaan untuk menambahkan animasi atau kesan pada elemen HTML. Mari kita periksa beberapa daripadanya.
Kaedah animate (): Kaedah ini digunakan untuk menambahkan animasi pada elemen.

$ ('# button1'). klik (function () {$ ('# div1') .animate ({tinggi: '300px'})}})

Kaedah tunjuk (): Kaedah ini digunakan untuk membuat elemen kelihatan dari keadaan tersembunyi.

$ ('# button1'). klik (fungsi () {$ ('# div1'). tunjukkan ()})

Kaedah hide (): Kaedah ini digunakan untuk menyembunyikan elemen dari keadaan yang kelihatan.

$ ('# button1'). klik (fungsi () {$ ('# div1'). sembunyikan ()})

jQuery mempunyai kaedah tersendiri untuk menghasilkan animasi dan kesan di laman web.

Kesimpulannya, JavaScript adalah bahasa untuk pengembangan web, jQuery adalah perpustakaan yang berasal dari JavaScript. JavaScript dan jQuery mempunyai kepentingan tersendiri dalam pembangunan web.

Setelah anda mengetahui tentang Gelung JavaScript, lihat oleh Edureka. Latihan Pengesahan Pembangunan Web akan membantu anda belajar bagaimana membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen 'JavaScript vs jQuery' dan kami akan menghubungi anda.