บทเรียน [phpBB] บทที่ 3.1 jQuery Selectors

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

บทเรียน [phpBB] บทที่ 3.1 jQuery Selectors

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

บทที่ 3.1 jQuery Selectors
1. Selectors คือส่วนที่อ้างอิงไปที่ออบเจ็กต่างๆ ที่อยู่หน้าเพจที่เป็น Element, css
2. รูปแบบการเรียกใช้ Selectors จะเป็น $(Selectors)
3. การเรียก Selectors พื้นฐานต่างๆ ดังนี้
  • $('#id') จะเลือก object ที่ใช้ id="" เช่น

โค้ด: เลือกทั้งหมด

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
    $("#test").fadeOut(4000);
});
</script>
</head>
<body>
<h2 id="test">welcome to www.mindphp.com</h2>
</body>
</html>
ผลที่ได้ : selector ตรง id="test" เมื่อใช้คำสั่งว่า $("#test").fadeOut(4000); จะทำให้เอฟเฟคค่อยๆ จางหายไป 4 วินาทีในข้อความ
  • $(".class") จะเลือก object ที่ใช้ class="" เช่น

โค้ด: เลือกทั้งหมด

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
    $(".test2").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test2">welcome to www.mindphp.com</h2>
</body>
</html>
ผลที่ได้ : selector ตรง class="test2" เมื่อใช้คำสั่งว่า $(".test2").fadeOut(4000); จะทำให้เอฟเฟคค่อยๆ จางหายไป 4 วินาทีในข้อความ
  • $("*") เลือก Object ทั้งหมดที่อยู่ในหน้าเพจนั้น (all selector) เช่น

โค้ด: เลือกทั้งหมด

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
    $("*").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test1">welcome to www.mindphp.com</h2>
<div class="test2">welcome to www.mindphp.com</h2>
</body>
</html>
ผลที่ได้ : เลือก Object ทั้งหมดเมื่อใช้คำสั่งว่า $("*").fadeOut(4000); จะทำให้เอฟเฟคค่อยๆ จางหายไป 4 วินาทีในข้อความ
  • $("a"), $("p")$, ("div") จะทำงานตามที่ระบุโดยชื่อ html tag เช่น

โค้ด: เลือกทั้งหมด

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
    $("div").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test1">welcome to www.mindphp.com</h2>
<div class="test2">welcome to www.mindphp.com</h2>
</body>
</html>
ผลที่ได้ : เลือกทำเอฟเฟคจางหายเฉพาะที่อยู่ใน tag div
  • $("selector1, selector2,.... selectorN") หากเป็นการระบุมากกว่า 1 object (multi selector) ให้มี comma คั้น

โค้ด: เลือกทั้งหมด

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
    $("div,p").fadeOut(4000);
});
</script>
</head>
<body>
<h2 class="test1">welcome to www.mindphp.com</h2>
<p>welcome to www.mindphp.com</p>
<div class="test2">welcome to www.mindphp.com</div>
</body>
</html>
ผลที่ได้ : จะเลือกทำเอฟเฟคใน tag ที่เป็น div กับ p
Screenshot from 2021-01-16 19-05-43.png
แนบไฟล์
Screenshot from 2021-01-16 18-46-37.png
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 65