2010-09-09 89 views
40

Por ejemplo, puedo tomar este script (from mozilla tutorial):¿Se puede mezclar el JavaScript común con 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> 

y mezclar con este JavaScript document.ready de jQuery en lugar de confiar en proceso de carga?

+67

jQuery * es * el JavaScript habitual. – Gumbo

+9

A veces es incluso mejor usar construcciones de JavaScript "simples", p. si desea acceder a los atributos estándar de los elementos DOM. Las personas que son nuevas en jQuery tienden a "usarlo en exceso". jQuery es genial, pero es solo una herramienta que te brinda algunas funciones útiles a mano. La pregunta no es * jQuery o JavaScript * sino * JavaScript con o sin la ayuda de jQuery *. –

+1

no es culpa de jquery si las personas no entienden el idioma en sí. – mikeycgto

Respuesta

74

Sí, son ambos JavaScript, puede usar las funciones que sean apropiadas para la situación.

En este caso sólo se puede poner el código en un manejador document.ready, así:

$(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

Por supuesto que puede, pero ¿por qué hacer esto? Debe incluir un par de etiquetas <script></script> que enlazan a la página web de jQuery, es decir .: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> . A continuación, se le cargue el todo objeto jQuery sólo para usar una sola función, y debido a jQuery es una biblioteca JavaScript que tendrá tiempo para la computadora para cargar, se ejecutar más lento que acaba de JavaScript.

+3

Buen punto: para cosas pequeñas, la biblioteca de jQuery puede ser exagerada. Tan pronto como entras en algo más complejo que "ocultar esto al hacer clic", jQuery te ahorra (como desarrollador) bastantes problemas: simplifica el trabajo con los elementos y proporciona una compatibilidad básica entre navegadores (incluso para IE6) antes de jQ , esta fue una fuente de frustración sin fin). En 17 KB, no es realmente un cerdo de banda ancha. Además, si carga la biblioteca de Google, es posible que las personas ya la tengan cargada, por lo que no es necesario realizar ninguna solicitud adicional: http://encosia.com/2008/12/10/3-reasons-why-you-should-let- google-host-jquery-for-you/ – Piskvor

4

¿Qué hace MichalBE bajando la votación? Tiene razón: usar jQuery (o cualquier biblioteca) solo para activar una función en la carga de la página es excesivo, lo que puede costarle a la gente dinero en conexiones móviles y ralentizar la experiencia del usuario. Si el creador original no se quiere utilizar proceso de carga en el cuerpo de la etiqueta (y él es del todo correcto no), puede añadir este después del sorteo() Función:

if (draw) window.onload = draw; 

O esto, by Simon Willison, si quieres más de una función que se ejecutará:

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

Ese tipo de pirateo de nivel inferior alrededor del DOM, jugando con los manipuladores en línea * y las peculiaridades del navegador cruzadas *, es precisamente la razón por la que nació jQuery. Sí, es posible, y sí, debería (como desarrollador de JS) saber qué hace y cómo; pero el objetivo de jQuery es proporcionar una abstracción conveniente por encima de eso. Mientras que jQ es excesivo para el primer ejemplo, ya es perfectamente apropiado en el segundo. – Piskvor

+3

OK, pero todavía creo que es incorrecto hacer que el usuario descargue una biblioteca completa solo para agregar una función de carga, por muy buena que sea la abstracción. – tagawa

+3

Piskvor - Voy a demandar a tu trasero por hacerme vomitar un poco en mi boca. –

3

O ninguna función load de JavaScript en todo ...

<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

Puedes, pero estar al tanto de los tipos de retorno con funciones de jQuery. jQuery no siempre usará el mismo tipo de objeto de JavaScript, aunque generalmente devolverán subclases de lo que esperaría que devolviera una función de JavaScript similar.

0

Usted podría utilizar

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

Tenga en cuenta que después de que el código, el resto de su código tendrá que ser jQuery creo

+1

¿Acaba después de ese último corchete? – johnny

+0

quizás ..................... –

0

Es posible utilizar tanto jQuery y JavaScript en tu página web Lo importante es la

método Jquery conseguirá inicia cuando se carga la página (es decir,) cuando se carga DOM

El problema general enfrentado al crear elementos dinámicos y tratando de aplicar las funciones Jquery es que no funcionará, ya que los métodos de Jquery se incluyen en document.ready() o $ (function()) ..se invocará solo una vez (es decir,) en el momento de la carga de la página.

los elementos dinámicos creados y aplicados a la función de jQuery no funciona ya que estos elementos no están disponibles en el momento de la carga.

Para resolver esto, asegúrese de escribir los métodos de Jquery dentro del método que utiliza para crear un nuevo elemento.

Cuestiones relacionadas