Artikel

JQuery, apa iku lan apa kita bisa nindakake karo perpustakaan JavaScript

jQuery minangka perpustakaan JavaScript sing cepet, entheng lan sugih fitur adhedhasar prinsip kasebut "Tulis kurang, luwih akeh" . API JQuery nyederhanakake manajemen lan pangopènan dokumen HTML, manajemen acara, nambah efek animasi menyang kaca web. Iku kompatibel karo kabeh browser utama kayata Chrome, Firefox, Safari, Edge.

Nggawe aplikasi basis Ajax dadi banget prasaja lan cepet karo jQuery.

jQuery Originally digawe dening John Resig ing awal 2006. Proyèk jQuery saiki maintained lan maintained dening klompok mbagekke pangembang minangka project open source.

Sampeyan bisa nyimpen akeh wektu lan gaweyan karo jQuery. Dadi tambahake situs iki menyang favorit lan terus maca

Apa sampeyan bisa nindakake karo jQuery

Ana akeh liyane sampeyan bisa nindakake karo jQuery.

  • Sampeyan bisa kanthi gampang milih unsur kaca HTML, kanggo maca utawa ngowahi atribut;
  • Sampeyan bisa kanthi gampang nggawe efek kaya nuduhake utawa ndhelikake unsur, transisi, nggulung lan liya-liyane;
  • Sampeyan bisa kanthi gampang nggawe animasi CSS rumit kanthi baris kode sing luwih sithik;
  • Sampeyan bisa gampang ngapusi unsur DOM lan atribut;
  • Sampeyan bisa kanthi gampang ngleksanakake Ajax kanggo ngaktifake ijol-ijolan data asinkron antarane klien lan server;
  • Sampeyan bisa kanthi gampang ngliwati kabeh wit DOM kanggo nemokake unsur apa wae;
  • Sampeyan bisa kanthi gampang nindakake pirang-pirang tumindak ing unsur kanthi baris kode siji;
  • Sampeyan bisa gampang njaluk utawa nyetel ukuran unsur HTML.

Dhaptar ora mungkasi ana, ana akeh liyane kelangan sampeyan bisa nindakake karo jQuery.

Keuntungan nggunakake jQuery

Ana sawetara kaluwihan kenapa sampeyan kudu milih nggunakake jQuery:

  • Ngirit wektu akeh: Sampeyan bisa ngirit wektu lan gaweyan kanthi nggunakake efek lan pamilih jQuery lan fokus ing aspek pangembangan liyane;
  • Nyederhanakake tugas JavaScript umum - jQuery nyederhanakake tugas JavaScript umum. Saiki sampeyan bisa kanthi gampang nggawe kaca web sing sugih fitur lan interaktif, kanthi baris kode sing luwih sithik. Conto khas yaiku implementasine Ajax kanggo refresh isi kaca, tanpa refresh;
  • gamblang: jQuery gampang banget kanggo nggunakake. Sapa wae sing duwe kawruh dhasar babagan HTML, CSS, lan JavaScript bisa miwiti ngembangake jQuery;
  • Kompatibel karo kabeh browser: jQuery digawe karo browser modern ing atine lan kompatibel karo kabeh browser modern utama kayata Chrome, Firefox, Safari, Edge;
  • Pancen Gratis - Lan sing paling apik yaiku gratis kanggo didownload lan digunakake.

jQuery download

Kanggo miwiti, ayo download salinan jQuery dhisik banjur lebokake ing proyek kita. Rong versi jQuery kasedhiya kanggo diundhuh: kesusu e ora dikompres .

File sing ora dikompres luwih cocog kanggo pangembangan utawa debugging; nalika, file minified lan teken dianjurake kanggo produksi amarga nyimpen bandwidth lan mbenakake kinerja amarga ukuran file cilik.

Kita bisa ngundhuh jQuery saka kene: https://jquery.com/download/

Sawise sampeyan ndownload file jQuery sampeyan bisa ndeleng manawa ana ekstensi js, yaiku file JavaScript. Nyatane JQuery ora liya perpustakaan JavaScript, supaya sampeyan bisa nyakup file jQuery ing dokumen HTML kanthi unsur kasebut. kaya sampeyan kalebu file JavaScript biasa.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Elinga supaya tansah nyakup file jQuery sadurunge skrip khusus; yen ora, API jQuery ora kasedhiya nalika kode jQuery nyoba kanggo ngakses.

Kaya sing sampeyan ngerteni, kita nglewati atribut ing conto sadurunge type="text/javascript" nang tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefirampung ing HTML5 lan ing kabeh browser modern.

jQuery saka CDN

Minangka alternatif, sampeyan bisa nglebokake jQuery menyang dokumen liwat pranala CDN (Content Delivery Network) sing kasedhiya, yen sampeyan luwih seneng ngindhari file kasebut.

