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

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... Giới thiệu jQuer[r]

Lập trình Web JQuery Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM Nội dung • • • • • • • • Giới thiệu JQuery JQuery Selector / JQuery Filter Thay đổi nội dung document Xử lý kiện Kiểm tra hợp lệ Ajax Giao diện Hiệu ứng & hoạt ảnh HIENLTH, FIT of HCMUP Giới thiệu jQuery • jQuery là thư viện viết ngôn ngữ JavaScript hỗ trợ cho việc thiết kế giao diện trên Web • jQuery thiết kế để thay đổi cách lập trình phía client 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 Xử lý kiện javascript cách dễ dàng Các control hỗ trợ 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 JQUERY STUDY PATH Core Selectors JQuery Validation UI AJAX Events Functions Effects HIENLTH, FIT of HCMUP Ví dụ mở đầu HIENLTH, FIT of HCMUP 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 Khởi động nhanh với Jquery HIENLTH, FIT of HCMUP 10 Bộ chọn (Selector) • Dùng để chọn 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 thẻ $(‘p#id’), $(‘p.myClass’) Chỉ định tên theo và classname (id) 11 Bộ chọn theo quan hệ phân cấp 12 Bộ chọn các phần tử form SELECTOR Ý NGHĨA :input Chọn tất các thẻ input, textarea trên form :text Chọn tất các textfield trên form :password Chọn tất các password field :radio Chọn tất các radio button :checkbox Chọn tất các checkbox :submit Chọn tất các button submit :reset Chọn tất các button reset :image Chọn tất các image :button Chọn tất các generalized button :file Chọn tất các control upload file HIENLTH, FIT of HCMUP 13 Bộ chọn các phần tử form HIENLTH, FIT of HCMUP 14 Bộ lọc 15 Bộ lọc thuộc tính 16 Một số lọc khác HIENLTH, FIT of HCMUP 17 Bộ lọc cháu • Ví dụ – – – – $(“li:nth-child(even)”) - xác định các thẻ <li> vị trí chẵn $(“li:nth-child(even)”) - xác định thẻ <li> là $(“li:nth-child(2)”) - xác định các thẻ <li> thứ $(“li:nth-child(3n+1)”) – xác định các thẻ <li> thứ 1, 4, 7, 10… HIENLTH, FIT of HCMUP 18 Xử lý tập kết HIENLTH, FIT of HCMUP 19 Xử lý nội dung HIENLTH, FIT of HCMUP 20 Chèn và bổ sung HIENLTH, FIT of HCMUP 21 Chèn và bổ sung HIENLTH, FIT of HCMUP 22 Xử lý thuộc tính HIENLTH, FIT of HCMUP 23 Xử lý CSS HIENLTH, FIT of HCMUP 24 Form Events • • • • • $(selector).blur() $(selector).change() $(selector).focus() $(selector).select() $(selector).submit() HIENLTH, FIT of HCMUP 26 Keyboard Events • • • • • $(selector).focusin() $(selector).focusout() $(selector).keydown() $(selector).keypress() $(selector).keyup() HIENLTH, FIT of HCMUP 27 Hiệu ứng ẩn/hiện HIENLTH, FIT of HCMUP 28 Hiệu ứng fade và slide HIENLTH, FIT of HCMUP 29 Hiệu ứng tùy biến HIENLTH, FIT of HCMUP 30 Form validation HIENLTH, FIT of HCMUP 31 Form validation HIENLTH, FIT of HCMUP 32 Luật validation HIENLTH, FIT of HCMUP 33 Luật validation HIENLTH, FIT of HCMUP 34 Giao diện (Jquery UI) • • • • Datepicker Accordion Tab Dialog HIENLTH, FIT of HCMUP 35 UI-Datepicker <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div> HIENLTH, FIT of HCMUP 36 UI-Datepicker HIENLTH, FIT of HCMUP 37 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 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 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 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 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 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 Ajax HIENLTH, FIT of HCMUP 44 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 Resources • jQuery Main – – • jQuery API Documentation – – • • http://jqueryui.com http://jqueryui.com/themeroller/ jQuery Blog – • http://api.jquery.com http://docs.jquery.com jQuery UI – – • http://jquery.com http://docs.jquery.com/Downloading_jQuery http://blog.jquery.com/ Around The Web – http://stackoverflow.com – – http://www.nettuts.com http://www.smashingmagazine.com Tools – Visual Studio JavaScript Intellisense Support (KB958502) – – • http://getfirebug.com/ (Firebug Firefox Plug-in) http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging) Twitter – @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth Q&A HIENLTH, FIT of HCMUP 47