JQuery 01-Formas de Uso y Selectores

GUÍA DE PRÁCTICAS 01
jQuery 01: FORMAS DE USO
1. Objetivos: 2. Recursos y materiales:

• Conocerlas formas de uso de sentencias
• Computador con conexión a internet.
jQuery.
• Herramientas web.
• Utilizar los selectores en jQuery.
3. PROCEDIMIENTOS:
1. FORMA DE INCLUIR jQUERY EN UN ARCHIVO HTML
1.1 Forma de incluir 01: Mediante un CDN (content delivery network : red de
distribución de contenidos).
En un buscador coloca “jquery CDN” selecciona el que coincida con el texto, obtendrás
una interface como la que se muestra en la figura
Selecciona la última versión y la opción uncompressed o minified
CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

Realiza la estructura siguiente en la unidad C: y genera el archivo index.html.
Copia el script en el archivo index.html, como muestra la figura:
1.2 Forma de uso 02: Copiar el archivo jquery.js
En la barra de direcciones de un navegador web, escribe jquery.com y selecciona la

opción:
Download JQuery
V 3.3.1

Selecciona la opción comprimida

Se descarga el archivo con nombre jquery-3.3.1.min.js, el cual lo ubicarás dentro de la
carpeta js.
En el archive index.html, modifica el código a lo siguiente: Luego ejecuta en un navegador.
2. SELECCIÓN DE ELEMENTOS HTML
Utilizaremos en esta sección el uso de selectores mediante el archivo externo script.js. en donde se
invocará a sentencias con jquery.
2.1 Selección por ID.
La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id es:
$("#nombre del id")
Para el ejemplo: En el HTML, creamos un botón que al hacer click sobre él, se muestra el
mensaje ALERT, ”Se presionó el botón”
En index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
En script.js se implementa el código con jquery

var x;
x=$(document);
x.ready(inicializar);
function inicializar(){
var x;
x=$("#boton1");
x.click(presionar)
}
function presionar(){
alert("Se presionó el botón");
}
Podemos reemplazar el código anterior en forma simplificada como:

$(document).ready(function(){
$("#boton1").click(function(evento){
alert("Se presionó el botón");
});
});
2.2 Selección por clase
Mediante nombre de clase podemos acceder a todos los elementos utilizando la función $:
$(".nombre de clase");
En script.js
$("#boton1").click(function(evento){
$(".resaltado").css("background-color","yellow");
});
});

En index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Cuales de los siguientes lenguajes son orientados a objetos:
<span class="resaltado">Java</span>, VB6, <span class="resaltado">C++</span>,C,
<span class="resaltado">C#</span>, Cobol ?</p>
<input type="button" id="boton1" value="ver resultado">
</body>
</html>
2.3 Selección por etiqueta
Mediante etiqueta podemos acceder a todos los elementos utilizando la función $:
$("etiqueta ");
En script.js
$("h1").click(function(evento){
$("h1").css("font-size","12px");
});
});
En index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Soy el titulo 1</h1>
<p> soy un parrafo</p>

</body>
</html>
En script.js modifica la línea que llama a la etiqueta “h1” por “this”, compara el resultado
$("h1").css("font-size","12px");
Ahora
$(this).css("font-size","12px");
$(this), al seleccionar usando this lo que se hace es seleccionar al

elemento que activo el evento.
2.4 Selección por atributo
En script.js
$("#uno").click(function(evento){
$("a[title]" ).css( "border","1px solid red" );
});
$("#dos").click(function(evento){
$("a[title='Ejemplo']" ).css( "border","1px solid blue" );
});
$("#tres").click(function(evento){
$("a[title!='Ejemplo']" ).css( "border","1px solid green" );
});
$("#cuatro").click(function(evento){
$("a[title^='Ejemplo']" ).css( "border","1px solid yellow" );
});
$("#cinco").click(function(evento){
$("a[title$='Ejemplo']" ).css( "border","1px solid lime" );
});
$("#seis").click(function(evento){
$("a[title*='Ejemplo']" ).css( "border","1px solid aqua" );
});
$("#siete").click(function(evento){
$("a[title='Ejemplo'][id*='ejemplo']" ).css( "border","1px solid purple" );
});
});
En index.html
<!DOCTYPE html>
<html>
<head>