CDNs bisa kurban kauntungan kinerja dening ngurangi wektu mbukak, amarga padha tuan rumah jQuery ing macem-macem server ing saindhenging donya, lan nalika pangguna njaluk file, bakal dilayani saka server paling cedhak.

Iki uga nduweni kaluwihan yen pengunjung kaca web sampeyan wis ndownload salinan jQuery saka CDN sing padha nalika ngunjungi situs liyane, dheweke ora kudu ngundhuh maneh amarga wis ana ing cache browser.

Ing kasus iki, sampeyan kudu nulis:

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

Saliyane ing CDN diwenehake dening project jquery, sampeyan bisa kalebu jQuery liwat Google e Microsoft cdn.

Kaca web pisanan adhedhasar jQuery

Sawise ndeleng tujuan perpustakaan jQuery lan carane nyakup ing dokumen sampeyan, saiki wektune kanggo ngetrapake jQuery.

Saiki ayo nindakake operasi jQuery sing prasaja kanthi ngganti warna teks header saka warna pradefiwarnane ireng nganti ijo.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Ing kode kita nindakake operasi jQuery prasaja kanthi ngganti werna header yaiku unsur nggunakake pamilih unsur jQuery lan css () cara nalika document siap, dikenal minangka document siap acara. 

sintaks jQuery

Pernyataan jQuery biasane diwiwiti kanthi tandha dolar ( $) lan dipungkasi nganggo titik koma ( ;).

Ing jQuery, tandha dolar ( $) iku mung alias kanggo jQuery. Coba kode conto ing ngisor iki sing nuduhake statement jQuery sing paling gampang.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

Conto mung nampilake pesen peringatan "Hello I'm a JQuery sign"kanggo pangguna. Ayo ndeleng sawetara fitur:

  • Unsur kasebut <script>: jQuery mung perpustakaan JavaScript, kode jQuery bisa diselehake nang unsur <script>, utawa sampeyan bisa nyelehake ing file JavaScript eksternal;
  • baris $(document).ready(handler); dikenal minangka acara siap. ngendi iku handler iku fungsi sing liwati kanggo cara kanggo kaleksanan, sanalika document siap, IE nalika hirarki DOM wis rampung dibangun.

Metode jQuery ready() biasane digunakake karo fungsi anonim. Dadi, conto ing ndhuwur uga bisa ditulis ing notasi shorthand kaya iki:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

Pamilih

Ing sawijining fungsi, sampeyan bisa nulis statement jQuery kanggo nindakake tumindak miturut sintaks dhasar, kayata:

$(selector).action();

Ing endi iku, $(selector) Sejatine milih unsur HTML saka wit DOM supaya bisa diapusi lan action() aplikasi sawetara tumindak ing unsur sing dipilih, kayata ngganti nilai properti CSS, utawa nyetel isi unsur, etc.

Saiki ayo goleki conto liyane sing nyetel teks paragraf:

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Conto jQuery nuduhake pamilih p, lan iki milih kabeh paragraf, banjur cara text() atur isi teks paragraf kanthi “Hello World!".

Teks paragraf ing conto sadurunge diganti kanthi otomatis nalika dokumen wis siyap. Nanging ayo ndeleng carane nindakake yen sampeyan pengin nindakake tumindak sadurunge mbukak kode jQuery, kanggo ngganti teks paragraf kasebut. 

Ayo nimbang conto pungkasan:


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

Ing conto iki teks paragraf diganti mung nalika acara klik ana ing tombol "Replace Text", sing mung tegese nalika pangguna ngeklik tombol iki.

Milih item kanthi ID

Sampeyan bisa nggunakake pamilih ID kanggo milih item siji karo ID unik ing kaca.

Contone, kode jQuery ing ngisor iki bakal milih lan nyorot unsur kanthi atribut ID id="markid", nalika dokumen wis siyap.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Milih unsur kanthi jeneng kelas

Pemilih kelas bisa digunakake kanggo milih unsur karo kelas tartamtu.

Contone, kode jQuery ing ngisor iki bakal milih lan nyorot unsur kanthi atribut kelas class="markclass", nalika dokumen wis siyap.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Milih item kanthi jeneng

Pamilih item bisa digunakake kanggo milih item miturut jeneng item.

Contone, kode jQuery ing ngisor iki bakal milih lan nyorot kabeh paragraf, yaiku unsur "<p>" dokumen nalika wis siyap.

newsletter inovasi
Aja kantun warta paling penting babagan inovasi. Mlebu kanggo nampa wong-wong mau liwat email.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Pamilihan unsur miturut atribut

