Apa $ (function () {}); melakukan?

208

Terkadang saya membuat fungsi dan memanggil fungsi nanti.

Contoh:

function example { alert('example'); }
example(); // <-- Then call it later

Entah bagaimana, beberapa fungsi tidak bisa dipanggil. Saya harus memanggil fungsi-fungsi itu di dalam:

$(function() { });

Apa maksud $(function() {});dan (function() { });maksud, dan apa perbedaan / tujuan semua ini?

jwchang
sumber

Jawaban:

308
$(function() { ... });

hanya jQuery tangan pendek untuk

$(document).ready(function() { ... });

Apa yang dirancang untuk dilakukan (antara lain) adalah memastikan bahwa fungsi Anda dipanggil setelah semua elemen DOM halaman siap digunakan.

Namun, saya tidak berpikir itu masalah yang Anda hadapi - dapatkah Anda menjelaskan apa yang Anda maksud dengan 'Entah bagaimana, beberapa fungsi tidak dapat dipanggil dan saya harus memanggil fungsi-fungsi itu di dalam'? Mungkin memposting beberapa kode untuk menunjukkan apa yang tidak berfungsi seperti yang diharapkan?

Sunting: Membaca kembali pertanyaan Anda, bisa jadi fungsi Anda berjalan sebelum halaman selesai dimuat, dan karena itu tidak akan dijalankan dengan benar; memasukkannya ke dalam $ (fungsi) memang akan memperbaikinya!

Russ Clarke
sumber
2
bagaimana jika $ (function () {}); sudah dalam $ (dokumen) .ready ()?
jwchang
fungsi tidak bekerja tanpa $ (function () meskipun sudah dalam $ (document) ready ().
jwchang
Pertanyaan bagus! Saya percaya itu hanya akan berfungsi, karena jQuery tahu Anda berada di tempat yang tepat, tetapi tentu saja tidak cocok; jika Anda berada di dalam .ready () Anda bisa memanggil fungsi Anda seperti biasa. Jika tidak berhasil, kirimkan sampel, atau bahkan lebih baik - coba dan buat biola sebagai jsfiddle.net.
Russ Clarke
4
@JeongWooChang Lakukan seperti itu (function () { ... })();. Anda harus menambahkan ()untuk menjalankan fungsi Anda.
Šime Vidas
3
"Pengembang berpengalaman terkadang menggunakan singkatan $()untuk $( document ).ready(). Jika Anda menulis kode yang orang-orang yang tidak berpengalaman dengan jQuery mungkin melihat, yang terbaik adalah menggunakan formulir panjang." - learn.jquery.com
thdoan
15

Berikut ini adalah panggilan fungsi jQuery:

$(...);

Yang merupakan "fungsi jQuery." $adalah fungsi, dan $(...)apakah Anda memanggil fungsi itu.

Parameter pertama yang Anda berikan adalah sebagai berikut:

function() {}

Parameter adalah fungsi yang Anda tentukan, dan $fungsi tersebut akan memanggil metode yang disediakan ketika DOM selesai memuat.

cwharris
sumber
5

Saya pikir Anda mungkin membingungkan Javascript dengan metode jQuery. Vanilla atau Javascript biasa adalah sesuatu seperti:

function example() {
}

Fungsi dari sifat itu dapat dipanggil kapan saja, di mana saja.

jQuery (pustaka yang dibangun dengan Javascript) memiliki fungsi-fungsi bawaan yang umumnya mengharuskan DOM untuk sepenuhnya dirender sebelum dipanggil. Sintaks saat ini selesai adalah:

$(document).ready(function() {
});

Jadi fungsi jQuery, yang diawali dengan $atau kata jQueryumumnya dipanggil dari dalam metode itu.

$(document).ready(function() {        
    // Assign all list items on the page to be the  color red.  
    //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
    $('li').css('color', 'red');   
});

Kode pseudo untuk blok itu adalah:

Ketika model objek dokumen $(document)siap .ready(), panggil fungsi berikut function() { }. Dalam fungsi itu, periksa semua yang ada <li>di halaman $('li')dan menggunakan metode jQuery .CSS () untuk mengatur properti CSS "warna" ke nilai "merah".css('color', 'red');

Terry
sumber
2

Ini adalah jalan pintas untuk $(document).ready(), yang dijalankan ketika browser selesai memuat halaman (artinya di sini, "ketika DOM tersedia"). Lihat http://www.learningjquery.com/2006/09/introducing-document-ready . Jika Anda mencoba menelepon example()sebelum browser selesai memuat halaman, itu mungkin tidak berfungsi.

imm
sumber
1
"selesai memuat halaman" tidak akurat dan menyesatkan.
Yahel