The gotowy() funkcja w jQuery wykonuje kod tylko wtedy, gdy DOM (model obiektowy dokumentu) jest w pełni załadowany. Jest to wbudowana funkcja w jQuery. Może zostać uruchomiony przed załadowaniem wszystkich obrazów itp., ale tylko wtedy, gdy DOM jest gotowy. Kod wstawiony pomiędzy $(dokument).gotowy() jest wykonywany tylko wtedy, gdy strona jest gotowa do wykonania kodu JavaScript.
Nie powinniśmy używać tzw gotowy() metoda wraz z .
Składnia
Możemy skorzystać z gotowy() działać na dwa sposoby, jak podano poniżej.
- Powszechnie stosowana składnia gotowy() funkcja jest następująca.
$(document).ready(function)
- Ponieważ możemy skorzystać z gotowy() funkcję tylko dla bieżącego dokumentu, więc selektor można pominąć. Powyższą składnię możemy również zapisać w następujący sposób.
$(function)
Oba powyższe sposoby są ważne w użyciu. Drugiej składni można używać jako alternatywy dla pierwszej składni. Można to jasno wywnioskować z poniższego fragmentu kodu.
$(document).ready(function() { $('p').css('color', 'red'); }); Powyższy kod jest odpowiednikiem poniższego kodu.
$(function() { $('p').css('color', 'red'); }); Niektórzy doświadczeni programiści używają skrótu $() zamiast używać $(dokument).gotowy(), ale jeśli piszemy kod dla osób niedoświadczonych, to lepiej zastosować długą formę.
Wartości parametrów
The gotowy() funkcja ma tylko jedną wartość parametru zdefiniowaną w następujący sposób.
funkcjonować(): Jest to obowiązkowy parametr określający funkcję, która zostanie wykonana po załadowaniu dokumentu.
Zobaczmy przykład użycia $(dokument).gotowy() funkcjonować.
Przykład
W tym przykładzie jest kilka elementów akapitu i przycisk. Tutaj używamy $(dokument).gotowy() funkcja zmiany stylu podanych akapitów.
jQuery ready() function $(document).ready(function(){ $('button').click(function(){ $('#p1').css({'font-size': '30px', 'color': 'blue', 'background': 'yellow', 'fontWeight': 'bold'}); $('#p2').css({'fontSize': '20px', 'fontWeight': 'bold', 'color': 'red'}); $('#p3').css({'color': 'blue'}); }); }); <p id="p1"> Welcome to the javaTpoint.com </p> <p id="p2"> This is an example of using the $(document).ready() function. </p> <p id="p3"> This is a third paragraph element </p> <p> Click the following button to see the effect. </p> Click me Przetestuj teraz Wyjście:
Po wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu danego przycisku wyjściem będzie -
