Στοιχεία HTML jQuery

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

    Εμφάνιση πίνακα περιεχομένων

jQuery εναντίον JavaScript

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

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

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

Ορισμός περιεχομένου κειμένου

Ορίστε το εσωτερικό κείμενο ενός στοιχείου HTML:

jQuery

myElement.text("Hello Sweden!");

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

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

<h2>Setting Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>

<script>
$(document).ready(function() {
  var myElement = $("#01");
  myElement.text("Hello Sweden!");
});
</script>

</body>
</html>

JavaScript

myElement.textContent = "Hello Sweden!";

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

<!DOCTYPE html>
<html>
<body>

<h2>Setting Text Content</h2>

<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>

<script>
const myElement = document.getElementById("01");
myElement.textContent = "Hello Sweden!";
</script>

</body>
</html>

Λήψη περιεχομένου κειμένου

Λάβετε το εσωτερικό κείμενο ενός στοιχείου HTML:

jQuery

myText = $("#02").text();

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

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

<h2>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>

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

<script>
$(document).ready(function() {
  var myText = $("#02").text();
  $("#demo").text(myText); 
});
</script>

</body>
</html>

JavaScript

myText = document.getElementById("02").textContent;

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

<!DOCTYPE html>
<html>
<body>

<h2>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>

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

<script>
const myText = document.getElementById("02").textContent;
document.getElementById("demo").innerHTML = myText; 
</script>

</body>
</html>

Ορισμός περιεχομένου HTML

Ορίστε το περιεχόμενο HTML ενός στοιχείου:

jQuery

myElement.html("<p>Hello World</p>");

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

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

<h2>Set HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>

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

<script>
$(document).ready(function() {
  $("#02").html("<p>Hello World!</p>");
});
</script>

</body>
</html>

JavaScript

myElement.innerHTML = "<p>Hello World</p>";

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

<!DOCTYPE html>
<html>
<body>

<h2>Set HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>

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

<script>
document.getElementById("02").innerHTML = "<p>Hello World!</p>";
</script>

</body>
</html>

Λάβετε Περιεχόμενο HTML

Λάβετε το περιεχόμενο HTML ενός στοιχείου:

jQuery

content = myElement.html();

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

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

<h2>Set HTML</h2>

<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>

<script>
$(document).ready(function() {
  var content = $("#02").html();
  $("#01").html(content);
});
</script>

</body>
</html>

JavaScript

content = myElement.innerHTML;

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

<!DOCTYPE html>
<html>
<body>

<h2>Setting HTML</h2>

<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>

<script>
const content = document.getElementById("02").innerHTML;
document.getElementById("01").innerHTML = content;
</script>

</body>
</html>