Kurs MVC - jQuery

Prelekcja połączona z praktyką dotyczące jQuery przedstawiona podczas kursu MVC .NET organizowanego przez PGS-Software na Politechnice Wrocławskiej

Transcript

1. 04.04.2017 Kurs MVC - jQuery
2. • Software Developer w PGS Software • Microsoft Student Partner • Prezes koła naukowego EKA.NET • Studentka I roku Informatyki (II stopień) Gdzie mnie znaleźć? • @j_skurzynska • www.jskurzynska.com Wstęp do ASP.NET MVC 03.04.2017 Kilka słów o mnie 2
3. • Software Developer w PGS Software • .NET’owiec z wyboru • JS’owiec z zamiłowania Gdzie mnie znaleźć? • SzymczakK na i • www.rakaz.pl 04.04.2017 I kilka o mnie
4. jQuery – do czego to w ogóle mi potrzebne? • Manipulacja DOM’em • Łatwiejszy kod JS • Kompatybilność z przeglądarkami (od IE 6.0, FF 2+, Safari 3.0+, Opera 9.0+, Chrome) • Łatwość rozszerzenie o pluginy Kurs MVC - jQuery 04.04.2017 4
5. Jak zacząć z jQuery? • Ściągnięcie na dysk • CDN Kurs MVC - jQuery 04.04.2017 5
6. jQuery('div.class') lub $('div.class') oraz jQuery.each() lub $.each() Kurs MVC - jQuery 04.04.2017 jQuery. , $. , jQuery(), $() 6
7. Zmienne jQuery zaczyna się od znaku $ np.: $yellowInputs = $('input') Kurs MVC - jQuery 04.04.2017 Konwencja nazewnicza 7
8. $('input.passowrd').hide('slow').css({background: 'red'}).show(4000); //lub w wielu liniach $('input.passowrd') .hide('slow') .css({background: 'red'}) .show(4000); Kurs MVC - jQuery 04.04.2017 Składnia łańcuchowa 8
9. $('input.red') - inputy z klasą red $('div .red') - wszystko z klasą red w divach $('div#password > input') - inputy w div'ach z ID password $('input').is(':visible') - inputy z atrybutem visible (czyli aktualnie widoczne) $('.blue ~ input') - wszystkie inputy które następują po jakimkolwiek elemencie z klasą blue $('input#password[disabled]') - input z ID password i atrybutem disabled Kurs MVC - jQuery 04.04.2017 Selektory CSS 9
10. var $inputs = $('input'); $inputs.filter(':hidden').show(); //pokaż ukryte inputy var $divs = $('div'); $divs.filter(function(){ return $(this).children('input').length > 5 ? true : false; }).hide(); //ukryj div’y które posiadają ponad 5 inputów Kurs MVC - jQuery 04.04.2017 $.filter() 10
11. Przykład użycia selektorów Kurs MVC - jQuery 04.04.2017 11
12. //stara metoda $('button.submit').click(function(event){ //tutaj kod JS do wykonania }); //nowa metoda $('button.submit').on('click', function(event){ //tutaj kod JS do wykonania }); Kurs MVC - jQuery 04.04.2017 Zdarzenia w jQuery (event) 12
13. $('button.submit').on({ 'click': function(event){ //kod js do wykonania }, 'mouseover': function(event){ //kod js do wykonania } }); Kurs MVC - jQuery 04.04.2017 Zdarzenia w jQuery (event) cdn. 13
14. $('button.submit').off(); $('button.submit').off(blur'); $('button.submit').off('focus’, funkcjaWykonywanaNaEvent); Kurs MVC - jQuery 04.04.2017 Zdarzenia w jQuery (event) 14
15. Przykład użycia eventów Kurs MVC - jQuery 04.04.2017 15
16. $(document).ready(function(){ //tutaj wstaw swój kod JS }) lub $(function(){ //tutaj wstaw swój kod JS }); Kurs MVC - jQuery 04.04.2017 $(document).ready, $() 16
17. $('button.submit').click(); $('button.submit').blur(); $('button.submit').focus(); Kurs MVC - jQuery 04.04.2017 Wywoływanie zdarzeń w jQuery (event) 17
18. $('#password').show(); $('#password').hide(500, function(){ // kod do wykonania po zakończeniu urkywania }); $('#password').fadeIn(); $('#password').fadeOut(); Kurs MVC - jQuery 04.04.2017 Pokazywanie/ukrywanie elementów 18
19. • Asyncronous JavaScript and Xml • Sposób na komunikację z serwerem „w tle” Kurs MVC - jQuery 04.04.2017 Czym jest Ajax? 19
20. $.ajax({ type : "POST", url : "AddCard", data : { CardId : 7, CardName : 'Point' }, success: function(data) { }, error: function(jqXHR, errorText, errorThrown) { } }); Kurs MVC - jQuery 04.04.2017 $.ajax() 20
21. $.get("GetCard", {cardId: card.Id}, function(data){ alert(data); } ); $.post("SaveCard", {cardId: id, cardName: name}, function(data){ if(data.success){ alert("data saved"); } }; Kurs MVC - jQuery 04.04.2017 $.get(), $.post() 21
22. Let’s code ’litte Kurs MVC - jQuery 04.04.2017 22
23. Dzięki bardzo za uwagę!
24. PGS Software S.A. Tel.: +48 71 79 82 692 Fax: +48 71 79 82 690 E-mail: pgs-soft@pgs-soft.com www.pgs-soft.com