ล่าสุดการพัฒนาเว็บบทเรียน
 

jQueryตัวอย่าง


คุณต้องการที่จะพัฒนาทักษะการเลือก jQuery ของคุณหรือไม่

โปรดลองของเรา jQuery เลือก Tester


jQuery Selectors

$("p").hide()
แสดงให้เห็นถึง jQuery hide() วิธีการซ่อนทั้งหมด <p> องค์ประกอบ

$("#test").hide()
แสดงให้เห็นถึง jQuery hide() วิธีการซ่อนองค์ประกอบที่มี id="test"

$(".test").hide()
แสดงให้เห็นถึง jQuery hide() วิธีการซ่อนองค์ประกอบทั้งหมดที่มี class="test"

$(this).hide()
แสดงให้เห็นถึง jQuery hide() วิธีการซ่อนองค์ประกอบ HTML ปัจจุบัน

ตัวอย่างอธิบาย


เหตุการณ์ jQuery

jQuery click()
แสดงให้เห็นถึง jQuery click() เหตุการณ์

jQuery dblclick()
แสดงให้เห็นถึง jQuery dblclick() เหตุการณ์

jQuery mouseenter()
แสดงให้เห็นถึง jQuery mouseenter() เหตุการณ์

jQuery mouseleave()
แสดงให้เห็นถึง jQuery mouseleave() เหตุการณ์

jQuery mousedown()
แสดงให้เห็นถึง jQuery mousedown() เหตุการณ์

jQuery mouseup()
แสดงให้เห็นถึง jQuery mouseup() เหตุการณ์

jQuery hover()
แสดงให้เห็นถึง jQuery hover() เหตุการณ์

jQuery focus() และ blur()
แสดงให้เห็นถึง jQuery focus() และ blur() เหตุการณ์ที่เกิดขึ้น

ตัวอย่างอธิบาย


ซ่อน jQuery / แสดง

jQuery hide()
แสดงให้เห็นถึง jQuery hide() วิธีการ

jQuery hide() และ show()
แสดงให้เห็นถึง jQuery hide() และ show() วิธีการ

jQuery toggle()
jQuery toggle() สลับระหว่าง hide() และ show()

jQuery hide()
อีกซ่อนสาธิต วิธีการซ่อนชิ้นส่วนของข้อความ

ตัวอย่างอธิบาย


jQuery จาง

jQuery fadeIn()
แสดงให้เห็นถึง jQuery fadeIn() วิธีการ

jQuery fadeOut()
แสดงให้เห็นถึง jQuery fadeOut() วิธีการ

jQuery fadeToggle()
แสดงให้เห็นถึง jQuery fadeToggle() วิธีการ

jQuery fadeTo()
แสดงให้เห็นถึง jQuery fadeTo() วิธีการ

ตัวอย่างอธิบาย


jQuery สไลด์

jQuery slideDown()
แสดงให้เห็นถึง jQuery slideDown() วิธีการ

jQuery slideUp()
แสดงให้เห็นถึง jQuery slideUp() วิธีการ

jQuery slideToggle()
แสดงให้เห็นถึง jQuery slideToggle() วิธีการ

ตัวอย่างอธิบาย


jQuery เคลื่อนไหว

jQuery animate()
แสดงให้เห็นถึงการใช้งานที่เรียบง่ายของ jQuery animate() วิธีการ

jQuery animate() - จัดการ CSS คุณสมบัติหลาย
แสดงให้เห็นว่าคุณสามารถจัดการ CSS คุณสมบัติหลายกับ jQuery animate() วิธีการ

jQuery animate() - ใช้ค่าญาติ
แสดงให้เห็นว่าคุณสามารถใช้ค่าญาติใน jQuery animate() วิธีการ

jQuery animate() - ใช้ค่าที่กำหนดไว้ล่วงหน้า
แสดงให้เห็นว่าคุณสามารถใช้ค่าที่กำหนดไว้ล่วงหน้า "hide", "show", "toggle" ใน jQuery animate() วิธีการ

jQuery animate()
แสดงให้เห็นเพิ่มขึ้นโดยใช้ jQuery animate() วิธีการ (หลาย animate() เรียกหลังจากที่แต่ละอื่น ๆ )

