web programming bookmark: jquery api

แสดงบทความที่มีป้ายกำกับ jquery api แสดงบทความทั้งหมด

วันพฤหัสบดีที่ 17 กุมภาพันธ์ พ.ศ. 2554

jquery Stop Propagation

ลำดับการเกิด event จาก element หนึ่งๆ จะเริ่มต้นจาก elment ด้านใน หรือด้านนอก ในแต่ละ browser จะต่างกัน
แต่ jquery จะกำหนดให้ลำดับการเกิดแบบ Event bubbling นั่นคือเริ่มจากด้านในก่อน
(โดยทั่วไปนะแต่อาจมีเทคนิคพิเศษที่ทำให้ลำดับการเกิด event เปลี่ยน)
http://www.quirksmode.org/js/events_order.html
http://api.jquery.com/bind/


<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(function(){
        $('#xxx').click(function(event){
   alert('div event');
  });
  $('#xxx button').click(function(event){
   alert('button event');
   if (confirm('stop next event?'))
    return false;
  });
    });
    //]]>
</script>
</head>
<body>

<div id="xxx">
 ###<button>button in div</button>###
</div>

</body>
</html>

selector จะใช้สำหรับการเลือก element ครับ
แต่ถ้าจะจัดการกับ event ที่มี element ที่คาบเกี่ยวกัน (ซ้อนทับกัน)
แค่ selector ยังไม่พอครับ เพราะ event handler
ของตัวที่คลุมอยู่ก็กระทบกับตัวที่อยู่ข้างในมันด้วย จึงต้องใช้คำสั่ง stop propagation ควบคุมอีกทีหนึ่ง

การใช้คำสั่ง return false; ข้างบนี้จะเทียบได้กับ preventDefault(); และ stopPropagation(); พร้อมๆ กันครับ

stopPropagation()
preventDefault()

วันจันทร์ที่ 24 มกราคม พ.ศ. 2554

jquery prepend and prependTo


<!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=tis-620" />
<title>prepend and prependTo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
 $('#button1').click(function(){
   //method 1, append
   var new_data = '<div>'+$('#data').val()+'</div>';
   var container_el = $('#container').prepend(new_data);
   alert(container_el.attr('id'));
 });
 $('#button2').click(function(){
   //method 2, appendTo
   var new_data = '<div class="t">'+$('#data').val()+'</div>';
   var new_data_el = $(new_data).prependTo('#container');
   alert(new_data_el.attr('class'));
 });
});
//]]>
</script>
</head>
  
<body>

    <div id="container">
        <div id="a">#</div>
        <div id="b">#</div>
        <div id="c">#</div>
        <div id="d">#</div>
        <div id="e">#</div>
    </div>
    
    <input type="text" id="data" value="test"/>
    <button id="button1">button1 prepend</button>
    <button id="button2">button2 prependTo</button>
  
</body>
</html>

jquery append and appendTo


<!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=tis-620" />
<title>append and appendTo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
 $('#button1').click(function(){
   //method 1, append
   var new_data = '<div>'+$('#data').val()+'</div>';
   var container_el = $('#container').append(new_data);
   alert(container_el.attr('id'));
 });
 $('#button2').click(function(){
   //method 2, appendTo
   var new_data = '<div class="t">'+$('#data').val()+'</div>';
   var new_data_el = $(new_data).appendTo('#container');
   alert(new_data_el.attr('class'));
 });
});
//]]>
</script>
</head>
  
<body>

    <div id="container">
        <div id="a">#</div>
        <div id="b">#</div>
        <div id="c">#</div>
        <div id="d">#</div>
        <div id="e">#</div>
    </div>
    
    
    <input type="text" id="data" value="test"/>
    <button id="button1">button1 append</button>
    <button id="button2">button2 appendTo</button>
  
</body>
</html>

วันพุธที่ 29 ธันวาคม พ.ศ. 2553

jquery selector

tag_name เช่น a หมายถึง <a></a> ทั้งหมดใน html document

id_name เช่น #link1 ตรงกับ <tag id="link1"></tag>

class_name เช่น .class_name ตรงกับ <tag class="class_name"></tag>

[attribute_name] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" ตัวอย่างเช่น [name] คือทุกแทกที่มี attribute href เช่น <a href="test"></a>

[attribute_name="test"] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" มีค่าเท่ากับ test ตัวอย่างเช่น [href] คือทุกแทกที่มี attribute href="test" เช่น <a href="test"></a>

[attribute_name^="test"] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" มีค่าเริ่มต้นเท่ากับ test ตัวอย่างเช่น [href] คือทุกแทกที่มี attribute href เริ่มต้นด้วยคำว่า test เช่น <a href="test_12345"></a>

parent descendant ตัวอย่างเช่น #x1 a
คือ tag a ทั้งหมดที่อยู่ใน tag ที่มี id="x1" เช่น <div id="x1"><b>test</b><a>ss</a><a>ss2</a><span><a>ss3</a></span></div> จะหมายถึง <a>ss</a><a>ss2</a> และ <a>ss3</a>

parent > children ตัวอย่างเช่น #x1 > a
คือ tag a ทั้งหมดที่อยู่ใน tag ที่มี id="x1" เช่น <div id="x1"><b>test</b><a>ss</a><a>ss2</a><span><a>ss3</a></span></div> จะหมายถึง <a>ss</a><a>ss2</a>

เราสามารถรวมเอาหลายๆ selector มารวมกันเพื่อ tag ที่เฉพาะเจาะจงมากขึ้นเช่น
.example[href^="http://"][target="_blank"] span
เป็นการเลือกทุก tag span ทั้งหมด
ที่อยู่ภายใน tag ซึ่งมี class เท่ากับ example และ tag นั้นยังมีมี attribute href เริ่มต้นด้วย http:// และ attribute target เท่ากับ blank

ไว้จะมาเขียนเพิ่มอีกครับ ..

jquery selector

วันพฤหัสบดีที่ 4 พฤศจิกายน พ.ศ. 2553

jquery api after

code


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
  $('.cb01 :checkbox').each(function(){
     $(this).after( $(this).attr('id') );
  });
});
/*]]>*/
</script>

<div class="cb01">
  <input type="checkbox" name="c1" id="c1" value="v1"/>
  <input type="checkbox" name="c2" id="c2" value="v2"/>
  <input type="checkbox" name="c3" id="c3" value="v3"/>
</div>

หน้าเว็บ