JavaScript / jQuery DOM-valitsimet

jQuery vs JavaScript

jQuery perustettiin John Resigillä vuonna 2006. Se on suunniteltu käsittelemään selaimen yhteensopivuusongelmia ja yksinkertaistamaan HTML DOM:n hallintaa, tapahtumien käsittelyä, animaatioita ja Ajaxia.

Kahdessakymmenessä vuodessa jQuery on ollut maailman suosituin JavaScript-kirjasto.

Kuitenkin, JavaScript Version 5:n (2009) jälkeen, suurin osa jQuery-työkaluista voidaan ratkaista muutamilla rivillä standardeja JavaScriptiä:

Etsi HTML-elementtejä id:n perusteella

Palauta elementti, jolla on id="intro":

jQuery

var myElement = $("#id01");

Kokeile itse

JavaScript

var myElement = document.getElementById("id01");

Kokeile itse

Etsi HTML-elementtejä nimellä

Palauta kaikki <p>-elementit:

jQuery

var myElements = $("p");

Kokeile itse

Esimerkki

var myElements = document.getElementsByTagName("p");

Kokeile itse

Etsi HTML-elementtejä luokan nimellä

Palauttaa kaikkien class="intro" sisältävät elementit.

jQuery

var myElements = $(".intro");

Kokeile itse

JavaScript

var myElements = document.getElementsByClassName("intro");

Kokeile itse

Elementin etsiminen luokan nimellä ei toimi Internet Explorer 8:ssa ja aikaisemmissa versioissa.

Etsi HTML-elementtejä CSS-valitsimella

Palauttaa luettelon kaikista class="intro" sisältävistä <p>-elementeistä.

jQuery

var myElements = $("p.intro");

Kokeile itse

JavaScript

var myElements = document.querySelectorAll("p.intro");

Kokeile itse

querySelectorAll() Menetelmä ei toimi Internet Explorer 8:ssa ja aikaisemmissa versioissa.