Sampeyan bisa nggunakake pamilih atribut kanggo milih unsur adhedhasar salah sawijining atribut HTML, kayata atribut link targetutawa atribut input typelsp.

Contone, kode jQuery ing ngisor iki bakal milih lan nyorot kabeh input teks, kayata unsur "<input>" con type="text", nalika dokumen wis siyap.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Pilihan unsur liwat pamilih CSS senyawa

Sampeyan uga bisa nggabungake pamilih CSS kanggo nggawe pilihan sampeyan luwih tepat.

Contone, sampeyan bisa nggabungake pamilih kelas karo pamilih unsur kanggo nemokake unsur ing document sing duwe jinis tartamtu lan kelas.

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
jQuery Custom Selector

Saliyane pamilih defiNanging, jQuery menehi pamilih adat dhewe kanggo luwih nambah Kapabilitas saka milih unsur ing kaca.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

Events

Acara asring dipicu dening interaksi pangguna karo kaca web, kayata nalika ngeklik link utawa tombol, ngetik teks menyang kothak input utawa area teks, nggawe pilihan ing kothak pilihan, pencet tombol ing keyboard, mindhah pointer mouse. , lsp. Ing sawetara kasus, browser dhewe bisa micu acara, kayata mbukak kaca lan acara download.

jQuery nambah mekanisme penanganan acara dhasar kanthi nawakake metode acara kanggo umume acara browser asli, sawetara metode kasebut ready(), click(), keypress(), focus(), blur(), change()lsp.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

Umumé, acara bisa dipérang dadi papat klompok utama: 

  • acara tikus,
  • acara keyboard,
  • acara modul ed
  • acara dokumen / jendhela . 

Acara tikus

Acara mouse dipicu nalika pangguna ngeklik item, mindhah penunjuk mouse, lsp.

Ing ngisor iki sawetara cara jQuery sing umum digunakake kanggo nangani acara mouse.

Metode click()

Caranipun click() masang fungsi pengendali acara menyang unsur sing dipilih kanggo acara kasebut "click“. Fungsi sing disambung dieksekusi nalika pangguna ngeklik item kasebut. Conto ing ngisor iki bakal ndhelikake unsur kasebut <p> ing kaca nalika diklik.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Metode dblclick()

Caranipun dblclick() masang fungsi pengendali acara menyang unsur sing dipilih kanggo acara kasebut "dblclick“. Fungsi sing disambung dieksekusi nalika pangguna ngeklik kaping pindho item kasebut. Conto ing ngisor iki bakal ndhelikake unsur kasebut <p> nalika ngeklik kaping pindho.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Metode hover()

Caranipun hover() masang siji utawa loro fungsi handler acara kanggo unsur sing dipilih sing dieksekusi nalika pointer mouse pindhah lan metu saka unsur. Fungsi pisanan mlaku nalika pangguna nempatake pointer mouse ing item, nalika fungsi kapindho mlaku nalika pangguna mbusak pointer mouse saka item kasebut.

Conto ing ngisor iki bakal nyorot item <p> nalika sampeyan nyeleh kursor ing, sorotan bakal dibusak nalika mbusak kursor.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Metode mouseenter()

Caranipun mouseenter() masang fungsi handler acara kanggo unsur sing dipilih kang kaleksanan nalika mouse lumebu unsur. Conto ing ngisor iki bakal nambah panyorot kelas menyang unsur kasebut <p> nalika sampeyan nyelehake kursor ing ndhuwur.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Metode mouseleave()

Caranipun mouseleave() masang fungsi handler acara kanggo item sing dipilih sing mlaku nalika mouse ninggalake item. Conto ing ngisor iki bakal mbusak sorotan kelas saka unsur kasebut <p> nalika sampeyan mbusak kursor saka iku.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

acara keyboard

Acara keyboard mundhak nalika pangguna menet utawa ngeculake tombol ing keyboard. Ayo goleki sawetara cara jQuery sing umum digunakake kanggo nangani acara keyboard.

Metode keypress()

Caranipun keypress() nempelake fungsi penanganan acara menyang unsur sing dipilih (biasane mbentuk kontrol) sing mlaku nalika browser nampa input keyboard saka pangguna. Conto ing ngisor iki bakal nampilake pesen nalika acara kasebut dipicu keypress lan kakehan micu nalika sampeyan menet tombol ing keyboard.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Acara penet tombol padha karo acara keydown, kajaba tombol modifier lan nonprinting kayata Shift, Esc, Backspace utawa Delete, tombol panah, lsp. padha murub acara keydown nanging ora acara keypress.

Metode keydown()

