กล่างถึง บัก อำนาจ หลายคนคงจะงงว่าเ ป็นใคร มันเป็นเพื่อนผมเองครับตอนนี้ทำงานที่ sanook.com (ใครเค้าอยากจะรู้ล่ะเนี่ย)
แรกๆ ก็ไม่ได้สนใจอะไรมากมายครับแต่วันนี้ว่างจัดเลยลองดูขำๆ เผื่อมีคนถามจะได้รู้ว่ามันคืออะไร ตอนแรกกะว่าจะเปิดอ่านๆ ดูเล่นๆ ว่าตกลงมันคือะไรกันแน่ ใครสนใจดูต่อได้ที่นี่เลยนะครับ jquery.com
อ่านไปซักพัก พอรู้ว่าเป็น javascript framework ตัวนึงก็ไม่ได้สนใจอะไรมากเ พราะคิดว่าคงเ ป็นเ รื่องยุ่งยากใ นการแ กะดูพอสมควรแ ต่ พอกดไปหน้า download เจะ ไฟล์ .js ไฟล์เดียวครับเลยเริ่มสนใจขึ้นมาทันที
อะไ รกันเนี่ย javascript แค่ไฟล์เดียวเองเนี่ยนะ .... รำพันกับตัวเองพักนึ่งก็ download ลงมาอย่างรวดเร็ว พร้อมกับลองทำตาม Tutorial อย่างรวดเร็ว และง่ายดาย
สิ่งที่เกิดขึ้นแทบไม่น่าเชื่อ เพราะแค่ผมลองทำตามแบบ พื้นๆ ง่ายๆ น้ำจิ้มๆ ก็ทำให้ผมอึ้งและเริ่มมองเห็นประโยชน์ของมันขึ้นมาทันที เดี๋ยว ยกตัวอย่างให้ดู ซักหน่อยครับ
THE BASICS
This is a basic tutorial, designed to help you get started using jQuery. If you don''t have a test page setup yet, start by creating a new HTML page with the following contents:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Edit the
src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:<script type="text/javascript" src="jquery.js"></script>
You can download your own copy of jQuery from the Downloading jQuery page.
Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn''t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is due to the fact that the HTML ''document'' isn''t finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the
document and waits until it''s ready to be manipulated, known as the ready event: $(document).ready(function(){
// Your code here
});The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. Add the next section of code:
$("a").click(function(event){
alert("Thanks for visiting!");
});Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser''s alert pop-up, before leaving to go to the main jQuery page.
For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});Adding a CSS Class
Another common task is adding (or removing) a CSS (Cascading Style Sheet)
class.First, if you were to add some style information into the header of your script, like this:
<style type="text/css">
a.test { font-weight: bold; }
</style>
and then added the addClass call -
$("a").addClass("test");all your
a elements would now be bold. To remove the class, you''d use removeClass $("a").removeClass("test");- (CSS allows multiple classes to be added to an element.)
อันนี้ Copy มาทั้งดุ้นเลยนะครับ เล่าให้ฟังนิดนึง แค่ผมลองทำไปตาม Tutorial เรื่อย ๆ แค่ไล่ลงมาุถึง ส่วนของ CSS เท่านั้นผมก็เริ่มเห็นว่ามันสุดยอดแล้วล่ะครับ แค่นี้ก็จะเห็นว่า จะช่วยใ้ห้ทำงานได้ง่ายขึ้นไปอีกเยอะ
แ ละคิดว่านี่มันแค่น้ำจิ้มๆ และคงจะมีอะไรที่ น่าทึ่งรออยู่ ผมคงติดตามต่อไปจนจบครับ เดี๋ยวจะมาเล่าให้ฟังเรื่อยๆ เพื่อนๆคนใหนลองแล้วจะมา Update กันให้รู้ด้วยก็ดีนะครับ
No comments:
Post a Comment