jQuery เตอร์เป็นหนึ่งในส่วนที่สำคัญที่สุดของห้องสมุด jQuery
jQuery Selectors
เตอร์ jQuery ช่วยให้คุณสามารถเลือกและจัดการกับองค์ประกอบ HTML (s)
jQuery เตอร์จะใช้ในการ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML บนพื้นฐานของพวกเขาชื่อ ID, เรียน, ประเภทแอตทริบิวต์ค่าของคุณลักษณะและอื่น ๆ อีกมากมายIt's based on the existing CSS Selectors , and in addition, it has some own custom selectors. ก็ขึ้นอยู่กับที่มีอยู่ใน ตัวเลือก CSS และนอกจากนี้ยังมีบางส่วนที่กำหนดเองเตอร์ของตัวเอง
เตอร์ทั้งหมดใน jQuery เริ่มต้นด้วยเครื่องหมายดอลลาร์และวงเล็บ: $ ()
ตัวเลือกองค์ประกอบ
jQuery องค์ประกอบเลือกเลือกองค์ประกอบตามชื่อธาตุ
คุณสามารถเลือกทั้งหมด <p> องค์ประกอบบนหน้าเช่นนี้
$("p")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่มทั้งหมด <p> องค์ประกอบที่จะถูกซ่อนไว้:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
ลองตัวเอง»ตัวเลือก #ID
jQuery #ID เลือกใช้แอตทริบิวต์ ID ของแท็ก HTML เพื่อหาองค์ประกอบเฉพาะ
รหัสต้องไม่ซ้ำกันภายในหน้าดังนั้นคุณควรใช้ตัวเลือก #ID เมื่อคุณต้องการที่จะหาเดียวองค์ประกอบที่ไม่ซ้ำกัน
เพื่อหาองค์ประกอบที่มีรหัสเฉพาะเขียนตัวอักษรกัญชาตามด้วยรหัสขององค์ประกอบ HTML นี้:
$("#test")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่มองค์ประกอบที่มี id = "ทดสอบ" จะถูกซ่อนอยู่:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
ลองตัวเอง»ตัวเลือก .class
ชั้นเลือก jQuery พบว่าองค์ประกอบที่มีเฉพาะชั้น
เพื่อหาองค์ประกอบที่มีเฉพาะชั้นเขียนตัวอักษรระยะเวลาตามด้วยชื่อของชั้นเรียน:
$(".test")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่มองค์ประกอบที่มี class = "ทดสอบ" จะถูกซ่อนอยู่:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
ลองตัวเอง»ตัวอย่างเพิ่มเติมของ jQuery Selectors
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
ใช้งานของเรา jQuery เลือกทดสอบ แสดงให้เห็นถึงเตอร์ที่แตกต่างกัน
สำหรับอ้างอิงที่สมบูรณ์ของทุกเตอร์ jQuery โปรดไปที่เรา อ้างอิง jQuery Selectors
ฟังก์ชั่นในแฟ้มต่างหาก
หากเว็บไซต์ของคุณมีจำนวนมากของหน้าเว็บและคุณต้องการฟังก์ชั่น jQuery ของคุณเพื่อให้ง่ายต่อการรักษาคุณสามารถใส่ฟังก์ชั่นของคุณ jQuery ในไฟล์ .js แยกต่างหาก
เมื่อเราแสดงให้เห็นถึง jQuery ในการกวดวิชานี้ฟังก์ชั่นที่มีการเพิ่มโดยตรงในส่วน <head>However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): แต่บางครั้งก็เป็นที่นิยมที่จะวางไว้ในแฟ้มที่แยกต่างหากเช่นนี้ (ใช้คุณลักษณะ src เพื่ออ้างถึงไฟล์ .js):
ตัวอย่าง
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 »