“Conocimientos Programación>JavaScript Programación

Cómo usar jQuery para insertar un ancla

2015/4/10
Si usted está pensando en trabajar con Javascript para su próximo proyecto web , jQuery hará las cosas mucho más fácil para usted. jQuery es una librería Javascript que es compatible con varios navegadores y simplifica el proceso de creación de aplicaciones Javascript . Una de las ventajas del uso de Javascript es la posibilidad de insertar contenido dinámico en su página Web. Usted puede seleccionar los elementos del modelo de objetos de documento ( DOM) con una función de selector DOM llamada " chisporroteo ". JQuery también simplifica el proceso de creación e inserción de elementos de página, como anclas , con sus funciones incorporadas " anexar de jQuery () "y " anteponer (). " cosas que necesitará Editor de texto
Ver Más instrucciones
1

Crear un archivo vacío con la extensión" , . html " en tu editor de texto. Vamos a crear una página HTML básico que muestra cómo insertar un ancla en un par de

< /div > etiquetas HTML usando jQuery.
2

Copia el siguiente código en el archivo que acaba de crear . Esto creará la estructura básica en HTML e importará jQuery.

Html head Hello World < /title> < guión type = 'text /javascript ' <br> 3 <p> Crear una par vacío de <div> < /div> Las etiquetas de su página con un identificador único ; " . decir_hola " para nuestro ejemplo , vamos a utilizar aquí es donde estamos insertará nuestros anclajes. Puede hacerlo insertando el siguiente código entre la etiqueta < /body> <body> : . <br> <p> <div Id="say_hello"> < /div > <br> <br> 4 <p> Copie el código siguiente en la sección head de la página HTML. Nosotros vamos a usar bien el append () o prepend () de la biblioteca jQuery para insertar dos anclas en el div que acabamos de crear . <br> <p> Messenger type='text/javascript'> //<! [ CDATA [$ (function ( ) {$ ('# decir_hola ' ) . append ( "<a href=\\"www.google.com\\"> Hola ! < /a >") $ ('# decir_hola ' ) . prepend ( "<a href=\\"www.bing.com\\"> Bye Bye </a> ")} ) ;//] ]> < ;/script> <br> <p> ahora debe tener un div en su página con dos anclajes insertados en ella , uno con el ancla de texto "Hello ! " y una con el ancla de texto " Bye Bye " La primera anclaje se adjuntó a la div , y el segundo se antepone a la div . <br> <br> <div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div> </div> <div class=contentpage> <div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-que-todos-los-botones-de-radio-Falso-en-JavaScript-.html' >Cómo hacer que todos los botones de radio Falso en JavaScript </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-marcador-en-un-API-de-Google-Maps-.html' >Cómo cambiar el marcador en un API de Google Maps </a> </div> </div> <dl class=xgc> <dt><span>JavaScript Programación</span></dt> <dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ejecutar-código-JavaScript-en-una-página-Web-.html">Cómo ejecutar código JavaScript en una página Web </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-los-colores-de-fuente-con-Javascript-.html">Cómo cambiar los colores de fuente con Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Ambos-SRC-y-en-línea-en-JavaScript-.html">Cómo utilizar Ambos SRC y en línea en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/OnMouseOver-Styles-.html">OnMouseOver Styles </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-la-clase-de-estilo-con-JavaScript-.html">Cómo cambiar la clase de estilo con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-elementos-a-un-cuadro-combinado-con-JavaScript-.html">Cómo agregar elementos a un cuadro combinado con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-OOP-JavaScript-.html">Cómo crear OOP JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-galería-de-fotos-con-Siguiente-y-Anterior-Enlaces-y-Ampliación-de-imagen-Pop---Ups-.html">Cómo crear una galería de fotos con Siguiente y Anterior Enlaces y Ampliación de imagen Pop - Ups </a></dd> </dl> </div> <!--right--> <div class=rightmain> <div class=esrightlist> <div class=e1>Los últimos artículos de equipo</div> <ul> <li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-vs-Applets-Java-Robusto-.html" >JavaScript vs Applets Java Robusto </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-valores-de-una-lista-desplegable-en-Javascript-on-Post-.html" >Cómo obtener valores de una lista desplegable en Javascript on Post </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Efectos-secuenciales-en-jQuery-.html" >Efectos secuenciales en jQuery </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-borrar-atributos-de-elemento-.html" >Cómo borrar atributos de elemento </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-escribir-Usando-Javascript-.html" >Cómo escribir Usando Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-elementos-con-JavaScript-Client-Side-.html" >Cómo crear elementos con JavaScript Client Side </a> </li> </ul> </div> <div class=esrightlist> <div class=e1>Artículos de la popular computadora</div> <ul> <li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Tutorial-de-menús-desplegables-en-JavaScript-.html" >Tutorial de menús desplegables en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-dar-vuelta-a-un-JavaScript-externo-a-interno-.html" >Cómo dar vuelta a un JavaScript externo a interno </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-bloquear-Ie6-.html" >Cómo bloquear Ie6 </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-Javascript-depuración-.html" >Cómo habilitar Javascript depuración </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-Abrir-un-formulario-en-Java-Script-.html" >Cómo Abrir un formulario en Java Script </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-dividir-una-cadena-en-JavaScript-.html" >Cómo dividir una cadena en JavaScript </a></li> </ul> </div> <div class="esrightad"> <script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script> </div> <div class=esrightlist> <div class=e1>Más categorías</div> <ul> <li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li> <li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li> <li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li> </ul> </div> </div> <!--right end--> <div class="cl"></div> </div> <div class=esfoot> <div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div> </div> </body> </html>