Latest web development tutorials
×

jQuery หลักสูตร

jQuery หลักสูตร jQuery แนะนำโดยย่อ jQuery ติดตั้ง jQuery ไวยากรณ์ jQuery ผู้เลือก jQuery เหตุการณ์

jQuery ผล

jQuery ซ่อน / แสดง jQuery จางหาย jQuery สไลด์ jQuery นิเมชั่น jQuery หยุดนิเมชั่น jQuery Callback jQuery Chaining

jQuery HTML

jQuery การจับกุม jQuery จัดตั้งขึ้น jQuery เพิ่มองค์ประกอบ jQuery การลบองค์ประกอบ jQuery CSS หมวดหมู่ jQuery css() ทาง jQuery ขนาด

jQuery ข้ามผ่าน

jQuery ข้ามผ่าน jQuery บรรพบุรุษ jQuery ลูกหลานของเรา jQuery เพื่อนร่วมชาติ jQuery การกรอง

jQuery Ajax

jQuery AJAX แนะนำโดยย่อ jQuery load() ทาง jQuery get()/post() ทาง

jQuery อื่น ๆ

jQuery noConflict() ทาง jQuery JSONP

jQuery ตัวอย่าง

jQuery ตัวอย่าง

jQuery คู่มืออ้างอิง

jQuery ผู้เลือก jQuery วิธีการใช้เหตุการณ์ jQuery วิธีการมีผลบังคับใช้ jQuery HTML / CSS ทาง jQuery วิธีการข้ามผ่าน jQuery AJAX ทาง jQuery วิธีเบ็ดเตล็ด jQuery คุณสมบัติ

jQuery วิดเจ็ต

jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery ตรวจสอบรหัสผ่าน jQuery Prettydate jQuery Tooltip jQuery Treeview

เลือก jQuery

jQuery เลือกช่วยให้คุณสามารถองค์ประกอบกลุ่ม HTML หรือองค์ประกอบหนึ่งในการดำเนินงาน


เลือก jQuery

jQuery เลือกช่วยให้คุณสามารถองค์ประกอบกลุ่ม HTML หรือองค์ประกอบหนึ่งในการดำเนินงาน

เลือก jQuery ในองค์ประกอบ ID, เรียน, ประเภทแอตทริบิวต์ค่าแอตทริบิวต์ที่ใช้และอื่น ๆ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML มันขึ้นอยู่กับที่มีอยู่ใน ตัวเลือก CSS ในนอกจากนี้ก็ยังมีบางส่วนที่กำหนดเองเตอร์

ทั้งหมด jQuery เตอร์เริ่มต้นด้วยเครื่องหมายดอลลาร์: $ ()


selectors

เตอร์ jQuery เลือกองค์ประกอบตามชื่อธาตุ

เลือกทั้งหมด <p> องค์ประกอบในหน้านี้:

$("p")

ตัวอย่าง

ผู้ใช้คลิกปุ่มทั้งหมด <p> องค์ประกอบที่ถูกซ่อนอยู่:

ตัวอย่าง

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

ลอง»


เลือก #ID

jQuery #ID เตอร์เลือกองค์ประกอบที่ระบุโดยแอตทริบิวต์ ID ขององค์ประกอบ HTML

องค์ประกอบ ID ในหน้าควรจะไม่ซ้ำกันดังนั้นคุณจึงต้องการที่จะเลือกเฉพาะองค์ประกอบในหน้านั้นผ่านทางเลือก #ID

ID โดยการเลือกองค์ประกอบของไวยากรณ์ต่อไปนี้:

$("#test")

ตัวอย่าง

เมื่อผู้ใช้คลิกปุ่มองค์ประกอบมีแอตทริบิวต์ id = "ทดสอบ" จะถูกซ่อนอยู่:

ตัวอย่าง

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

ลอง»


เลือก .class

jQuery ระดับตัวเลือกอาจพบว่าองค์ประกอบโดยชั้นที่ระบุ

ไวยากรณ์เป็นดังนี้:

$(".test")

ตัวอย่าง

ผู้ใช้คลิกปุ่มหลังจากองค์ประกอบทั้งหมดที่มี class = "ทดสอบ" เป็นคุณสมบัติที่ซ่อนอยู่:

ตัวอย่าง

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

ลอง»


ตัวอย่างเพิ่มเติม

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

แยกไฟล์โดยใช้ฟังก์ชั่น jQuery

หากเว็บไซต์ของคุณมีหลายหน้าและคุณต้องการฟังก์ชั่น jQuery คุณเป็นเรื่องง่ายที่จะรักษาดังนั้นโปรดใส่ฟังก์ชั่น jQuery ของคุณลงในไฟล์ .js แยกต่างหาก

เมื่อเราแสดงให้เห็นใน jQuery กวดวิชา, ฟังก์ชั่นจะถูกเพิ่มโดยตรงกับส่วน <head> แต่ใส่ไว้ในไฟล์แยกต่างหากจะดีขึ้นเช่นนี้ (แฟ้มที่ถูกอ้างอิงโดยคุณลักษณะ src):

ตัวอย่าง

<head>
<script src="http://cdn.static.w3big.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>