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
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
ciri-ciri | JavaScript | jQuery |
Kehadiran | JavaScript adalah bahasa bebas dan boleh wujud dengan sendirinya. | jQuery adalah perpustakaan JavaScript. Ia tidak akan diciptakan sekiranya JavaScript tidak ada di sana. jQuery masih bergantung pada JavaScript kerana ia harus ditukar menjadi JavaScript agar mesin JavaScript dalam penyemak imbas dapat menafsirkan dan menjalankannya. |
Bahasa | Ini adalah bahasa skrip sisi pelanggan yang ditafsirkan tahap tinggi. Ini adalah gabungan skrip ECMA dan DOM (Model Objek Dokumen) | Ia adalah perpustakaan JavaScript yang ringan. Ia hanya mempunyai DOM |
Pengekodan | JavaScript menggunakan lebih banyak baris kod kerana kita harus menulis kod kita sendiri | jQuery menggunakan lebih sedikit baris kod daripada JavaScript untuk fungsi yang sama seperti kod yang sudah ditulis di perpustakaannya, kita hanya perlu mengimport perpustakaan dan menggunakan fungsi / kaedah perpustakaan yang relevan dalam kod kita. |
Penggunaan | Kod JavaScript ditulis di dalam tag skrip di halaman HTML | Kita perlu mengimport jQuery dari CDN atau dari lokasi di mana perpustakaan jQuery dimuat turun untuk menggunakannya. kod jQuery juga ditulis di dalam tag skrip di halaman HTML. |
Animasi | Kita boleh membuat animasi dalam JavaScript dengan banyak baris kod. Animasi terutama dilakukan dengan memanipulasi gaya halaman Html. | Di jQuery, kita dapat menambahkan kesan animasi dengan mudah dengan lebih sedikit baris kod. |
Keramahan pengguna | JavaScript boleh membebankan pengembang kerana memerlukan beberapa baris kod untuk mencapai fungsi | jQuery lebih mesra pengguna daripada JavaScript dengan beberapa baris kod |
Keserasian merentas penyemak imbas | Dalam JavaScript, kita mungkin perlu menangani keserasian penyemak imbas silang dengan menulis kod tambahan atau penyelesaian. | jQuery serasi antara penyemak imbas. Kami tidak perlu risau untuk menulis penyelesaian atau kod tambahan untuk menjadikan kod kami serasi dengan penyemak imbas. |
Persembahan | JavaScript murni dapat lebih cepat untuk pemilihan / manipulasi DOM daripada jQuery kerana JavaScript diproses secara langsung oleh penyemak imbas. | jQuery harus diubah menjadi JavaScript untuk membuatnya berjalan di penyemak imbas. |
Pengendalian acara, Interaktiviti, dan panggilan Ajax | Semua ini boleh dilakukan dalam JavaScript tetapi kita mungkin perlu menulis banyak baris kod. | Semua ini dapat dilakukan dengan mudah dengan jQuery dengan lebih sedikit baris kod. Lebih mudah di jQuery untuk menambahkan interaktiviti, animasi dan juga membuat panggilan ajax kerana fungsinya sudah ditentukan sebelumnya di perpustakaan. Kami hanya menggunakan fungsi tersebut dalam kod kami di tempat yang diperlukan. |
Kata Kerja | JavaScript adalah verbose kerana seseorang harus menulis banyak baris kod untuk fungsi | jQuery ringkas dan menggunakan lebih sedikit baris kod, kadang-kadang hanya satu baris kod. |
Saiz dan Berat | Sebagai bahasa, ia lebih berat daripada jQuery | Menjadi perpustakaan, ia ringan. Ini mempunyai versi kod yang diperkecil yang menjadikannya ringan. |
Kegunaan dan Kegunaan | Kod JavaScript boleh menjadi verbose dan oleh itu sukar untuk dijaga dan digunakan semula. | Dengan lebih sedikit baris kod, jQuery lebih terjaga kerana kita hanya perlu memanggil fungsi yang telah ditentukan di perpustakaan jQuery dalam kod kita. Ini juga menjadikan kita mudah menggunakan semula fungsi jQuery di tempat yang berbeza dalam kod. |
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.