jquery n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
JQuery PowerPoint Presentation
Download Presentation
JQuery

Loading in 2 Seconds...

play fullscreen
1 / 54

JQuery - PowerPoint PPT Presentation


  • 302 Views
  • Uploaded on

JQuery. GV : Ngô Bá Nam Phương Khoa CNTT – ĐHKHTN. Nội dung trình bày. Giới thiệu về JQuery JQuery Selector, Filter Thay đổi nội dung document Xử lý sự kiện Hiệu ứng , hoạt ảnh Ajax UI controls & Themes Một số thư viện mở rộng. JQuery.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'JQuery' - urielle-horton


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
jquery

JQuery

GV : NgôBá Nam Phương

Khoa CNTT – ĐHKHTN

n i dung tr nh b y
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector, Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng, hoạtảnh
  • Ajax
  • UI controls & Themes
  • Mộtsốthưviệnmởrộng
jquery1
JQuery
  • Thưviệnjavascriptmãnguồnmở, miễnphí
  • Cho phéptạocáctrang web hiệuứngđẹp, khảnăngtươngtáccao
  • Tươngthíchnhiềutrìnhduyệt.
  • Cộngđồnglớn, nhiều plug-in mởrộng.
l i ch s d ng jquery
LợiíchsửdụngJQuery
  • Truyxuấtcácthànhphầnnội dung trang web vớicúpháptươngtựcss (thông qua cácbộchọn selector).
  • Đơngiảnhóacáchviếtmãnguồnjavascript ( write less, do more ). Táchbiệtmãxửlýjavascriptvàthànhphầnthểhiện HTML.
  • Hỗtrợnhiềuthaotácxửlýtrêntậpcác element chỉbằngmộtdònglệnh (statement chaining).

$(“selector”).func1().func2().func3()…;

c i t
Càiđặt
  • Download: http://jquery.com/
  • Version mớinhất: 1.5.2
  • Có 2 version:
    • Production (triểnkhailên host thật)
    • Development (dùngtrongquátrìnhpháttriển, hỗtrợ debug ...)
c c th nh ph n trong jquery
Các thànhphầntrongJQuery
  • Core functionality: cácphươngthức core củaJQueryvàcáchàmtiệních.
  • Selector & Traveral: chọn, tìmkiếm element, duyệt qua các element trong document.
  • Manipulation & CSS: thayđổinội dung các element trong document, làmviệcvớicss.
c c th nh ph n trong jquery1
Các thànhphầntrongJQuery
  • Event: đơngiảnhóaviệcxửlý event. Cungcấp event helper function đăngkýnhanhcác event.
  • Effect & Animation: cungcấpcáchàmhỗtrợtạo animation & effect.
  • Ajax
  • User interface: tập widget vớicác control: accordion, datepicker, dialog, progressbar, slider, tab
  • Extensibility: hỗtrợtạopluginbổ sung thêmcácchứcnăngmớivào core library.
n i dung tr nh b y1
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector
  • JQuery Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng & hoạtảnh
jquery selector
JQuery Selector
  • Truyxuấtcácthànhphầnnội dung (element) trong document dựatrênbiểuthức selector vớicúpháptươngtự CSS.
  • Tậpkếtquả do Selector và Filter trảvề: JQuery objects (khôngphải DOM objects).
jquery selector1
JQuery Selector
  • Cúphápvàcáchchọntươngtự CSS
jquery selector5
JQuery Selector
  • Chọn element dựatrênmốiquanhệphâncấpgiữa các element
n i dung tr nh b y2
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector
  • JQuery Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng & hoạtảnh
jquery filter
JQuery Filter
  • JQuery Selector thườngtrảvề 1 tậpđốitượng. JQuery Filter đượcdùngđểlọctrênkếtquảchọncủaJQuery Selector.
  • Có 6 loại Filter:
    • Basic: lọcphầntửdựatrênvịtrí (đầutiên, cuốicùng, chẵn, lẻ …)
    • Content: lọcdựatrênnội dung
    • Visibility: lọcdựatrêntrạngtháihiểnthịcủa element
    • Attribute: lọcdựatrênthuộctínhcủa element
    • Child: lọcdựatrênmốiquanhệvới element cha
    • Form: lọctrêncácthànhphầnkhaibáotrên Form
