งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "JQUERY. jQuery คือ JavaScript Platform หรือ JavaScript Library Library ที่ถูกเขียนขึ้นจาก JavaScript เพื่อลดขั้นตอนสนองการพัฒนา เว็บไซต์ในรูปแบบใหม่ การโต้ตอบกับ."— ใบสำเนางานนำเสนอ:

1 jQUERY

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

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

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

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

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

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

8 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

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

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

11 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

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

13 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

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

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

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

17 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

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

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

20 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

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

22 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

23 Ajax

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

25 Resources


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

งานนำเสนอที่คล้ายกัน


Ads by Google