Επιλογείς jQuery

Πίνακας περιεχομένων

jQuery εναντίον JavaScript

Το jQuery δημιουργήθηκε το 2006 από τον John Resig. Σχεδιάστηκε για να χειρίζεται τις ασυμβατότητες του προγράμματος περιήγησης και να απλοποιεί τη χειραγώγηση DOM HTML, το χειρισμό συμβάντων, τα κινούμενα σχέδια και το Ajax.

Για περισσότερα από 10 χρόνια, η jQuery είναι η πιο δημοφιλής βιβλιοθήκη JavaScript στον κόσμο.

Ωστόσο, μετά την έκδοση JavaScript 5 (2009), τα περισσότερα από τα βοηθητικά προγράμματα jQuery μπορούν να επιλυθούν με μερικές γραμμές τυπικής JavaScript:

Εύρεση στοιχείου HTML ανά αναγνωριστικό

Επιστρέψτε το στοιχείο με id="id01":

jQuery

myElement = $("#id01");

Δοκιμάστε το μόνοι σας →

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

<h2>Finding HTML Elements by Id</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<p id="id03">Hello Japan!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("#id01");
  $("#demo").text("The text from the id01 paragraph is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

JavaScript

myElement = document.getElementById("id01");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<p id="id03">Hello Japan!</p>

<p id="demo"></p>

<script>
const myElement = document.getElementById("id01");
document.getElementById("demo").innerHTML = "The text from the id01 paragraph is: " + myElement.innerHTML;
</script>

</body>
</html>

Εύρεση στοιχείων HTML ανά όνομα ετικέτας

Επιστροφή όλων των στοιχείων <p>:

jQuery

myElements = $("p");

Δοκιμάστε το μόνοι σας →

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

<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>
<p>Hello Sweden!</p>
<p>Hello Japan!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p");
  $("#demo").text("The text in the first paragraph is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

JavaScript

myElements = document.getElementsByTagName("p");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>Hello Sweden!</p>
<p>Hello Japan!</p>

<p id="demo"></p>

<script>
const myElements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "The text in the first paragraph is: " + myElements[0].innerHTML;
</script>

</body>
</html>

Εύρεση στοιχείων HTML κατά όνομα κλάσης

Επιστρέψτε όλα τα στοιχεία με class="intro".

jQuery

myElements = $(".intro");

Δοκιμάστε το μόνοι σας →

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

<h2>Finding HTML Elements by Class Name</h2>

<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $(".intro");
  $("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

JavaScript

myElements = document.getElementsByClassName("intro");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Class Name</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>

<p id="demo"></p>

<script>
const myElements = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = "The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>

</body>
</html>

Εύρεση στοιχείων HTML από επιλογείς CSS

Επιστρέψτε μια λίστα με όλα τα στοιχεία <p> με class="intro".

jQuery

myElements = $("p.intro");

Δοκιμάστε το μόνοι σας →

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

<h2>Finding HTML Elements by Query Selector</h2>

<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p.intro");
  $("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>

</body>
</html>

JavaScript

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Query Selector</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>

<p id="demo"></p>

<script>
const myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
"The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>

</body>
</html>