Caranipun keydown() nempelake fungsi nangani acara menyang item sing dipilih (biasane mbentuk kontrol) sing dileksanakake nalika pangguna pisanan menet tombol ing keyboard. Conto ing ngisor iki bakal nampilake pesen nalika acara kasebut dipicu keydown lan kakehan micu nalika sampeyan menet tombol ing keyboard.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Metode keyup()

Caranipun keyup() masang fungsi nangani acara menyang unsur sing dipilih (biasane mbentuk kontrol) sing dileksanakake nalika pangguna ngeculake tombol ing keyboard. Conto ing ngisor iki bakal nampilake pesen nalika acara kasebut dipicu keyup lan kakehan micu nalika sampeyan menet lan ngeculake tombol ing keyboard.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Formulir acara

A acara wangun micu nalika kontrol wangun nampa utawa ilang fokus, utawa nalika pangguna ngganti Nilai kontrol wangun, kayata ngetik teks menyang input teks, milih pilihan ing kothak pilih, etc. Ing ngisor iki sawetara cara jQuery sing umum digunakake kanggo nangani acara formulir.

Metode change()

Caranipun change() masang fungsi handler acara kanggo unsur <input> lan dieksekusi nalika owah-owahan regane. Conto ing ngisor iki bakal nampilake pesen bebaya nalika milih pilihan ing kothak pilihan gulung mudhun.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

Kanggo kothak klik, kothak centhang, lan tombol radio, acara langsung murub nalika pangguna milih mouse, nanging kanggo input teks lan area teks acara murub sawise unsur ilang fokus.

Metode focus()

Caranipun focus() attaches fungsi handler acara kanggo unsur sing dipilih (biasane kontrol lan mbentuk bindings) sing kaleksanan nalika dadi fokus. Conto ing ngisor iki bakal nampilake pesen nalika input teks nampa fokus.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Metode blur()

Caranipun blur() masang fungsi handler acara kanggo mbentuk unsur kayata <input><textarea><select> kang kaleksanan nalika ilang fokus. Conto ing ngisor iki bakal nampilake pesen nalika input teks ilang fokus.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Metode submit()

Caranipun submit() masang fungsi handler acara kanggo unsur <form> sing mlaku nalika pangguna nyoba ngirim formulir. Conto ing ngisor iki bakal nampilake pesen adhedhasar nilai sing dilebokake nalika nyoba ngirim formulir kasebut.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

Dokumen / Jendhela Acara

Acara kasebut uga dipecat ing kahanan kaca DOM (Document Object Model) wis siyap utawa nalika pangguna ngowahi ukuran utawa nggulung jendhela browser, lsp. Ing ngisor iki sawetara cara jQuery sing umum digunakake kanggo nangani acara iki.

Metode ready()

Caranipun ready() nemtokake fungsi kanggo nglakokaké nalika DOM wis kebak dimuat.

Conto ing ngisor iki bakal ngganti teks paragraf sanalika hierarki DOM wis dibangun kanthi lengkap lan siap dimanipulasi.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Metode resize()

Caranipun resize() masang fungsi handler acara kanggo unsur jendhela sing mlaku nalika ukuran jendhela browser diganti.

Conto ing ngisor iki bakal nuduhake amba lan dhuwur saiki jendhela browser nalika sampeyan nyoba ngowahi ukuran kanthi nyeret sudhut.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
Metode scroll()

Caranipun scroll() masang fungsi handler acara kanggo jendhela utawa menyang iframe lan item sing bisa digulung sing mlaku nalika posisi gulung item diganti.

Conto ing ngisor iki bakal nampilake pesen nalika nggulung jendhela browser.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

newsletter inovasi
Aja kantun warta paling penting babagan inovasi. Mlebu kanggo nampa wong-wong mau liwat email.

Artikel anyar

Masa Depan Iki: Kepiye Industri Pengiriman Revolusi Ekonomi Global

Sektor angkatan laut minangka kekuwatan ekonomi global sing sejatine, sing wis ngarahake pasar 150 milyar ...

1 May 2024

Penerbit lan OpenAI menehi tandha persetujuan kanggo ngatur aliran informasi sing diproses dening Artificial Intelligence

Senin kepungkur, Financial Times ngumumake kesepakatan karo OpenAI. FT menehi lisensi jurnalisme kelas donya…

30 April 2024

Pembayaran Online: Mangkene Kepiye Layanan Streaming Nggawe Sampeyan Mbayar Selawase

Mayuta-yuta wong mbayar layanan streaming, mbayar biaya langganan saben wulan. Umume pendapat yen sampeyan…

29 April 2024

Veeam nduweni dhukungan paling lengkap kanggo ransomware, saka proteksi nganti respon lan pemulihan

Coveware dening Veeam bakal terus nyedhiyakake layanan respon insiden pemerasan cyber. Coveware bakal nawakake kemampuan forensik lan remediasi…

23 April 2024