Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 8 - ThS. Lương Trần Hy Hiến

<span class='text_page_counter'>(1)</span>Lập trình Web. JQuery. Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM.

<span class='text_page_counter'>(2)</span> Nội dung • • • • • • • •. Giới thiệu về JQuery JQuery Selector / JQuery Filter Thay đổi nội dung document Xử lý sự kiện Kiểm tra hợp lệ Ajax Giao diện Hiệu ứng & hoạt ảnh HIENLTH, FIT of HCMUP. 2.

<span class='text_page_counter'>(3)</span>

<span class='text_page_counter'>(4)</span>

<span class='text_page_counter'>(5)</span>

<span class='text_page_counter'>(6)</span> Giới thiệu jQuery • jQuery là thư viện được viết bằng ngôn ngữ JavaScript hỗ trợ cho việc thiết kế giao diện trên Web. • jQuery được thiết kế để thay đổi cách lập trình ở phía client như Javascript truyền thống. • jQuery cung cấp các tính năng: – – – – – –. Truy xuất tài liệu HTML (DOM) dễ dàng hơn. Xử lý sự kiện javascript một cách dễ dàng. Các control hỗ trợ trong quá trình thiết kế giao diện web. Cung cấp các hiệu ứng trên web. Đơn giản hóa việc sử dụng công nghệ AJAX. Hỗ trợ các thư viện giao diện. HIENLTH, FIT of HCMUP. 6.

<span class='text_page_counter'>(7)</span> JQUERY STUDY PATH. Core. Selectors. JQuery Validation UI. AJAX. Events. Functions. Effects. HIENLTH, FIT of HCMUP. 7.

<span class='text_page_counter'>(8)</span> Ví dụ mở đầu. HIENLTH, FIT of HCMUP. 8.

<span class='text_page_counter'>(9)</span> JQUERY









. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("p").click(function() { Library $(this).hide(); }); Event }); Selector </script> HIENLTH, FIT of HCMUP. 9.

<span class='text_page_counter'>(10)</span> Khởi động nhanh với Jquery. HIENLTH, FIT of HCMUP. 10.

