2010-09-09 14 views
40

Na przykład, mogę wziąć tego skryptu (from mozilla tutorial):Czy zwykły JavaScript można mieszać z jQuery?

<html> 
<head> 
    <script type="application/javascript"> 
    function draw() { 
     var canvas = document.getElementById("canvas"); 
     if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50); 
     } 
    } 
    </script> 
</head> 
<body onload="draw();"> 
    <canvas id="canvas" width="150" height="150"></canvas> 
</body> 
</html> 

i wymieszać to z document.ready JavaScript jQuery zamiast opierania się na onload?

+67

jQuery * to * regularny JavaScript. – Gumbo

+9

Czasami lepiej jest użyć "prostych" konstrukcji JavaScript, np. jeśli chcesz uzyskać dostęp do standardowych atrybutów elementów DOM. Osoby, które są nowe w jQuery, często "nadużywają" go. jQuery jest świetny, ale to tylko narzędzie, które daje Ci kilka użytecznych funkcji. Pytanie nie jest * jQuery lub JavaScript * ale * JavaScript z lub bez pomocy jQuery *. –

+1

to nie jest wina jQuery, jeśli ludzie nie rozumieją samego języka. – mikeycgto

Odpowiedz

74

Tak, są one zarówno JavaScript, możesz użyć dowolnej funkcji odpowiedniej do sytuacji.

W tym przypadku można po prostu umieścić kod w document.ready obsługi, tak:

$(function() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 

    ctx.fillStyle = "rgb(200,0,0)"; 
    ctx.fillRect (10, 10, 55, 50); 

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
    ctx.fillRect (30, 30, 55, 50); 
    } 
}); 
2

Oczywiście można, ale po co to robić? Musisz dołączyć parę tagów linkujących do strony internetowej jQuery, tj .: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> . Wtedy załadować cały obiekt jQuery tylko do korzystania jedną pojedynczą funkcję, a ponieważ jQuery to biblioteka JavaScript, która zajmie czas do komputera, aby przesłać, to wykonać wolniej niż tylko JavaScript.

+3

Dobra rada - w przypadku małych rzeczy biblioteka jQuery może być przesadna. Jak tylko wejdziesz w coś bardziej złożonego niż "ukryj to na kliknięcie", jQuery oszczędza (jako programista) sporo kłopotów - upraszcza pracę z elementami i zapewnia podstawową zgodność z różnymi przeglądarkami (nawet dla IE6 - przed jQ , było to źródłem niekończącej się frustracji). W wieku 17KB, to naprawdę nie jest bandwith hog. Co więcej, jeśli załadujesz bibliotekę z Google, ludzie mogą już ją załadować, więc nie jest wymagana dodatkowa prośba: http://encosia.com/2008/12/10/3-reasons-why-you-should-let- google-host-jquery-for-you/ – Piskvor

4

Dlaczego MichalBE jest cenzurowany? Ma rację - używanie jQuery (lub dowolnej biblioteki) do uruchomienia funkcji po załadowaniu strony jest przesadzone, potencjalnie kosztując ludzi pieniądze na połączeniach mobilnych i spowalniając korzystanie z Internetu. Jeśli oryginalny plakat nie chce używać onload w znaczniku ciała (i nie do końca prawda), dodać to po losowaniu() Funkcja:

if (draw) window.onload = draw; 

albo to, by Simon Willison, jeśli chcesz więcej niż jedna funkcja do wykonania:

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } else { 
     window.onload = function() { 
      if (oldonload) { 
       oldonload(); 
      } 
      func(); 
     } 
    } 
} 
+0

Ten rodzaj hakowania na niższym poziomie wokół DOM, mieszanie się z wbudowanymi programami obsługi, * i dziwaczkami w tej przeglądarce * jest właśnie powodem narodzin jQuery. Tak, jest to możliwe, i tak, powinieneś (jako programista JS) wiedzieć, co robi i jak; ale celem jQuery jest zapewnienie wygodnej abstrakcji powyżej. Podczas gdy jQ jest przesadzone dla pierwszego przykładu, jest już doskonale odpowiednie w drugim. – Piskvor

+3

OK, ale nadal uważam, że to niewłaściwe, aby użytkownik pobierał całą bibliotekę tylko po to, aby dodać funkcję ładowania, niezależnie od dobrej abstrakcji. – tagawa

+3

Piskvor - Zamierzam oskarżyć twój tyłek o to, że zmusił mnie do trochę wepchnięcia w moje usta. –

3

lub nie funkcji obciążenia JavaScript w ogóle ...

<html> 
<head></head> 
<body> 
    <canvas id="canvas" width="150" height="150"></canvas> 
</body> 
<script type="text/javascript"> 
    var draw = function() { 
     var canvas = document.getElementById("canvas"); 
     if (canvas.getContext) { 
      var ctx = canvas.getContext("2d"); 

      ctx.fillStyle = "rgb(200,0,0)"; 
      ctx.fillRect (10, 10, 55, 50); 

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
      ctx.fillRect (30, 30, 55, 50); 
     } 
    } 
    draw(); 

    //or self executing... 

    (function(){ 
     var canvas = document.getElementById("canvas"); 
     if (canvas.getContext) { 
      var ctx = canvas.getContext("2d"); 

      ctx.fillStyle = "rgb(200,0,0)"; 
      ctx.fillRect (50, 50, 55, 50); 

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
      ctx.fillRect (70, 70, 55, 50); 
     } 
    })(); 
</script> 
</html> 
0

można, ale zdawać sobie sprawę z rodzajów wrócić z funkcji jQuery. jQuery nie zawsze będzie używać dokładnie tego samego typu obiektu JavaScript, chociaż generalnie zwróci podklasy o wartościach oczekiwanych od podobnej funkcji JavaScript.

0

Można użyć

jQuery(document).ready(function(){} 

pamiętać, że po kodzie, reszta kodu będą musiały być jQuery myślę

+1

Po prostu kończy się po ostatnim nawiasie? – johnny

+0

może ..................... –

0

Możliwe jest stosowanie zarówno jQuery i JavaScript na twojej stronie. Ważną rzeczą jest

metoda Jquery dostanie zainicjowane po załadowaniu strony (tj), gdy DOM jest ładowany

Ogólnym problemem przy tworzeniu elementów dynamicznych i próbuje zastosować funkcje jQuery jest to, że nie będzie działał tak, jak metody Jquery zostaną umieszczone w document.ready() lub $ (function()) ..zostanie wywołane tylko raz (tj.) w momencie ładowania strony.

Dynamiczne elementy stworzone i stosowane funkcja jQuery będzie nie działać jako elementy te nie są dostępne w momencie załadunku.

Aby rozwiązać ten problem, należy napisać metody Jquery w ramach metody, której używa się do utworzenia nowego elementu.

Powiązane problemy