Advertisement
Guest User

Untitled

a guest
Mar 19th, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.24 KB | None | 0 0
  1. $(document).ready(function(){
  2. *1. Przygotuj alert wyświetląjacy komunikat: "Na aplikacjach klienckich jest ....uczniów!".
  3. alert("Na aplikacjach klienckich jest "+ $('#grupa li').length + " uczniow");
  4. *2. Spraw, aby co drugi wiersz z listy uczniów aplikacji klienckich wyświetlał się z tłem w kolorze kanarkowym #eff270.*/
  5. $('#grupa li:even').css('background-color','#eff270');
  6. *3. Pod kontenerem "Wykonane projekty" wstaw przycisk (w kolorze tła #eff270, kanciasty), obsługujący funkcję ukrywania i pokazywania zawartości tego kontenera, wraz ze zmianą tekstu na przycisku: "Ukryj projekty uczniowskie" lub "Zobacz projekty uczniowskie".*/
  7. $('#wciskaj').click(function(){
  8. $('.projekty').toggle();
  9. if($('.projekty').is(':visible')){
  10. $(this).text('Ukryj projekty');
  11. }
  12. else{
  13. $(this).text('Pokaz projekty');
  14. }
  15. });
  16. 4. Filtrować możemy też według zawartości elementu. Chcąc wybrać elementy zawierające jakiś dany tekst użyjemy filtra :contains(‘tekst’), gdzie w miejsce tekst wpisujemy szukanej zawartości.
  17. $('#grupa li').remove(':contains("Maciej")');
  18. alert("Na aplikacjach klienckich jest teraz "+ $('#grupa li').length + " uczniow");
  19. 5. Pod listą udostępnionych materiałów z JS i jQuery, umieść przycisk, który obsłuży efektowną funkcję stopniowego zanikania i wyświetlania elementów listy.
  20. $('#wciskajj').click(function(){
  21. $('.listLinks1').toggle('slow');
  22. if($('.listLinks1').is(':visible')){
  23. $(this).html("Zamykanie listy");
  24. }
  25. else{
  26. $(this).html("Otwieranie listy");
  27. }
  28. });
  29. 6. Napisz skrypt, realizujący animację na wszystkich elementach listy uczniów. Po najechaniu wskaźnikiem myszy na pozycję w liście element odsunie się płynnie w prawą strone o 20px, a po dezaktywacji powróci do pierwotnego położenia.
  30. $('#grupa li').hover(function(){
  31. $(this).animate({paddingLeft: '+=20px'}, 200);
  32. },
  33. function(){
  34. $(this).animate({paddingLeft: '-=20px'}, 200);
  35. }
  36. );
  37. 7. Galeria. Przygotuj podstronę galeria. a po najechaniu na wybrany z nich, reszta ulega rozmyciu, za wyjątkiem aktywnego, który pozostaje w pełnej widoczności.
  38. $('img').css({"opacity":"1"});
  39. $('img').hover(function(){
  40. $('img').css({"opacity":"0.5","transition":"0.5s ease"});
  41. $(this).css({"opacity":"1","transition":"0.5s ease","cursor":"pointer"});
  42. });
  43. 8. Formularz z prostą walidacją. Przygotuj na podstronie galeria formularz "ZAPISZ SIĘ DO KURSU jQuery!" z polami: login, hasło i powtórz hasło oraz przyciskami wyślij i wyczyść. Niech login zawiera minimum 6-8 znaków(musi być co najmniej 1 cyfra i co najmniej 1 duża litera), a hasło od 8-10. Ustaw komunikaty o błędach. Wypełnienie pól jest wymagane.
  44. $('#myForm').validate({ rules : { passc:{ equalTo:$('#pass') },
  45. login:{ rangelength:[6,8] } },
  46. messages:{ passc:{ equalTo:'Bledne haslo' }, login:{ rangelength:"Za krotkie haslo" } }
  47. });
  48. --------kk------------
  49. od 6
  50. $('navigation ul li').mouseenter(function(){
  51. $(this).animate({"margin-left":"20px"});
  52. })
  53. $('navigation ul li').mouseenter(function(){
  54. $(this).animate({"margin-left":"0px"});
  55. })
  56. 7
  57. $('#celebs').hide();
  58. $('h2').eq(3).click(function(){
  59. $('#celebs').toggle();
  60. });
  61. 8
  62. $('#bio div').hide();
  63. $('h3').click(function(){
  64. $(this).next().toggle();
  65. });
  66. 9
  67. $('img').css({"cursor":"pointer"});
  68. $('#galeria table td img').hover(function(){
  69. $('#galeria table td').css({"background-color":"white"});
  70. $('#galeria table td img').stop().animate({"opacity":"0.5"},"slow");
  71. $(this).stop().animate({"opacity":"1"},slow);
  72. });
  73. 9b
  74. $('#foto img').css({"border":"0px"});
  75.  
  76. $('#galeria table td img').mouseenter(function(){
  77. vae sciezka = $(this).attr("src");
  78. sciezka = sciezka[7];
  79. var sciezka_new = "images/"+sciezka+"_490.jpg";
  80. $('#foto img').fadeIn(3000).attr("src",sciezka_new);
  81.  
  82. galeria('#galeria table td img').mouseout(function(){
  83. $('#foto img').fadeOut();
  84. });
  85. --------walidacja----------
  86. $(document).ready(function() {
  87. $('#signup').validate({
  88. rules: {
  89. email: {
  90. required: true,
  91. email: true,
  92. },
  93. password: 'required',
  94. confirm_password:{
  95. required: true,
  96. equalTo: "#password",
  97. },
  98. },
  99. messages: {
  100.  
  101. dob: {
  102. date: "Wprowadz poprawna date!",
  103. },
  104. email: {
  105. required: " Podaj maila!",
  106. email: " Wprowadz maila poprawnie!",
  107. },
  108. confirm_password:{
  109. required: " Nie podales hasla",
  110. equalTo: " Nie podales takiego samego hasla",
  111. },
  112. }
  113. });
  114. });
  115. $(document).ready( function() {
  116. $(‘ :text’)[0].focus();
  117. });
  118. $(‘#ilosc’).blur(function() {
  119. var poleWartosc = $(this).val();
  120. if (isNaN(poleWartosc)) {
  121. alert(‘Musisz wpisac liczbe!’);
  122. }
  123. });
  124. $(‘#single’).click( function() {
  125. $(‘#małżonek’).attr(‘disabled’, true);
  126. });
  127. $("a").click(function () {
  128. $("div").fadeIn(3000);
  129. });
  130. $('#balonik_test')
  131. .mouseover(function() {
  132. $(this).animate({width:300}, 500);
  133. })
  134. .mouseout(function() {
  135. $(this).animate({width:200}, 500);
  136. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement