ตัวเลือก jQuery

สารบัญ

jQuery กับ JavaScript

jQuery ถูกสร้างขึ้นในปี 2549 โดย John Resig ได้รับการออกแบบมาเพื่อจัดการกับความไม่เข้ากันของเบราว์เซอร์ และทำให้การจัดการ HTML DOM, การจัดการเหตุการณ์, ภาพเคลื่อนไหว และ 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>

จาวาสคริปต์

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>

จาวาสคริปต์

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>

จาวาสคริปต์

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>

จาวาสคริปต์

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>