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>
- $(".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>
- $("*") เลือก 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>
- $("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>
- $("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>