Rumah > Artikel > hujung hadapan web > Petua JQuery berkaitan (1)----Mengenai $.Ready()_jquery

Petua JQuery berkaitan (1)----Mengenai $.Ready()_jquery

WBOYasal: 2016-05-16 16:39:371538semak imbas

Saya telah mempelajari JQuery baru-baru ini, dan perkara ini masih sangat luas dan mendalam Izinkan saya berkongsi ringkasan pembelajaran saya

Kaedah $(document).Ready() VS OnLoad event VS $(window).load() method

Perkara pertama yang biasanya anda pelajari apabila anda berhubung dengan JQuery ialah masa untuk memulakan acara. Untuk masa yang lama, peristiwa yang dicetuskan selepas halaman dimuatkan telah dimuatkan dalam acara Onload "Badan".

Terdapat banyak keburukan acara Body's Onload berbanding kaedah JQuery's Ready Contohnya:

1. Masalah memuatkan berbilang fungsi

<body onload="a();b();">

</body>

Anda hanya boleh memuatkan seperti ini dalam acara Onload, yang hodoh... Dalam JQuery, anda boleh menggunakan berbilang kaedah JQuery.Ready() dan ia akan dilaksanakan mengikut urutan

2. Kod dan kandungan tidak dipisahkan

Sudah tentu ini sangat menjijikkan -.-!!

3. Urutan pelaksanaan adalah berbeza

Untuk acara Body.Onload, ia tidak akan dicetuskan sehingga semua kandungan halaman dimuatkan, saya maksudkan semua kandungan, termasuk gambar, flash, dll. Jika halaman mempunyai banyak kandungan, pengguna akan menunggu lama

Bagi kaedah $(document).ready() pula, kaedah ini hanya akan dicetuskan selepas semua DOM halaman dimuatkan, yang pastinya akan mempercepatkan halaman web

Tetapi untuk beberapa aplikasi khas, seperti mengezum masuk dan keluar gambar dan memangkas gambar. Adakah ia perlu dilaksanakan selepas semua kandungan halaman web dimuatkan? Saya mengesyorkan menggunakan kaedah $(window).load() Kaedah ini tidak akan dicetuskan sehingga semua kandungan halaman dimuatkan dan ia tidak mempunyai kelemahan acara OnLoad.

  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

Kod di atas akan dilaksanakan mengikut tertib selepas semua kandungan halaman dimuatkan

Sudah tentu jangan lupa kaedah Punggah Muatan yang sepadan

$(window).unload(function() {
      alert("good bye");
    });

Kod di atas akan dicetuskan apabila halaman ditutup

Kod JS api sebelum semua DOM dimuatkan

Kaedah ini adalah kegemaran saya semasa menyahpepijat, dan kadangkala saya juga menggunakan kaedah ini semasa pembangunan

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

Ya, ia adalah untuk menggunakan bentuk penutupan js untuk membenamkan kod js ke dalam badan. Sudah tentu, anda juga boleh membenamkan kod js secara langsung isu pesanan, seperti berikut:

<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content
    
  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content
    
  </script>
  <div id="test">this is the content</div>
</body>

Dua keping kod di atas, sekeping kod kedua hanya boleh mentafsir DOM sebelum kod semasa dan ujian tidak wujud dalam bilangan DOM yang dihuraikan, jadi sekeping kod kedua tidak dapat dipaparkan dengan betul.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang pengaturcaraan dipacu peristiwa dalam Node.js_node.jsArtikel seterusnya：Penjelasan terperinci tentang pengaturcaraan dipacu peristiwa dalam Node.js_node.js

Artikel berkaitan

Lihat lagi