การทำเว็บเดี๋ยวนี้เราไม่ค่อยใช้ตารางในการจัดวางโครงสร้างกันแล้ว เรานิยมใช้ CSS มาช่วยจัดการการแสดงผล เรียกได้ว่า CSS เข้ามามีบทบาทมากกว่าเมื่อก่อน jQuery นั้นมีคำสั่งจัดการ CSS อยู่ 3 คำสั่ง คือ
- addClass(names)
- removeClass(names)
- toggleClass(name)
ผมจะอธิบายไล่ไปทีละคำสั่งเลยนะครับ
addClass(names)
ใช้สำหรับเพิ่มชื่อคลาสเข้าไปใน element ใดๆ โดยจะไม่ไปทับคลาสเดิม html นั้นในอีลิเม้นท์ตัวหนึ่งๆ สามารถมีคลาสได้หลายคลาสอยู่แล้ว
names :(string) ชื่อคลาสที่เราต้องการเพิ่ม ในกรณีต้องการเพิ่มทีเดียวหลายคลาส ให้คั่นคลาสแต่ละตัวด้วยช่องว่าง
ตัวอย่างการใช้งาน addClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery-addClass-command</title>
<style type="text/css">
<!--
.border {
border: 2px dashed #FF0000;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
$('#username').addClass( 'border' );
});
})
</script>
</head>
<body>
<input type="text" name="username" id="username" />
<input name="add" type="button" id="add" value="addClass" />
</body>
</html> |
ท่านจะเห็นว่าเรามีคลาสชื่อ border (.border) โดยกำหนดให้เส้นของเป็นเส้นประและมีสีแดง อยู่ พอคลิกปุ่ม ก็ให้นำคลาสตัวนี้ไปใช้ กับเท็กบ้อก ที่มี id=username ($(‘#username’).addClass( ‘border’ ))
removeClass(names)
ใช้สำหรับลบชื่อคลาสออกจาก element ใดๆ
names :(string) ชื่อคลาสที่เราต้องการเอาออก ในกรณีต้องการเอาออกทีเดียวหลายคลาส ให้คั่นคลาสแต่ละตัวด้วยช่องว่าง
ตัวอย่างการใช้งาน removeClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery-removeClass-command</title>
<style type="text/css">
<!--
.border {
border: 2px dashed #FF0000;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#remove').click(function(){
$('#username').removeClass( 'border' );
});
})
</script>
</head>
<body>
<input name="username" type="text" id="username" class="border" />
<input name="remove" type="button" id="remove" value="removeClass" />
</body>
</html> |
ตอนแรกเท็กบ้อกของเราจะมีขอบเป็นเส้นประสีแดง พอเรากดปุ่ม เส้นประสีแดงก็จะหายไป กลายเป็นเท็กบ้อกปกติ
toggleClass(name)
ใช้สำหรับสลับคลาสไปมา คำสั่งนี้มันจะเป็นเหมือนเอาสองคำสั่งด้านบน มารวมเข้าด้วยกัน การทำงานของ มันจะตรวจสอบดูก่อนว่า คลาสที่เราส่งเป็นพารามิเตอร์เข้าไป มีอยู่หรือยัง ถ้ามีแล้วมันจะเอาออก ถ้ายังไม่มี มันก็จะเพิ่มเข้าไป คำสั่งนี้ไม่สามารถสลับได้ครั้งละหลายๆคลาส สลับได้แค่ครั้งละคลาส เท่านั้น
names :(string) ชื่อคลาส
ตัวอย่างการใช้งาน toggleClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery-toggleClass-command</title>
<style type="text/css">
<!--
.border {
border: 2px dashed #FF0000;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#toggle').click(function(){
$('#username').toggleClass( 'border' );
});
})
</script>
</head>
<body>
<input name="username" type="text" class="border" id="username" />
<input name="toggle" type="button" id="toggle" value="toggleClass" />
</body>
</html> |
ขอความสวัสดีมีชัย จงเกิดแก่ท่าน
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
Leave a Reply