Kod w jQuery - jak zacząć?

Witam,

Czy ktoś może mi łopatologicznie wyjaśnić, od czego należy zacząć pisanie skryptu przy wspomaganiu się jQuery? Generalnie pytam o to, czy jQuery musi zaczynać się obowiązkowo od:

$(document).ready(function() {

tu_mój_skrypt_w_czystym_JS

});

Czy można po prostu od razu jechać z kodem bez tego wyżej? Trochę brakuje mi zaczepienia w postaci takiego "szkieletu" w jQuery. Próbowałem ubrać w wyżej wymieniony sposób cały mój skrypt, który tak naprawdę napisany jest przy użyciu czystego JavaScript i niestety nie działa. Czyżby miks kodu jQuery i JavaScript nie był możliwy?

Tę konstrukcję stosujesz gdy chcesz wykonać skrypt dopiero gdy się załaduje DOM.

Operując np. na div, który jest powyżej skryptu, który wykonujesz będzie ok. Jeśli skrypt ładujesz przed div to gdy skrypt będzie się wykonywał div jeszcze nie będzie istniał więc wtedy możesz zastosować $(document).ready co oznacza, że DOM jest załadowany (w tym ten div). Jeśli napisałem niezrozumiale to daj znać to posłużę się przykładami.

OK, jest to dla mnie w miarę zrozumiałe, ale jakbyś wrzucił kilka przykładów dla uzupełnienia, to byłbym wdzięczny :)

To jest okej. Jest div a potem ładujemy skrypt, który na nim operuje.

<div id="test">a</div>
<script>$('#test').text('1');</script>

To jest błędne. Ładujemy skrypt, który operuje na div, który jeszcze nie istnieje.

<script>
$('#test').text('1');
</script>
<div id="test">a</div>

To jest okej. Ładujemy skrypt, który wykona funkcje, która operuje na div, która wykona się dopiero jak caly dom będzie załadowany a więc div już będzie istniał.

<script>
$(document).ready(function() {
	$('#test').text('1');
});
</script>
<div id="test">a</div>

OK, to jest już jasne dla mnie...a jak jest w przypadku np. funkcji, które chciałbym wywołać? Czy jesteś w stanie podać mi jakiś najprostszy przykład? Jak to zawrzeć w HTMLu i w zewnętrznym pliku .js?

@Lucas83: zacznij naukę JavaScriptu od nauki samego JavaScriptu, a nie jQuery.

Czyżby miks kodu jQuery i JavaScript nie był możliwy?

Przecież jQuery jest napisane w js. W narzędziach deweloperskich Twojej przeglądarki (F12) masz zakładkę z konsolą. W niej wyświetlają się m.in. błędy js. Zwykle wystarczy przeczytać ze zrozumieniem ich treść,

Lucas83 napisał(a):

OK, to jest już jasne dla mnie...a jak jest w przypadku np. funkcji, które chciałbym wywołać? Czy jesteś w stanie podać mi jakiś najprostszy przykład? Jak to zawrzeć w HTMLu i w zewnętrznym pliku .js?

Ładowanie z zewnętrznego skryptu działa tak samo jak <script>. Jeśli masz go przed elementami to musisz poczekać aż dom będzie załadowany. Jeśli ładujesz go na końcu HTMLa (np. w body) to nie musisz czekać bo już jest załadowany. Podałem przykłady gdzie wywołujesz funkcje przecież. Jeśli masz jakieś problemy to je pokaż.

@anonimowy: mam na przykład coś takiego i chciałem przepisać to do jQuery:

function parametry_paliwo() { 
	var ltr = document.getElementById("ltr"); // to w jQuery chyba mogę pominąć i odwołać się bezpośrednio do id ltr?
	var km = document.getElementById("km");	
	var mil = document.getElementById("mil");
	
	if (ltr.checked == true) { // jeśli radio btn ltr zaznaczony, to zaznaczam km, jeśli nie, to mil
		km.checked = true;		
	} else {		
		mil.checked = true;
	}
}

Czy to będzie coś takiego?

$(function() {
	$("#ltr").click(function() {
		if $("#ltr").prop("checked") == true {
			$("#km").prop("checked", true);
		} else {
			$("#mil").prop("checked", true);
		}
	});
});

No i co ci tu nie działa?

OK, nie działało, ale już jest w porządku, zabrakło nawiasów:

• zamiast

if $("#ltr").prop("checked") == true

• powinno być

if ($("#ltr").prop("checked") == true)

$(function() {
    $("#ltr").click(function() {
        $($("#ltr").prop("checked") ? "#km" : "#mil").prop("checked", true);
    });
});

albo (nie do końca robiące to samo):

$(function() {
    $("#ltr").click(function() {
        $("#km").prop("checked", $("#ltr").prop("checked"));
        $("#mil").prop("checked", !$("#ltr").prop("checked"));
    });
});

Tylko te wersje są mniej czytelne

Szczerze? Są tak samo nieczytelne, jak oryginalny kod, ale są znacznie krótsze. Jesli chcesz mieć ładnie, to widze to tak:

var selectUnit = function() {
    var unitSourceCheckBox = $("#ltr");
    var unitCheckBoxId = unitSourceCheckBox.prop("checked") ? "#km" : "#mil";
    $(unitCheckBoxId).prop("checked", true);
});

var onDomLoaded = function() {
    $("#ltr").click(selectUnit);
});

$(onDomLoaded);