<span class='text_page_counter'>(11)</span> Bộ chọn (Selector) • Dùng để chọn 1 hay nhiều thẻ HTML • Một số cách lựa chọn: jQuery. Selects…. $(‘#myId’). By ID. $(‘div’). By Element Type. $(‘.myClass’). By Class. $(‘div, span, p.myClass, #myid’). Áp dụng cho nhiều thẻ. $(‘*’). Tất cả các thẻ. $(‘p#id’), $(‘p.myClass’). Chỉ định bởi tên theo và classname (id). 11.

<span class='text_page_counter'>(12)</span> Bộ chọn theo quan hệ phân cấp. 12.

<span class='text_page_counter'>(13)</span> Bộ chọn các phần tử form SELECTOR Ý NGHĨA :input. Chọn tất cả các thẻ input, textarea trên form. :text. Chọn tất cả các textfield trên form. :password. Chọn tất cả các password field. :radio. Chọn tất cả các radio button. :checkbox. Chọn tất cả các checkbox. :submit. Chọn tất cả các button submit. :reset. Chọn tất cả các button reset. :image. Chọn tất cả các image. :button. Chọn tất cả các generalized button. :file. Chọn tất cả các control upload file HIENLTH, FIT of HCMUP. 13.

<span class='text_page_counter'>(14)</span> Bộ chọn các phần tử form. HIENLTH, FIT of HCMUP. 14.

<span class='text_page_counter'>(15)</span> Bộ lọc cơ bản. 15.

<span class='text_page_counter'>(16)</span> Bộ lọc thuộc tính. 16.

<span class='text_page_counter'>(17)</span> Một số bộ lọc khác. HIENLTH, FIT of HCMUP. 17.

<span class='text_page_counter'>(18)</span> Bộ lọc con cháu. • Ví dụ – – – –. $(“li:nth-child(even)”) - xác định các thẻ <li> con tại vị trí chẵn $(“li:nth-child(even)”) - xác định thẻ <li> là con duy nhất $(“li:nth-child(2)”) - xác định các thẻ <li> con thứ 3 $(“li:nth-child(3n+1)”) – xác định các thẻ <li> thứ 1, 4, 7, 10… HIENLTH, FIT of HCMUP. 18.

<span class='text_page_counter'>(19)</span> Xử lý tập kết quả. HIENLTH, FIT of HCMUP. 19.

<span class='text_page_counter'>(20)</span> Xử lý nội dung. HIENLTH, FIT of HCMUP. 20.

<span class='text_page_counter'>(21)</span> Chèn và bổ sung. HIENLTH, FIT of HCMUP. 21.

<span class='text_page_counter'>(22)</span> Chèn và bổ sung. HIENLTH, FIT of HCMUP. 22.

<span class='text_page_counter'>(23)</span> Xử lý thuộc tính. HIENLTH, FIT of HCMUP. 23.

<span class='text_page_counter'>(24)</span> Xử lý CSS. HIENLTH, FIT of HCMUP. 24.

<span class='text_page_counter'>(25)</span>

<span class='text_page_counter'>(26)</span> Form Events • • • • •. $(selector).blur() $(selector).change() $(selector).focus() $(selector).select() $(selector).submit(). HIENLTH, FIT of HCMUP. 26.

<span class='text_page_counter'>(27)</span> Keyboard Events • • • • •. $(selector).focusin() $(selector).focusout() $(selector).keydown() $(selector).keypress() $(selector).keyup(). HIENLTH, FIT of HCMUP. 27.

<span class='text_page_counter'>(28)</span> Hiệu ứng ẩn/hiện. HIENLTH, FIT of HCMUP. 28.

<span class='text_page_counter'>(29)</span> Hiệu ứng fade và slide. HIENLTH, FIT of HCMUP. 29.

<span class='text_page_counter'>(30)</span> Hiệu ứng tùy biến. HIENLTH, FIT of HCMUP. 30.

<span class='text_page_counter'>(31)</span> Form validation. HIENLTH, FIT of HCMUP. 31.

<span class='text_page_counter'>(32)</span> Form validation. HIENLTH, FIT of HCMUP. 32.

<span class='text_page_counter'>(33)</span> Luật validation. HIENLTH, FIT of HCMUP. 33.

<span class='text_page_counter'>(34)</span> Luật validation. HIENLTH, FIT of HCMUP. 34.

<span class='text_page_counter'>(35)</span> Giao diện (Jquery UI) • • • •. Datepicker Accordion Tab Dialog. HIENLTH, FIT of HCMUP. 35.

<span class='text_page_counter'>(36)</span> UI-Datepicker <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div>. HIENLTH, FIT of HCMUP. 36.

<span class='text_page_counter'>(37)</span> UI-Datepicker. HIENLTH, FIT of HCMUP. 37.

<span class='text_page_counter'>(38)</span> UI-Accordion <script> $(function() { $( "#accordion" ).accordion(); }); </script> <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div>. HIENLTH, FIT of HCMUP. 38.

<span class='text_page_counter'>(39)</span> UI-AutoComplete <script> $(function() { $( "#tags" ).autocomplete ({ source: ["ActionScript", "AppleScript", "Java“, "JavaScript","Lisp", "Perl","PHP","Python“, "Ruby","Scala","Scheme”] }); }); </script> <div class="demo"> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </div>. HIENLTH, FIT of HCMUP. 39.

<span class='text_page_counter'>(40)</span> UI-Dialog <script> $(function() { $( "#dialog" ).dialog(); }); </script> <div class="demo"> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> </div> HIENLTH, FIT of HCMUP. 40.

<span class='text_page_counter'>(41)</span> UI-TABS <script> $(function() { $( "#tabs" ).tabs(); }); </script> <div class="demo“><div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat</p> </div></div></div>. HIENLTH, FIT of HCMUP. 41.

<span class='text_page_counter'>(42)</span> UI-Sortable <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <div class="demo"> <ul id="sortable"> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> </ul> </div. HIENLTH, FIT of HCMUP. 42.

<span class='text_page_counter'>(43)</span> UI-Selectable <style> #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script> $(function() { $( "#selectable" ).selectable(); }); </script> <div class="demo"> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> </ol> </div>. HIENLTH, FIT of HCMUP. 43.

<span class='text_page_counter'>(44)</span> Ajax. HIENLTH, FIT of HCMUP. 44.

<span class='text_page_counter'>(45)</span> AJAX •. Helpers – load, get, getJSON, getScript, post (all use $.ajax behind the scenes) – $.ajaxSetup(options) can be used to globally set the default options for all AJAX request. You can still override these within each AJAX request object.. • •. Local Events – subscribed to within AJAX request object Global Events – broadcast to all elements in the DOM – Can be disabled within the AJAX request object’s ‘global’ property – .bind(‘ajaxStart’, fn) or .ajaxStart(fn). G L G L G L G L G G. | | | | | | | | | |. ajaxStart beforeSend ajaxSend success ajaxSuccess error ajaxError complete ajaxComplete ajaxStop.

<span class='text_page_counter'>(46)</span> Resources •. jQuery Main – –. •. jQuery API Documentation – –. •. •. jQuery Blog –. •. . jQuery UI – –. •. Around The Web –. . – –. . Tools – Visual Studio JavaScript Intellisense Support (KB958502) – –. •. (Firebug Firefox Plug-in) (JS Bin - Collaborative JavaScript Debugging). Twitter –. @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth.

<span class='text_page_counter'>(47)</span> Q&A. HIENLTH, FIT of HCMUP. 47.

<span class='text_page_counter'>(48)</span>