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

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

WBOY

Lepaskan： 2016-05-16 16:39:37

asal

1584 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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");
    });

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.