jQuery animate()
แสดงให้เห็นเพิ่มขึ้นโดยใช้ jQuery animate() วิธีการ (หลาย animate() เรียกหลังจากที่แต่ละอื่น ๆ )

ตัวอย่างอธิบาย


jQuery หยุดภาพเคลื่อนไหว

jQuery stop() เลื่อน
แสดงให้เห็นถึง jQuery stop() วิธีการ

jQuery stop() ภาพเคลื่อนไหว (มีพารามิเตอร์)
แสดงให้เห็นถึง jQuery stop() วิธีการ

ตัวอย่างอธิบาย


jQuery HTML รับเนื้อหาและคุณลักษณะ

jQuery text() และ html() - รับเนื้อหา
ได้รับเนื้อหากับ jQuery text() และ html() วิธีการ

jQuery val() - รับเนื้อหา
ได้รับค่าของฟิลด์แบบฟอร์มที่มี jQuery val() วิธีการ

jQuery attr() - รับค่าแอตทริบิวต์
รับค่าของแอตทริบิวต์กับ jQuery attr() วิธีการ

ตัวอย่างอธิบาย


jQuery HTML ชุดเนื้อหาและคุณลักษณะ

jQuery text() , html() และ val() - ตั้งค่าเนื้อหา
เนื้อหาตั้งค่าด้วย jQuery text() , html() และ val() วิธีการ

jQuery text() และ html() - ตั้งค่าเนื้อหาที่มีฟังก์ชั่นการติดต่อกลับ
ชุดเนื้อหา + ใช้ฟังก์ชั่นการโทรกลับภายใน text() และ html()

jQuery attr() - ตั้งค่าค่าแอตทริบิวต์
ตั้งค่าแอตทริบิวต์กับ jQuery attr() วิธีการ

jQuery attr() - ตั้งค่าแอตทริบิวต์หลาย
ตั้งค่าแอตทริบิวต์หลายกับ jQuery attr() วิธีการ

jQuery attr() - ตั้งค่าแอตทริบิวต์เป็นฟังก์ชั่นที่มีการติดต่อกลับ
ตั้งค่าแอตทริบิวต์ + ใช้ฟังก์ชั่นการโทรกลับภายใน attr()

ตัวอย่างอธิบาย


jQuery HTML เพิ่มองค์ประกอบ / เนื้อหา

jQuery append()
แทรกเนื้อหาในตอนท้ายขององค์ประกอบ HTML ที่เลือก

jQuery prepend()
ใส่เนื้อหาที่เป็นจุดเริ่มต้นขององค์ประกอบ HTML ที่เลือก

jQuery append() - ใส่องค์ประกอบใหม่ ๆ
สร้างองค์ประกอบใหม่ที่มี text / html, jQuery, และ JavaScript / DOM แล้วผนวกองค์ประกอบใหม่กับข้อความ

jQuery after() และ before()
แทรกเนื้อหาหลังจากและก่อนองค์ประกอบ HTML ที่เลือก

jQuery after() - ใส่องค์ประกอบใหม่ ๆ
สร้างองค์ประกอบใหม่ที่มี text / html, jQuery, และ JavaScript / DOM แล้วใส่องค์ประกอบใหม่หลังจากองค์ประกอบที่เลือก

ตัวอย่างอธิบาย


jQuery HTML ลบองค์ประกอบ / เนื้อหา

jQuery remove()
ลบที่เลือก element(s)

jQuery empty()
นำองค์ประกอบของเด็กทั้งหมดที่เลือก element(s)

jQuery remove() - มีพารามิเตอร์
กรององค์ประกอบที่จะถูกลบออก

ตัวอย่างอธิบาย


jQuery รับและกำหนดคลาส CSS

jQuery addClass()
เพิ่มแอตทริบิวต์ชั้นเรียนเพื่อองค์ประกอบที่แตกต่าง

jQuery addClass() - หลายชั้นเรียน
ระบุหลายชั้นเรียนภายใน addClass() วิธีการ

jQuery removeClass()
นำคุณลักษณะเฉพาะชั้นจากองค์ประกอบที่แตกต่าง

jQuery toggleClass()
สลับไปมาระหว่างเพิ่ม / ลบชั้นเรียนจากองค์ประกอบที่เลือก