n i dung tr nh b y3
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector
  • JQuery Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng & hoạtảnh
duy t danh s ch c c element trong document1
Duyệtdanhsách các element trong document

alert( $("p").size() );// 4

for(var i=0 ; i < $("p").size() ; ++i )

{

varname = $("p").get(i); // DOM element

varinnerText = $("p").get(i).innerText;

}

duy t danh s ch c c element trong document2
Duyệtdanhsách các element trong document

vari = 1;

$("p").each(function () {

$(this).html("Custom paragraph " + i);

i++;

});

t o n i dung m i
Tạonội dung mới
  • Phươngthức$(“html content”), kếtquảtrảvềlà 1 JQuery object.

Vídụ:

var h1 = $(“<h1>heading 1</h1>”); // tạothẻ h1 vớinội dung

var temp = “<h1>heading 1</h1>”;

varnewH1 = $(temp); // tạothẻ h1 từbiến

$(“p:eq(0)”).html(newH1);

thay i gi tr thu c t nh v d
Thayđổigiátrịthuộctính – vídụ

<a href="trang1.html">Trang 1</a>

$("a").attr("href","trang2.html");

$("a").text("trang 2");

<a href="book1.jpg">

<imgsrc="book1.jpg" />

</a>

$("a").attr("target","_blank");

$("a img").attr("src","book2.jpg");

$("a").removeAttr("href");

$("img").attr( {src:"book2.jpg",alt:"hello world"} );

n i dung tr nh b y4
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector
  • JQuery Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng & hoạtảnh
x l s ki n
Xửlýsựkiện

$("selector").bind(event,[data],[handler]);

$("selector").unbind(event,data,handler);

n i dung tr nh b y5
Nội dung trìnhbày
  • GiớithiệuvềJQuery
  • JQuery Selector
  • JQuery Filter
  • Thayđổinội dung document
  • Xửlýsựkiện
  • Hiệuứng & hoạtảnh
hi u ng v ho t nh
Hiệuứngvàhoạtảnh
  • Ẩn, hiện element
  • Fade-in, fade-out
  • Sliding
  • Di chuyển element
  • Custom animation effect
n hi n element
Ẩn/hiện element
  • Tốcđộhiệuứngquyđịnhbởi các giátrị: “slow”, “normal”, “fast” hoặc millisecond
n hi n element1
Ẩn/hiện element

$("#div1").show("normal");

$("#div1").hide("slow");

$("#div1").hide(4000); // ẩntrong 4 giây

// thayđổiluânphiêntrạngtháiẩn/hiện

$("#div1").toggle("fast");

fade in fade out1
Fade in/fade out

$("#button_fadein").bind("click",function () {

$("#div1").fadeIn("normal");

});

$("#button_fadeout").bind("click",function () {

$("#div1").fadeOut("slow");

});

$("#button_fadeto3").bind("click",function () {

$("#div1").fadeTo("slow",0.3,function () {

alert("finished");

});

});

$("#button_fadeup").bind("click",function () {

$("#div1").fadeTo("slow",1.0);

});

sliding1
Sliding

$("#button_slideup").bind("click",function () {

$("#div1").slideUp("normal");

});

$("#button_slidedown").bind("click",function () {

$("#div1").slideDown("slow");

});

$("#button_toggleslide").bind("click",function () {

$("#div1").slideToggle(3000);

});

slide51
Ajax
  • $.ajax({

type : “GET/POST” ,

url : “/root/servletName” ,

data : “parameter1=value1&parameter2=value2 …”,

success: function( responseMsg ) {

}

failure : function( ) {

}

});

ui controls themes
UI controls & Themes
  • Accordion
  • Tab
  • Button
  • Slider
  • Date Picker
  • Dialog
  • Progress Bar
  • ..
ui themes
UI Themes
  • UI Lightness
  • UI Darkness
  • Redmond
  • Le-frog
  • ..
m t s th vi n m r ng
Mộtsốthưviệnmởrộng
  • Charts
  • Form Validator
  • Tooltip