Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).ready(function(){
- *1. Przygotuj alert wyświetląjacy komunikat: "Na aplikacjach klienckich jest ....uczniów!".
- alert("Na aplikacjach klienckich jest "+ $('#grupa li').length + " uczniow");
- *2. Spraw, aby co drugi wiersz z listy uczniów aplikacji klienckich wyświetlał się z tłem w kolorze kanarkowym #eff270.*/
- $('#grupa li:even').css('background-color','#eff270');
- *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".*/
- $('#wciskaj').click(function(){
- $('.projekty').toggle();
- if($('.projekty').is(':visible')){
- $(this).text('Ukryj projekty');
- }
- else{
- $(this).text('Pokaz projekty');
- }
- });
- 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.
- $('#grupa li').remove(':contains("Maciej")');
- alert("Na aplikacjach klienckich jest teraz "+ $('#grupa li').length + " uczniow");
- 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.
- $('#wciskajj').click(function(){
- $('.listLinks1').toggle('slow');
- if($('.listLinks1').is(':visible')){
- $(this).html("Zamykanie listy");
- }
- else{
- $(this).html("Otwieranie listy");
- }
- });
- 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.
- $('#grupa li').hover(function(){
- $(this).animate({paddingLeft: '+=20px'}, 200);
- },
- function(){
- $(this).animate({paddingLeft: '-=20px'}, 200);
- }
- );
- 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.
- $('img').css({"opacity":"1"});
- $('img').hover(function(){
- $('img').css({"opacity":"0.5","transition":"0.5s ease"});
- $(this).css({"opacity":"1","transition":"0.5s ease","cursor":"pointer"});
- });
- 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.
- $('#myForm').validate({ rules : { passc:{ equalTo:$('#pass') },
- login:{ rangelength:[6,8] } },
- messages:{ passc:{ equalTo:'Bledne haslo' }, login:{ rangelength:"Za krotkie haslo" } }
- });
- --------kk------------
- od 6
- $('navigation ul li').mouseenter(function(){
- $(this).animate({"margin-left":"20px"});
- })
- $('navigation ul li').mouseenter(function(){
- $(this).animate({"margin-left":"0px"});
- })
- 7
- $('#celebs').hide();
- $('h2').eq(3).click(function(){
- $('#celebs').toggle();
- });
- 8
- $('#bio div').hide();
- $('h3').click(function(){
- $(this).next().toggle();
- });
- 9
- $('img').css({"cursor":"pointer"});
- $('#galeria table td img').hover(function(){
- $('#galeria table td').css({"background-color":"white"});
- $('#galeria table td img').stop().animate({"opacity":"0.5"},"slow");
- $(this).stop().animate({"opacity":"1"},slow);
- });
- 9b
- $('#foto img').css({"border":"0px"});
- $('#galeria table td img').mouseenter(function(){
- vae sciezka = $(this).attr("src");
- sciezka = sciezka[7];
- var sciezka_new = "images/"+sciezka+"_490.jpg";
- $('#foto img').fadeIn(3000).attr("src",sciezka_new);
- galeria('#galeria table td img').mouseout(function(){
- $('#foto img').fadeOut();
- });
- --------walidacja----------
- $(document).ready(function() {
- $('#signup').validate({
- rules: {
- email: {
- required: true,
- email: true,
- },
- password: 'required',
- confirm_password:{
- required: true,
- equalTo: "#password",
- },
- },
- messages: {
- dob: {
- date: "Wprowadz poprawna date!",
- },
- email: {
- required: " Podaj maila!",
- email: " Wprowadz maila poprawnie!",
- },
- confirm_password:{
- required: " Nie podales hasla",
- equalTo: " Nie podales takiego samego hasla",
- },
- }
- });
- });
- $(document).ready( function() {
- $(‘ :text’)[0].focus();
- });
- $(‘#ilosc’).blur(function() {
- var poleWartosc = $(this).val();
- if (isNaN(poleWartosc)) {
- alert(‘Musisz wpisac liczbe!’);
- }
- });
- $(‘#single’).click( function() {
- $(‘#małżonek’).attr(‘disabled’, true);
- });
- $("a").click(function () {
- $("div").fadeIn(3000);
- });
- $('#balonik_test')
- .mouseover(function() {
- $(this).animate({width:300}, 500);
- })
- .mouseout(function() {
- $(this).animate({width:200}, 500);
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement