sondmk header
พื้นฐานการใช้งาน jQuery เบื้องต้น

jQuery : .blur function

Post by Goborijung at 2020-08-08 11:16:03 | ID: 700

.blur(function() ใช้สำหรับตรวจจับ Event เมื่อออกจาก Focus แล้วไปคลิกที่ไหนก็ได้ 1 ที ก็จะเป็นการ blur นั่นเอง
ref : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_blur_alert

EX : 
<script>
$(document).ready(function(){
  $("input").blur(function(){
    alert("This input field has lost its focus.");
  });
});
</script>
jQuery : .Closest จะคล้ายกับ parents แต่ closest จะ เรื่มค้นหาที่ตัวมันเอง

Post by Goborijung at 2020-08-10 09:29:23 | ID: 702

closest จะคล้ายกับคำสั่ง parents เป็นอย่างมาก ทำงานใน ลักษณะเดียวกัน แต่จะมีข้อแตกต่างระหว่าง closest กับ parent อยู่ 3 ข้อ คือ

1. parents จะเริ่มค้นหา selector element ตัวแรกที่ parent ของ selector ก่อนหน้า แต่ closest จะ เรื่มค้นหาที่ตัวมันเอง
2. parents จะค้นหาจนถึง root element และจะ select match element ทุกตัว แต่ closest จะ select ตัวที่ match element ที่ใกล้ที่สุดตัวเดียว
3. parents() มีโอกาศ return 0,1 หรือ multiple jQuery object แต่ closest จะ return 0 หรือ 1 jQuery object เท่านั้น
4. (แถมให้) ถ้าไม่ใส่ paramter parents() จะ selector ทุกๆ parent element แต่ closest จะไม่ select element ใดๆเลย
jQuery : .each function

Post by Goborijung at 2020-08-08 11:10:53 | ID: 699

.each ใช้สำหรับจัดการ Loop กับ Element ที่อ้างถึง | 

Syntax : 
.each( function(index, Element) )

Ex : 
$(".delete-row").click(function(){ // เมื่อกดปุ่ม Delete Row
          $("table tbody").find('input[name="record"]').each(function(){ // ให้ Selector ไปที่ element > table > tbody ค้นหา tag input > name = record | .each ใช้สำหรับจัดการ Loop กับ Element ที่อ้างถึง | .each( function(index, Element) )
            if($(this).is(":checked")){
              $(this).parents("tr").remove();
            }
          });
        });
jQuery : Show Hide

Post by Goborijung at 2020-09-29 15:06:50 | ID: 834

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide("slow");
  });
  
  $("#show").click(function(){
    $("p").show("slow");
  });
});
</script>

</body>
</html>
JQuery : วีดีโอ สอน jQuery

Post by Goborijung at 2018-12-24 16:27:27 | ID: 62


Credit: Chandrajeet Maurya 
Youtube: https://goo.gl/XLm1JV
jQuery : Disable Key Enter

Post by Goborijung at 2020-08-17 16:30:26 | ID: 727

<script>
$('#QtyA').on('keypress',function(e) {
	if(e.which == 13) {
		e.preventDefault(); // หยุดการเกิดเหตุการณ์เมื่อกดปุ่ม Enter
	}
});
</script>
jQuery : Disabled Option

Post by Goborijung at 2020-08-13 09:56:02 | ID: 716

>> Ex.


<script>
/*By ID*/
$("#btnID").prop('disabled',true);

/*By Name*/
$("button[name='btnPost']").prop('disabled',true);
</script>
jQuery : get val

Post by Goborijung at 2022-06-20 11:35:22 | ID: 1601

---- HTML ----

<input type="text" name='txt1' value=''>
<button name='btnClick' type='submit'>Click</button>

---- JS ----

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(function(){
  $("button[name='btnClick']").click(function(){
    var val = $("input[name='txt1']").val();
    alert(val);
  });
});
</script>
jQuery : jQuery CDN

Post by Goborijung at 2022-06-20 10:39:20 | ID: 1597

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
jQuery : KeyDown , onKeyDown

Post by Goborijung at 2022-07-07 17:21:48 | ID: 1685

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$( "#target" ).keydown(function() {
  alert( "Handler for .keydown() called." );
});
</script>
123456>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com