<title></title>
</head>
<body>
<p id="uno">Seleccionar enlaces con title</p>
<p id="dos">Seleccionar enlaces con title=Ejemplo</p>
<p id="tres">Seleccionar enlaces con title distinto de Ejemplo</p>
<p id="cuatro">Seleccionar enlaces con title comienza por Ejemplo</p>
<p id="cinco">Seleccionar enlaces con title termina por Ejemplo</p>
<p id="seis">Seleccionar enlaces con title contiene Ejemplo</p>
<p id="siete">Combinacion de Selectores de atributos: que tenga title=Ejemplo </p>
<br><br>
<a href="">Enlace 1</a><br>
<a href="" title="Enlace 1">Enlace 2: title = Enlace 1</a><br>
<a href="" title="Ejemplo" id="idejemplo-prueba">Enlace 3: title= Ejemplo, id=idejemplo-
prueba</a><br>
<a href="" title="otro Ejemplo">Enlace 7: title=otro Ejemplo</a><br>
<a href="" title="Ejemplos">Enlace 9: title = Ejemplos</a><br>
<a href="" title="Ejemplo final">Enlace 10: title = Ejemplo final</a><br>
</body>
</html>
2.5 Selección múltiple
En index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;

}
</style>
</head>
<body>
<input type="button" id="boton" value="ver resultado">
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
</body>
</html>
En script.js
$("#boton").click(function(evento){
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
});
});
3. PARA PRACTICAR
En base al código html siguiente, realiza que al presionar el botón “Verifica la respuesta”, se pinte
la opcion correcta de color verde
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/ jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">

<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body>
<h1>Cuestionario de jQuery</h1>
<form id="form">
<label>
Quien invento jQuery?<br><br>
<form>

<label id="uno"><input type="radio" name="preg" value="brendan"
> Brendan Eich</label><br>
<label id="dos"><input type="radio" name="preg" value="john">
John Resig</label><br>
<label id="tres"><input type="radio" name="preg" value="guido">
Guido van Rossum </label> <br>
<label id="cuatro"><input type="radio" name="preg" value="tim">
Tim Berners-Lee </label><br>
</form>
</label> <br><br>
<button id="boton">Verifica la respuesta</button>
</form>
</body>
</html>

JQuery 01-Formas de Uso y Selectores

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery 01-Formas de Uso y Selectores

Uploaded by

Copyright:

Available Formats

GUÍA DE PRÁCTICAS 01

jQuery 01: FORMAS DE USO

1. Objetivos: 2. Recursos y materiales:

1. FORMA DE INCLUIR jQUERY EN UN ARCHIVO HTML

Selecciona la última versión y la opción uncompressed o minified

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

1.2 Forma de uso 02: Copiar el archivo jquery.js

En la barra de direcciones de un navegador web, escribe jquery.com y selecciona la

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

En el archive index.html, modifica el código a lo siguiente: Luego ejecuta en un navegador.

2. SELECCIÓN DE ELEMENTOS HTML

2.1 Selección por ID.

La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id es:

$("#nombre del id")

En script.js se implementa el código con jquery

Podemos reemplazar el código anterior en forma simplificada como:

2.2 Selección por clase

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

2.3 Selección por etiqueta

Mediante etiqueta podemos acceder a todos los elementos utilizando la función $:

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

$(this), al seleccionar usando this lo que se hace es seleccionar al

2.4 Selección por atributo

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

2.5 Selección múltiple

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

CURSO JQUERY ING. MSC. EDELFRÉ FLORES VELÁSQUEZ

You might also like