jQuery : การเรียกใช้ jQuery

หลังจากที่เรา Download file jquery มาแล้ว
จะได้ ไฟล์ ดูรูปนะครับ
ในที่นี้เป็น Version 1.8.1 นะครับ

ให้เราสร้าง ไฟล์ขึ้นมา 1 ไฟล์นะครับ ในที่นี้จะสร้าง ไฟล์ เป็น file1.html นะครับ


<!--file1.html-->
<meta charset='utf-8'>

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>

<script type='text/javascript'>
$(function(){
alert('test');
});
</script>

หลังจากนั้นเราลองเรียกไฟล์ที่เราเขียนขึ้นนะครับ มันจะแสดง alert box ว่า test
แสดงว่าใช้งาน jQuery ได้แล้วครับ

อธิบายนะครับ
<meta charset='utf-8'>
 -การ encode page นั้นๆ เป็น utf-8

<script type='text/javascript' src='jquery-1.8.1.min.js'></script>
 -การเรียกใช้ jquery ไฟล์


 -$(function(){});  หมายถึงเมื่อ page โหลดจะโหลดคำสั่งที่อยู่ภายใต้ {} โดยเราสามารถเขียน คำสั่งแบบ jquery หรือ javascript ได้เลย


ถ้าไม่เข้าใจตรงไหนสอบถามได้นะครับ

BY N1B

JQuery : เริ่มต้นกับ JQuery

JQuery : เริ่มต้นกับ JQuery

Website สำหรับ Download ตัว Framework

http://www.jquery.com/



ให้เรา Download มานะครับโดยกดที่ Download (jQuery);

จะได้เป็น .js มานะครับผม


บทต่อไปเราจะมารู้จักวิธีการใช้งานนะครับผม

BY N1B

JQuery : Multiple jQuery Get Scripts

/* enhance $.getSctipt to handle mutiple scripts */
var getScript = jQuery.getScript;
jQuery.getScript = function( resources, callback ) {

    var // reference declaration & localization
    length = resources.length,
    handler = function() { counter++; },
    deferreds = [],
    counter = 0,
    idx = 0;

    for ( ; idx < length; idx++ ) {
        deferreds.push(
            getScript( resources[ idx ], handler )
        );
    }

    jQuery.when.apply( null, deferreds ).then(function() {
        callback && callback();
    });
};

$.getScript(['script1.js','script2.js','script3.js'], function() {
    //do something after all scripts have loaded
});

//or seperate into an array to include

var scripts = ['script1.js','script2.js','script3.js'];
$.getScript(scripts, function(data, textStatus) {
    //do something after all scripts have loaded
});

JQuery : ค่า Index ของ Checkbox

JQuery : ค่า Index ของ Checkbox


<input type="checkbox" name="checkbox[]">A
<input type="checkbox" name="checkbox[]">B
<input type="checkbox" name="checkbox[]">C
<input type="checkbox" name="checkbox[]">D
<input type="checkbox" name="checkbox[]">E
<input type="checkbox" name="checkbox[]">F
<input type="checkbox" name="checkbox[]">G



A B C D E F G

เราจะได้ ตามรูปเลย คราวนี้เราจะรู้ได้ยังไง ว่า checkbox ตัวไหนเป็น index อะไร
ตามตัวอย่างเลยนะครับ

<script type='text/javascript'>
   $(function(){
      $('input[name="checkbox[]"]').click(function(){
          var checkBoxIndex=$('input[name="checkbox[]"]').index($(this));
          alert(checkBoxIndex);
     });
   });
</script>

ยังไงก็ลองเอาไปประยุกต์ ใช้กับอย่างอื่นนะครับ


BY N1B

JQuery : get ค่า index ของ Tag option ใน Tag Select

JQuery : get ค่า index ของ Tag option ใน Tag Select


Ex
 <SELECT id="select">
   <OPTION value="">กรุณาเลือก</OPTION>
   <OPTION value="php">PHP</OPTION>
   <OPTION value="ajax">Ajax</OPTION>
   <OPTION value="java">Java</OPTION>
   <OPTION value="javascript">Javascript</OPTION>
   <OPTION value="jquery">JQuery</OPTION>
   <OPTION value="android">Android</OPTION>
 </SELECT>

<script type='text/javascript'>
$(function(
   $('#select').change(function(){
      //ใช้คำสั่ง selectedIndex ก็จะได้ หมายเลข Index ของแต่ ละ Option มานะครับ เริ่มจาก 0
      alert($(this).prop('selectedIndex'));
   });
));
</script>

ยังไงก็ลองเอาไปประยุกต์ใช้นะครับ



BY N1B

JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

 JQuery : วิธีการตรวจสอบว่าเราใช้ Browser อะไรอยู่

   ตามตัวอย่างเลยนะครับ



$(function(){
//Firefox
if($.browser.mozilla){alert('Firefox');}
//Safari
else if($.browser.safari){alert('Safari');}
//Opera
else if($.browser.opera){alert('Opera');}
//IE
else if($.browser.msie){alert('IE');}

//Check
alert($.browser.version);
});


ลองเอาไปประยุกต์ใช้กันดูนะครับ


BY N1B

JQuery : การใส่ค่า Index ของ Object นั้นๆ

JQuery : การใส่ค่า Index ของ Object นั้นๆ ด้วย :eq


   ใน JQuery นั้นเวลาเราเลือก Elements เป็นแบบ Class หรือ Name[] (ที่เป็น Array) เราจะได้ค่ามาเป็น Array เพราะฉะนั้นถ้าเราต้องการกำระบุว่าเป็น Array ตัวไหนให้ทำดังนี้นะครับ


เช่น ถ้าเรามี Elements ดังนี้

//เรามี DIV ทั้งหมด 6 อัน ตามด้านล่างนี้ นะครับ
<div class="divBox">A1</div>
<div class="divBox">A2</div>
<div class="divBox">A3</div>
<div class="divBox">A4</div>
<div class="divBox">A5</div>
<div class="divBox">A6</div>

//เรากำหนดให้ .divBox เป็นดังนี้
/*
 background-color เป็น รหัสสี #0099FF
 ความสูง เป็น 25px
 ความกว้าง เป็น 100px
*/
$('.divBox').css({
 'background-color':'#0099FF'
 ,'height':'25px'
 ,'width':'100px'
});

แล้วคราวนี้ถ้าเราต้องการให้ A2,A3,A4,A5,A6 ความกว้างเป็น 90px,80px,70px,60px,50px ตามลำดับเราจะทำยังไง สำหรับคนที่ยังไม่รู้ ก็ลองดูตามนี้เลยครับผม
$('.divBox:eq(1)').css({'width':'90px'}); //DIV อันนี้จะเป็นของ A2
$('.divBox:eq(2)').css({'width':'80px'}); //DIV อันนี้จะเป็นของ A3
$('.divBox:eq(3)').css({'width':'70px'}); //DIV อันนี้จะเป็นของ A4
$('.divBox:eq(4)').css({'width':'60px'}); //DIV อันนี้จะเป็นของ A5
$('.divBox:eq(5)').css({'width':'50px'}); //DIV อันนี้จะเป็นของ A6


ลองเอาไปประยุกต์กับทางอื่นดูนะครับ
มีข้อสงสัยโพสถามได้เลยนะครับ


BY N1B