ตัวอย่างอธิบาย


jQuery css() วิธี

jQuery css() - ทรัพย์สิน CSS ผลตอบแทน
กลับค่าของคุณสมบัติ CSS ที่ระบุจากองค์ประกอบคู่แรกก่อน

jQuery css() - ตั้งค่าคุณสมบัติ CSS
ตั้งค่าคุณสมบัติ CSS ที่ระบุสำหรับองค์ประกอบที่ตรงทั้งหมด

jQuery css() - ตั้งค่าคุณสมบัติ CSS
การตั้งค่าคุณสมบัติ CSS หลายองค์ประกอบที่ตรงทั้งหมด

ตัวอย่างอธิบาย


jQuery ขนาด

jQuery - การกลับมา width() และ height()
กลับมีความกว้างและความสูงขององค์ประกอบที่ระบุ

jQuery - กลับ innerWidth() และ innerHeight()
กลับด้านความกว้าง / ความสูงขององค์ประกอบที่ระบุ

jQuery - กลับ outerWidth() และ outerHeight()
กลับไปด้านนอกที่มีความกว้าง / ความสูงขององค์ประกอบที่ระบุ

jQuery - กลับ outerWidth (จริง) และ outerHeight (จริง)
กลับไปด้านนอกที่มีความกว้าง / ความสูง (รวมถึงอัตรากำไรขั้นต้น) ขององค์ประกอบที่ระบุ

jQuery - การกลับมา width() และ height() ของเอกสารและหน้าต่าง
กลับมีความกว้างและความสูงของเอกสาร (เอกสาร HTML) และหน้าต่าง (วิวพอร์ตเบราว์เซอร์)

jQuery - ชุด width() และ height()
ตั้งค่าความกว้างและความสูงขององค์ประกอบที่ระบุ

ตัวอย่างอธิบาย


jQuery traversing บรรพบุรุษ

jQuery parent()
แสดงให้เห็นถึง jQuery parent() วิธีการ

jQuery parents()
แสดงให้เห็นถึง jQuery parents() วิธีการ

jQuery parentsUntil()
แสดงให้เห็นถึง jQuery parentsUntil() วิธีการ

ตัวอย่างอธิบาย


ลูกหลาน jQuery traversing

jQuery children()
แสดงให้เห็นถึง jQuery children() วิธีการ

jQuery find()
แสดงให้เห็นถึง jQuery find() วิธีการ

ตัวอย่างอธิบาย


jQuery traversing พี่น้อง

jQuery siblings()
แสดงให้เห็นถึง jQuery siblings() วิธีการ

jQuery next()
แสดงให้เห็นถึง jQuery next() วิธีการ

jQuery nextAll()
แสดงให้เห็นถึง jQuery nextAll() วิธีการ

jQuery nextUntil()
แสดงให้เห็นถึง jQuery nextUntil() วิธีการ

ตัวอย่างอธิบาย


jQuery traversing กรอง

jQuery first()
แสดงให้เห็นถึง jQuery first() วิธีการ

jQuery last()
แสดงให้เห็นถึง jQuery last() วิธีการ

jQuery eq()
แสดงให้เห็นถึง jQuery eq() วิธีการ

jQuery filter()
แสดงให้เห็นถึง jQuery filter() วิธีการ

jQuery not()
แสดงให้เห็นถึง jQuery not() วิธีการ

ตัวอย่างอธิบาย


jQuery AJAX load() วิธี

jQuery load()
โหลดเนื้อหาของไฟล์ที่เป็น <div> องค์ประกอบ

jQuery load()
โหลดเนื้อหาขององค์ประกอบเฉพาะภายในแฟ้มเป็น <div> องค์ประกอบ

jQuery load() - มีการเรียกกลับ
การใช้งานของ jQuery load() วิธีการที่มีฟังก์ชั่นการติดต่อกลับ

ตัวอย่างอธิบาย


jQuery AJAX get() และ post() วิธีการ

jQuery get()
ใช้ $.get() วิธีการที่จะดึงข้อมูลจากไฟล์บนเซิร์ฟเวอร์

jQuery post()
ใช้ $.post() วิธีการในการส่งข้อมูลบางอย่างไปพร้อมกับการร้องขอ

ตัวอย่างอธิบาย