Repozytorium Web Developera

jQuery - funkcje

jQuery - funkcje

Przykład prostej funkcji

Poniższe 3 funkcje odpowiadają za to samo - po naciśnięciu elementu z id guzik pojawia się wiadomość w konsoli o treści test.

		$('input#guzik').click(function() {
		    console.log('test');
		})
		 
		//lub
		 
		$('input#guzik').bind('click', function() {
		    console.log('test');
		})
		 
		//lub w wersji > 1.4
		 
		$('input#guzik').bind({
		    'click' : function() {
		        console.log('test');
		    }
		})
		

Event Delegation

		$('.vacation button').on('click', function() {});

		//jest mniej poprawne, ale równoważne:

		$('.vacation').on('click', 'button', function() {});
		

Funkcja data()

W HTML możemy tworzyć własne atrybuty z przedrostkiem data-, np. data-price. Można później korzystać z nich jak ze zmiennych w skrypcie jQuery, np. za pomocą .data(<name>).

		//plik .html
		<element data-price='999$'>

		//plik .js
		.data('price');
		

Funkcja bind()

Funkcja ta łączy określony typ zdarzenia (w przykładzie 'click') z funkcją functionName. Poprzez argument myData możemy przekazać np. literał obiektowy.

		$('#selektor').bind('click', myData, functionName);
		

Funkcja each() dla JSON

Funkcja anonimowa dla .each() przyjmuje nazwę i wartość każdego elementu z obiektu JSON dla poniższego przykładu.

		$.each(JSON, function(name, value) {
			//kod funkcji
		});
		

Funkcja stopPropagation()

Zatrzymywanie przekazywania zdarzenia do przodków

Biblioteka jQuery udostępnia funkcję stopPropagation(), która zatrzymuje przekazywanie zdarzenia do przodków. Jest to metoda obiektu zdarzenia (patrz strona 185, Nieoficjalny podręcznik JavaScript i jQuery), dlatego można jej użyć w funkcji obsługującej dane zdarzenie:

		$('#theLink').click(function(evt){
		// Wykonywane operacje.
		evt.stopPropagation(); // Zatrzymuje
		// przekazywanie zdarzenia.
		});
		

Funkcja preventDefault()

Zapobieganie zdarzeniom domyślnym np. przejściu do nowej strony

Aby zapobiec przejściu do nowej strony w przeglądarkach używających JavaScriptu, należy uruchomić funkcję preventDefault() obiektu zdarzenia (patrz strona 186, Nieoficjalny podręcznik JavaScript i jQuery).

		$('#showForm').click(function(evt) {
			$('#loginForm').fadeIn('slow');
			evt.preventDefault();
		});
		

Funkcja delegate()

Funkcja ta okazuje się niezwykle przydatna w przypadkach, gdy chcemy skojarzyć zdarzenie z elementem, który zostaje dodany do strony dopiero po jej całkowitym wczytaniu.

		$('#container').delegate('selector', 'event' function() {
			//tutaj dodajemy kod obsługujący zdarzenia
		});
		

Funkcja validate()

Służy do walidacji formularzy.

		$('#signup').validate({

			rules : {

				password : {
					required : true,
					rangelength : [8, 16]
				},

				confirm_password : {
					equalTo : '#password'
				}

			},

			messages : {

				password : {
					required : "Wpisz hasło, którego chcesz używać.",
					rangelength : "Hasło musi mieć od 8 do 16 znaków."
				},

				confirm_password : {
					equalTo : "Hasła nie pasują do siebie."
				}

			}

		});