Javascript crudo en lugar de jquery (ejemplo a continuación)

esta es mi primera pregunta aquí. Tengo el siguiente código jquery:Javascript crudo en lugar de jquery (ejemplo a continuación)

$(document).ready(function(){ 
    $("a").click(function(){ 
     $(this).parent("li").css({textDecoration: "line-through"}); 
     return false; 
    }); 
});

que funciona bien. Ataca a través del li padre de cualquier ancla clicada (hay muchos anclajes y listas en el html, no solo uno). Pero solo quiero esta funcionalidad, nada más. ¿No es esto excesivo incluir toda la biblioteca jquery?

Unfortunateley no sé muy bien javascript en bruto, alguien puede convertir esto para mí? Agradecería.

EDITAR: ¡Guau, estoy sorprendido de la velocidad y la calidad de las respuestas! Entonces, antes que nada, ¡MUCHAS GRACIAS a todos ustedes! Iré por la solución de jonathon (edit2: roland) o simplemente incluiré jquery después de todo. ¡Gracias de nuevo!

Fuente

2010-02-09 fractalbit

"Si no está roto ..." Puede convertirlo a Javascript puro, pero corre el riesgo de romper la compatibilidad entre navegadores. –

Intentaría recorrer el código JS y ver qué funciones jQuery se usan para ese script, y eliminar todo lo demás. – Dor

@Robert Harvey: en términos generales, sí, este es un buen consejo. Pero lo que el OP intenta lograr puede resolverse de una manera bastante sencilla e independiente del navegador. (suponiendo la implementación básica de DOM) @Dor: si el OP no está bien versado en javascript, recorrer jQuery no lo va a hacer feliz. ¿Tuviste? Quiero decir, sin irrespeto con la intención de jQuery: es una de las mejores libs js en el planeta, pero no lo recomendaría como un ejercicio para principiantes para analizar ese código. –

Lo siguiente lo conseguirá de forma independiente del navegador.

<html> 

    <body onload="loaded()"> 
     ...content goes here.... 
     <script> 
      function linkClickHandler(){ 
       var parentNode = this.parentNode; 
       if(parentNode.tagName.toLowerCase()==="li"){ 
        parentNode.style.textDecoration = "line-through"; 
       } 
       return false; 
      } 

      function loaded(){ 
       for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){ 
        links[i].onclick = linkClickHandler; 
       } 
      } 
     </script> 
    </body> 
</html>

Fuente

2010-02-09 21:07:55

¿El método jQuery $ (documento) .ready() no es diferente de window.onload()? – Dor

Dor: quizás. Creo que para lo que el OP intenta lograr, esta vieja solución de skool funciona bien. –

El evento jQuery 'ready' es bastante complejo: utiliza el evento' DOMContentLoaded' donde está disponible (confiable), un detestable pirateo de lectura de propiedades en IE (no confiable), y en todos lados vuelve a 'onload' (confiable , pero luego disparar). Si desea ejecutar contenido cargado, el único método 100% confiable (ya sea jQuery o JavaScript sin procesar) es poner el elemento disparador '

¿No es esto una exageración incluir la biblioteca completa de jquery ?

Dígame. Puede servir la biblioteca alojada por Google, que ya puede estar en la memoria caché en el lado del cliente.

En mi opinión, ser constante es la clave. Si está acostumbrado a jQuery, ¿por qué no continuar usándolo? Su código será más fácil de mantener.

Usted puede encontrar uno de mis anteriores preguntas interesantes: When is it acceptable to use jQuery?

Fuente

2010-02-09 21:06:06

+1 por mencionar el uso de CDN – Pharabus

si lo haces a través de JavaScript prima que se va a necesitar para añadir un evento onclick a cada ancla y un identificador a cada li

<ul> 
    <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li> 
</ul>

que es su cambio html

function strikeThrough(id){ 
    var li = document.getElementById(id) 
    li.style. textDecoration = "line-through" 
}

eso es su función javascript

Yo recomendaría que simplemente incluya JQuery para que no tenga que agregar una tonelada de identificadores a su marca

Fuente

2010-02-09 21:06:29 RHicke

No, no necesita atributos de controlador de eventos en línea, puede escribir 'element.onclick = function' desde JavaScript y esto casi siempre es lo mejor que puede hacer. Ciertamente, nunca (nunca) use 'pseudo-URL' javascript: '. – bobince

Si nunca va a hacer más con su sitio web, tal vez sea excesivo. Hacer el equivalente de lo que hace ese corto publicitario de forma cruzada es un dolor de cabeza. Ese es el valor de usar jQuery: escribir algo una vez y tenerlo generalmente funciona sin demasiada molestia. Si crees que los 20 KB adicionales de ancho de banda para los visitantes de tu página son una carga excesiva, entonces comienza a leer los manipuladores de eventos, DOM y CSS.

Dice que no sabe muy bien JS ... ¿heredó este uso de jQuery de otra persona o lo copió de un ejemplo en alguna parte?

Fuente

2010-02-09 21:07:52

parece convertir un simple función de código de jQuery para un código javascript cruda a veces le atrapar con un bicho de cruz navegador, funciona un hincha, y unas posibilidades de que sus necesidades van a crecer en el futuro.

El uso de jQuery para tales funciones no es exagerado, confía en mí. Nunca más sabrá qué otra característica de jQuery aseado que pueda necesitar en el futuro. jQuery es lo suficientemente pequeño en forma minificada, no haría diferencias para una carga de página.

Fuente

2010-02-09 21:09:45

Enfoque no jQuery:

[...your html...] 

    <script type="text/javascript"> 
     var anchors = document.getElementsByTagName("a"); 
     var numAnchors = anchors.length; 
     for(var i = 0; i < numAnchors; i++) { 
      var anchor = anchors[i]; 
      anchor.onclick = function() {   
       var parentEl = this.parentNode; 
       if(parentEl.tagName.toLowerCase() == "li"){ 
        parentEl.style.textDecoration = "line-through"; 
       } 
       return false; 
      } 
     } 
    </script> 
</body>

Usted ni siquiera necesita un controlador onLoad para la carga de la página cuando se agrega a la parte inferior del documento.

Fuente

2010-02-09 21:48:12 Alex

Cuestiones relacionadas

Javascript crudo en lugar de jquery (ejemplo a continuación)

Respuesta

Cuestiones relacionadas