jQUERY

jQuery คือ JavaScript Platform หรือ JavaScript Library Library ที่ถูกเขียนขึ้นจาก JavaScript เพื่อลดขั้นตอนสนองการพัฒนา เว็บไซต์ในรูปแบบใหม่ การโต้ตอบกับ ผู้ใช้งานได้อย่างมีประสิทธิภาพ

ทำไม jQuery จึงทำงานได้ดี ใช้หลักการของ CSS ซึ่งสามารถสืบทอด จากการใช้ Selector และ Class สนับสนุนการต่อเติมความสามารถให้กับ Library สามารถรองรับทุก Browser เนื่องจากได้ เพิ่ม abstraction layer ที่เป็นมาตรฐานใน ทุก Browser สามารถทำงานได้กับทุก Element ทั้งที่ ซ่อน หรือที่เป็น class Collapsible มีการเชื่อม Method ให้ทำงาน แบบต่อเนื่องกันเหมือนลูกโซ่ Chaining

ความรู้พื้นฐาน jQuery HTML JavaScript CSS

การเพิ่ม jQuery Library Download Library จาก jquery.com เพิ่ม Script ไว้ตรง Tag

การเพิ่ม jQuery Library กรณี ไม่ต้องการ Download Library  จาก Google  จาก Microsoft CDN

Ex1 Fun with jQuery Hello, jQuery! Say Ouch $("#btnOuch").click(function(){ alert("Ouch! That hurt."); });

jQuery Selectors SyntaxDescription $(this)Current HTML element $("p")All elements $("p.intro")All elements with class="intro" $(".intro")All elements with class="intro" $("#intro")The first element with id="intro" $("ul li:first")The first element of each $("[href$='.jpg']")All elements with an href attribute that ends with ".jpg" $("div#intro.head") All elements with class="head" inside a element with id="intro" For a full reference please see jQuery Selectors ReferencejQuery Selectors ReferenceFor a full reference please see jQuery Selectors ReferencejQuery Selectors Reference

Ex2 $("h2").click(function(){ $(this).hide("slow"); });

Ex3 $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); Hide Blue

jQuery Events Event MethodDescription $(selector).click(function) Invokes a function when the selected elements are clicked $(selector).dblclick(function) Invokes a function when the selected elements are double-clicked $(selector).focus(function) Invokes a function when the selected elements receive the focus $(selector).mouseover(function) Invokes a function when the mouse is over the selected elements $(selector).keypress(function) Invokes a function when a key is pressed inside the selected elements For a full jQuery event reference, please see jQuery Events ReferencejQuery Events Reference

Ex4 $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); Lemon drops biscuit chocolate…

Manipulating CSS CSS PropertiesDescription $(selector).css(propertyName) Get the style property value of the first selected element $(selector).css(propertyName,value) Set the value of one style property for selected elements $(selector).css({properties}) Set multiple style properties for selected elements $(selector).addClass(class)Apply style class to the selected elements For a full jQuery CSS reference, please see jQuery CSS Methods ReferencejQuery CSS Methods Reference For more on the css function, see

Ex5 $("#btnColor").click(function(){ $("#lemon").addClass("blue"); });.red{ color:red; }.blue{ color:blue; }

Ex6 What color is the paragraph? $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); });

Ex7 $("p").dblclick(function(){ $(this).css("background-color", "yellow"); });

jQuery Effects FunctionDescription $(selector).hide()Hide selected elements $(selector).show()Show selected elements $(selector).toggle()Toggle (between hide and show) selected elements $(selector).slideDown()Slide-down (show) selected elements $(selector).slideUp()Slide-up (hide) selected elements $(selector).slideToggle()Toggle slide-up and slide-down of selected elements $(selector).fadeIn()Fade in selected elements $(selector).fadeOut()Fade out selected elements $(selector).fadeTo()Fade out selected elements to a given opacity $(selector).fadeToggle()Toggle between fade in and fade out

Ex8 $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); });

Ex9 $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); });

Manipulating HTML FunctionDescription $(selector).html(content) Changes the (inner) HTML of selected elements $(selector).append(content) Appends content to the (inner) HTML of selected elements $(selector).after(content)Adds HTML after selected elements For a full jQuery HTML reference, please see jQuery HTML Methods ReferencejQuery HTML Methods Reference

Ex10 $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); });

Ajax The jQuery $.post() method loads data from the server using an HTTP POST request. Syntax $.post(URL, {data}, function(data){…}); $.post("myScript.php", {name:txt}, function(result) { $("span").html(result); }); ajax.php ParameterDescription URLRequired. Specifies the url to send the request to. dataOptional. Specifies data to send to the server along with the request. function(data) Optional. Specifies a function to run if the request succeeds. data - contains the resulting data from the request

Ajax <?php $id = $_POST['id']; mysql_connect("localhost", "omuser", "omuser") or die("Error connecting"); mysql_select_db("om") or die("Error selecting DB"); $query = "SELECT * FROM items WHERE item_id = $id"; $result = mysql_query($query); if (mysql_num_rows($result) == 0) { echo "Product ID $id not found."; return; } $row = mysql_fetch_array($result); echo " Item ID: {$row['item_id']} "; echo " Title: {$row['title']} "; echo " Artist: {$row['artist']} "; echo " Price: {$row['unit_price']} "; show_product.php

Ajax $('#show').click(function(){ var prodId = $('#id').val(); $.post( "show_product.php", {id:prodId}, function(result) { $('#detail').html(result); } ); }); ajax.php

Resources