SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
© 2015, Informática
JQuery
Tema I - Introducción
Renny Batista
Introducción
• jQuery es una biblioteca de JavaScript,
creada inicialmente por John Resig, que
permite simplificar la manera de interactuar
con los documentos HTML, manipular el árbol
DOM, manejar eventos, desarrollar
animaciones y agregar interacción con la
técnica AJAX a páginas web.
Abril, 2015 # 2
Introducción
• Hay varias formas de iniciar el uso de jQuery en su
sitio web. Usted puede:
 Descargar la librería jQuery de jQuery.com
 Incluir jQuery desde una CDN (Content Delivery
Network), como Google
Abril, 2015 # 3
Introducción
• Descarga de jQuery
• Hay dos versiones de jQuery disponibles para
descargar:
 Versión de producción - esto es para su sitio en línea,
ya que se ha minimizada y comprimida
 Versión de desarrollo - esto es para pruebas y
desarrollo (código sin comprimir y legible)
• Ambas versiones se pueden descargar desde
jQuery.com.
Abril, 2015 # 4
Introducción
• La librería jQuery es un solo archivo de JavaScript, y
hace referencia a ella con la etiqueta HTML <script>
(nótese que la etiqueta <script> debe estar dentro
de la sección <head>):
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Abril, 2015 # 5
Introducción
• Si no desea descargar y alojar jQuery, puede incluir
desde un CDN (Content Delivery Network).
• Tanto Google como Microsoft tienen alojado el
jQuery.
• Para utilizar jQuery de Google utilice :
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jque
ry/1.11.2/jquery.min.js"></script>
</head>
Abril, 2015 # 6
Sintaxis de jQuery
• La sintaxis de jQuery sido elaborado expresamente
para la selección de los elementos HTML y realizar
alguna acción sobre los elementos.
 Sintaxis básica es: $(selector).action()
 Un signo $ para definir/acceder jQuery
 A (selector) para "consulta (o encontrar)"
elementos HTML
 Una acción jQuery() para realizarse sobre los
elementos
Abril, 2015 # 7
Sintaxis de jQuery
• Ejemplos:
 $(this).hide() - Oculta el elemento actual.
 $("p").hide() - Oculta todos los elementos <p>
 $(".test").hide() - Oculta todos los elementos
con class = "test".
 $("# test").hide() - Oculta el elemento con id
= "test"
Abril, 2015 # 8
El evento $(document).ready()
• No es posible interactuar de forma segura con el
contenido de una página hasta que el documento no se
encuentre preparado para su manipulación. jQuery
permite detectar dicho estado a través de la declaración
$(document).ready() de forma tal que el bloque se
ejecutará sólo una vez que la página este disponible.
$(document).ready(function() {
console.log('el documento está preparado');
});
Abril, 2015 # 9
Selección de elementos
• El concepto más básico de jQuery es el de "seleccionar
algunos elementos y realizar acciones con ellos". La
biblioteca soporta gran parte de los selectores CSS3 y
varios más no estandarizados.
• En api.jquery.com/category/selectors se puede encontrar
una completa referencia sobre los selectores de la
biblioteca.
• Puede seleccionar todos <p> elementos de una página
como esta:
$("p")
Abril, 2015 # 10
Selección de elementos
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Encabezado</h2>
<p>Este es un parrafo.</p>
<p>Este es otro parrafo.</p>
<button>Click aqui</button>
</body>
</html>
Abril, 2015 # 11
Selección de elementos: #id
• El selector jQuery #id utiliza el atributo id de una etiqueta
HTML para encontrar el elemento específico.
• Un id debe ser único dentro de una página, por lo que
debe utilizar el selector #id cuando se quiere encontrar un
único elemento.
• Para encontrar un elemento con un id específico, escriba
una almohadilla, seguido por el id del elemento HTML:
$("#test")
Abril, 2015 # 12
Selección de elementos: #id
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>Encabezado</h2>
<p>Primer parrafo.</p>
<p id="test">Segundo Parrafo.</p>
<button>Click Aqui</button>
</body>
</html>
Abril, 2015 # 13
Selección de elementos: .class
• El selector .class de jQuery encuentra los elementos con
una clase específica.
• Para encontrar los elementos con una clase específica,
escriba un carácter de punto, seguido del nombre de la
clase:
Ejemplo: $(".test")
• Cuando un usuario hace clic en un botón, los elementos
con class = "test" se ocultarán:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Abril, 2015 # 14
Selección de elementos
Abril, 2015 # 15
Sintaxis Descripción
$("*") Selecciona todos los elementos
$(this) Selecciona el elemento HTML actual
$("p.intro") Selecciona todos los elementos <p> con class="intro"
$("p:first") Selecciona el primer elemento <p>
$("ul li:first") Selecciona el primer elemento <li> del primer <ul>
$("ul li:first-child") Selecciona el primer elemento <li> de cada <ul>
$("[href]") Selecciona todos los elementos con atributo href
$("a[target='_blank']") Selecciona todos los elementos <a> con un atributo target
con valor igual a "_blank"
$("a[target!='_blank']") Selecciona todos los elementos <a> con un atributo target
cuyo valor no sea igual a "_blank"
$(":button") Selecciona todos los elementos <button> y elementos
<input> de tipo="button"
$("tr:even") Selecciona todos los elementos <tr> pares
$("tr:odd") Selecciona todos los elementos <tr> impares
Los eventos
• Un evento representa el preciso momento en que sucede
algo.
• Ejemplos:
 Mover el ratón encima de un elemento
 Seleccionar un botón de radio
 Al hacer clic en un elemento
• El término “disparar" se utiliza a menudo con los eventos.
• Ejemplo: "El evento keypress dispara el momento en que
se pulsa una tecla".
Abril, 2015 # 16
Los eventos
• Aquí hay algunos eventos DOM comunes:
Abril, 2015 # 17
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Los eventos
• En jQuery, la mayoría de los eventos DOM tienen un
método jQuery equivalente.
• Para asignar un evento click a todos los párrafos de una
página, usted puede hacer esto:
$("p").click();
• El siguiente paso es definir lo que debería suceder cuando
se activa el evento. Se debe pasar una función para el
evento:
$("p").click(function(){
// action goes here!!
});
Abril, 2015 # 18
Los eventos mas comunes
• El método $(document).ready() nos permite ejecutar
una función cuando el documento se ha cargado
completamente.
• El método click() atribuye una función de controlador
de eventos para un elemento HTML. La función se ejecuta
cuando el usuario hace click en el elemento HTML.
• El siguiente ejemplo dice: Cuando un evento click se
desencadena en un elemento <p>; ocultar el actual
elemento <p>:
$("p").click(function(){
$(this).hide();
});
Abril, 2015 # 19
Los eventos mas comunes
• El método dblclick(). La función se ejecuta cuando el usuario
hace doble clic en el elemento HTML:
$("p").dblclick(function(){
$(this).hide();
});
• El método mouseenter(). La función se ejecuta cuando el
puntero del ratón entra en el elemento HTML:
$("#p1").mouseenter(function(){
alert("Entraste al parrafo..!");
});
• El método mousemove(). La función se ejecuta cuando el
puntero del ratón sale del elemento HTML:
$("#p1").mouseleave(function(){
alert("Adios! Dejaste el parrafo..!");
});
Abril, 2015 # 20
Los eventos mas comunes
• El método mousedown(). La función se ejecuta cuando se
pulsa el botón izquierdo del ratón, mientras que el ratón
está sobre el elemento HTML:
$("#p1").mousedown(function(){
alert("El mouse bajo desde el parrafo!");
});
• El método mouseup(). La función se ejecuta cuando se
suelta el botón izquierdo del ratón, mientras que el ratón
está sobre el elemento HTML:
$("#p1").mouseup(function(){
alert("El mouse subio desde el parrafo!");
});
Abril, 2015 # 21
Los eventos mas comunes
• El método hover() realiza dos funciones y es una
combinación de los métodos mouseenter() y
mouseleave().
• La primera función se ejecuta cuando el ratón entra en el
elemento HTML, y la segunda función se ejecuta cuando
el ratón sale del elemento HTML:
$("#p1").hover(function(){
alert("Entraste al parrafo..!");
},
function(){
alert("Adios! Dejaste el parrafo..!");
});
Abril, 2015 # 22
Los eventos mas comunes
• El método de focus() concede una función de
controlador de eventos para un campo del formulario
HTML. La función se ejecuta cuando el campo de
formulario obtiene el enfoque:
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
Abril, 2015 # 23
Los eventos mas comunes
• El método blur() concede una función de controlador
de eventos para un campo en un formulario HTML. La
función se ejecuta cuando el campo del formulario
pierde el enfoque:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/
jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#555555");
});
});
</script>
Abril, 2015 # 24
Los eventos mas comunes
• El método on() concede uno o más controladores de
eventos para los elementos seleccionados.
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
Abril, 2015 # 25
Bibliografías
Eguíluz Pérez, J. Introducción a XHTML.
http://www.librosweb.es 2008. Creative Commons
reconocimiento no comercial - sin obra derivada 3.0
W3Schools a web developers site.
http://www.w3schools.com
Abril, 2015 # 26

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Seminario jquery, html5 y wicket
Seminario jquery, html5 y wicketSeminario jquery, html5 y wicket
Seminario jquery, html5 y wicket
 
Dom JavaScript
Dom JavaScriptDom JavaScript
Dom JavaScript
 
programacion para la web (Dom)
programacion para la web (Dom)programacion para la web (Dom)
programacion para la web (Dom)
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Javascript Básico
Javascript BásicoJavascript Básico
Javascript Básico
 
Introduccion a j query
Introduccion a j queryIntroduccion a j query
Introduccion a j query
 
Guia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt GudeGuia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt Gude
 
Javascript
JavascriptJavascript
Javascript
 
Manejo de eventos
Manejo de eventosManejo de eventos
Manejo de eventos
 
Js
JsJs
Js
 
Web de noticias en Ajax
Web de noticias en AjaxWeb de noticias en Ajax
Web de noticias en Ajax
 
Comunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSPComunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSP
 
Primefaces hotel.. TERMINADO
Primefaces hotel.. TERMINADOPrimefaces hotel.. TERMINADO
Primefaces hotel.. TERMINADO
 
Manual De Ajax En Espanol
Manual De Ajax En EspanolManual De Ajax En Espanol
Manual De Ajax En Espanol
 
Clase 14 bundles útiles
Clase 14 bundles útilesClase 14 bundles útiles
Clase 14 bundles útiles
 
PHP
PHPPHP
PHP
 
Acceso a BBDD mediante un servlet
Acceso a BBDD mediante un servletAcceso a BBDD mediante un servlet
Acceso a BBDD mediante un servlet
 
Introducción a Flask
Introducción a FlaskIntroducción a Flask
Introducción a Flask
 
Acciones JSP
Acciones JSPAcciones JSP
Acciones JSP
 
Introducción a Django
Introducción a DjangoIntroducción a Django
Introducción a Django
 

Destacado

Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Renny Batista
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIRenny Batista
 
Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - FormulariosRenny Batista
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Renny Batista
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSSDinamiclerning
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSSRamón RS
 
Introduccion Css
Introduccion CssIntroduccion Css
Introduccion CssAlf Chee
 
Posicionamiento SEO, SEM, SMO - Clase 4
Posicionamiento SEO, SEM, SMO - Clase 4Posicionamiento SEO, SEM, SMO - Clase 4
Posicionamiento SEO, SEM, SMO - Clase 4Dinamiclerning
 
Posicionamiento SEO, SEM, SMO - Clase 5
Posicionamiento SEO, SEM, SMO - Clase 5Posicionamiento SEO, SEM, SMO - Clase 5
Posicionamiento SEO, SEM, SMO - Clase 5Dinamiclerning
 

Destacado (20)

Css - Tema 2
Css -  Tema 2Css -  Tema 2
Css - Tema 2
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema II
 
05 java excepciones
05 java excepciones05 java excepciones
05 java excepciones
 
Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015
 
SEO
SEOSEO
SEO
 
Wordpress
WordpressWordpress
Wordpress
 
Presentación css
Presentación cssPresentación css
Presentación css
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Introduccion a CSS I
Introduccion a CSS IIntroduccion a CSS I
Introduccion a CSS I
 
03 java poo_parte_2
03 java poo_parte_203 java poo_parte_2
03 java poo_parte_2
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Introduccion Css
Introduccion CssIntroduccion Css
Introduccion Css
 
Posicionamiento SEO, SEM, SMO - Clase 4
Posicionamiento SEO, SEM, SMO - Clase 4Posicionamiento SEO, SEM, SMO - Clase 4
Posicionamiento SEO, SEM, SMO - Clase 4
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
 
Html - Tema 3
Html - Tema 3Html - Tema 3
Html - Tema 3
 
Posicionamiento SEO, SEM, SMO - Clase 5
Posicionamiento SEO, SEM, SMO - Clase 5Posicionamiento SEO, SEM, SMO - Clase 5
Posicionamiento SEO, SEM, SMO - Clase 5
 

Similar a jQuery Introducción (20)

Introduccion a j_query
Introduccion a j_queryIntroduccion a j_query
Introduccion a j_query
 
Jquery
JqueryJquery
Jquery
 
En 20 minutos ... jQuery
En 20 minutos ... jQueryEn 20 minutos ... jQuery
En 20 minutos ... jQuery
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
 
Taller de Jquery
Taller de JqueryTaller de Jquery
Taller de Jquery
 
Clase 12 jQuery basico
Clase 12  jQuery basicoClase 12  jQuery basico
Clase 12 jQuery basico
 
Guiajquery
GuiajqueryGuiajquery
Guiajquery
 
Interfaces Usuario 3
Interfaces Usuario 3Interfaces Usuario 3
Interfaces Usuario 3
 
Unidad 3 AJAX
Unidad 3 AJAX Unidad 3 AJAX
Unidad 3 AJAX
 
Unidad3ajax
Unidad3ajaxUnidad3ajax
Unidad3ajax
 
Phonegap
PhonegapPhonegap
Phonegap
 
Guiajs2
Guiajs2Guiajs2
Guiajs2
 
Jquery
JqueryJquery
Jquery
 
HTML DOM Events
HTML DOM EventsHTML DOM Events
HTML DOM Events
 
J query
J queryJ query
J query
 
Seminario 2+parte wickets
Seminario 2+parte wicketsSeminario 2+parte wickets
Seminario 2+parte wickets
 
HTML5-Aplicaciones web
HTML5-Aplicaciones webHTML5-Aplicaciones web
HTML5-Aplicaciones web
 
Desarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datosDesarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datos
 
Desarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datosDesarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datos
 
jQuery
jQueryjQuery
jQuery
 

Más de Renny Batista

Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasRenny Batista
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del softwareRenny Batista
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de DatosRenny Batista
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetosRenny Batista
 

Más de Renny Batista (7)

Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del software
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de Datos
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetos
 

Último

11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...#LatamDigital
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfDanielaEspitiaHerrer
 
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMLA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMalejandroortizm
 
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfDS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfKAREN553987
 
Módulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMódulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMiguelAngelCifuentes10
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfJohn Muñoz
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11THALIAEUGENIOMAIZ
 
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfElegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfanthonyramos422819
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...delvalleelizabeth400
 
Inteligencias Artificiales: Herramientas de internet.pptx
Inteligencias Artificiales: Herramientas de internet.pptxInteligencias Artificiales: Herramientas de internet.pptx
Inteligencias Artificiales: Herramientas de internet.pptxJuanDiegoMeloLosada
 
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfRESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfcoordinadorprimerode
 
Medios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxMedios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxUniversidad de Bielefeld
 
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...ulisesochoa5
 
Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.JOSE69482
 
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIATALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIAobandopaula444
 

Último (15)

11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdf
 
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMLA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
 
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfDS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
 
Módulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMódulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptx
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdf
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
 
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfElegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...
 
Inteligencias Artificiales: Herramientas de internet.pptx
Inteligencias Artificiales: Herramientas de internet.pptxInteligencias Artificiales: Herramientas de internet.pptx
Inteligencias Artificiales: Herramientas de internet.pptx
 
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdfRESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
RESPUESTAS-Evaluacion-Trimestral-1-Sexto-grado-2023-2024.pdf
 
Medios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxMedios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptx
 
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
 
Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.
 
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIATALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
 

jQuery Introducción

  • 1. © 2015, Informática JQuery Tema I - Introducción Renny Batista
  • 2. Introducción • jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Abril, 2015 # 2
  • 3. Introducción • Hay varias formas de iniciar el uso de jQuery en su sitio web. Usted puede:  Descargar la librería jQuery de jQuery.com  Incluir jQuery desde una CDN (Content Delivery Network), como Google Abril, 2015 # 3
  • 4. Introducción • Descarga de jQuery • Hay dos versiones de jQuery disponibles para descargar:  Versión de producción - esto es para su sitio en línea, ya que se ha minimizada y comprimida  Versión de desarrollo - esto es para pruebas y desarrollo (código sin comprimir y legible) • Ambas versiones se pueden descargar desde jQuery.com. Abril, 2015 # 4
  • 5. Introducción • La librería jQuery es un solo archivo de JavaScript, y hace referencia a ella con la etiqueta HTML <script> (nótese que la etiqueta <script> debe estar dentro de la sección <head>): <head> <script src="jquery-1.11.2.min.js"></script> </head> Abril, 2015 # 5
  • 6. Introducción • Si no desea descargar y alojar jQuery, puede incluir desde un CDN (Content Delivery Network). • Tanto Google como Microsoft tienen alojado el jQuery. • Para utilizar jQuery de Google utilice : <head> <script src="http://ajax.googleapis.com/ajax/libs/jque ry/1.11.2/jquery.min.js"></script> </head> Abril, 2015 # 6
  • 7. Sintaxis de jQuery • La sintaxis de jQuery sido elaborado expresamente para la selección de los elementos HTML y realizar alguna acción sobre los elementos.  Sintaxis básica es: $(selector).action()  Un signo $ para definir/acceder jQuery  A (selector) para "consulta (o encontrar)" elementos HTML  Una acción jQuery() para realizarse sobre los elementos Abril, 2015 # 7
  • 8. Sintaxis de jQuery • Ejemplos:  $(this).hide() - Oculta el elemento actual.  $("p").hide() - Oculta todos los elementos <p>  $(".test").hide() - Oculta todos los elementos con class = "test".  $("# test").hide() - Oculta el elemento con id = "test" Abril, 2015 # 8
  • 9. El evento $(document).ready() • No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible. $(document).ready(function() { console.log('el documento está preparado'); }); Abril, 2015 # 9
  • 10. Selección de elementos • El concepto más básico de jQuery es el de "seleccionar algunos elementos y realizar acciones con ellos". La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. • En api.jquery.com/category/selectors se puede encontrar una completa referencia sobre los selectores de la biblioteca. • Puede seleccionar todos <p> elementos de una página como esta: $("p") Abril, 2015 # 10
  • 11. Selección de elementos <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>Encabezado</h2> <p>Este es un parrafo.</p> <p>Este es otro parrafo.</p> <button>Click aqui</button> </body> </html> Abril, 2015 # 11
  • 12. Selección de elementos: #id • El selector jQuery #id utiliza el atributo id de una etiqueta HTML para encontrar el elemento específico. • Un id debe ser único dentro de una página, por lo que debe utilizar el selector #id cuando se quiere encontrar un único elemento. • Para encontrar un elemento con un id específico, escriba una almohadilla, seguido por el id del elemento HTML: $("#test") Abril, 2015 # 12
  • 13. Selección de elementos: #id <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>Encabezado</h2> <p>Primer parrafo.</p> <p id="test">Segundo Parrafo.</p> <button>Click Aqui</button> </body> </html> Abril, 2015 # 13
  • 14. Selección de elementos: .class • El selector .class de jQuery encuentra los elementos con una clase específica. • Para encontrar los elementos con una clase específica, escriba un carácter de punto, seguido del nombre de la clase: Ejemplo: $(".test") • Cuando un usuario hace clic en un botón, los elementos con class = "test" se ocultarán: $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); Abril, 2015 # 14
  • 15. Selección de elementos Abril, 2015 # 15 Sintaxis Descripción $("*") Selecciona todos los elementos $(this) Selecciona el elemento HTML actual $("p.intro") Selecciona todos los elementos <p> con class="intro" $("p:first") Selecciona el primer elemento <p> $("ul li:first") Selecciona el primer elemento <li> del primer <ul> $("ul li:first-child") Selecciona el primer elemento <li> de cada <ul> $("[href]") Selecciona todos los elementos con atributo href $("a[target='_blank']") Selecciona todos los elementos <a> con un atributo target con valor igual a "_blank" $("a[target!='_blank']") Selecciona todos los elementos <a> con un atributo target cuyo valor no sea igual a "_blank" $(":button") Selecciona todos los elementos <button> y elementos <input> de tipo="button" $("tr:even") Selecciona todos los elementos <tr> pares $("tr:odd") Selecciona todos los elementos <tr> impares
  • 16. Los eventos • Un evento representa el preciso momento en que sucede algo. • Ejemplos:  Mover el ratón encima de un elemento  Seleccionar un botón de radio  Al hacer clic en un elemento • El término “disparar" se utiliza a menudo con los eventos. • Ejemplo: "El evento keypress dispara el momento en que se pulsa una tecla". Abril, 2015 # 16
  • 17. Los eventos • Aquí hay algunos eventos DOM comunes: Abril, 2015 # 17 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload
  • 18. Los eventos • En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente. • Para asignar un evento click a todos los párrafos de una página, usted puede hacer esto: $("p").click(); • El siguiente paso es definir lo que debería suceder cuando se activa el evento. Se debe pasar una función para el evento: $("p").click(function(){ // action goes here!! }); Abril, 2015 # 18
  • 19. Los eventos mas comunes • El método $(document).ready() nos permite ejecutar una función cuando el documento se ha cargado completamente. • El método click() atribuye una función de controlador de eventos para un elemento HTML. La función se ejecuta cuando el usuario hace click en el elemento HTML. • El siguiente ejemplo dice: Cuando un evento click se desencadena en un elemento <p>; ocultar el actual elemento <p>: $("p").click(function(){ $(this).hide(); }); Abril, 2015 # 19
  • 20. Los eventos mas comunes • El método dblclick(). La función se ejecuta cuando el usuario hace doble clic en el elemento HTML: $("p").dblclick(function(){ $(this).hide(); }); • El método mouseenter(). La función se ejecuta cuando el puntero del ratón entra en el elemento HTML: $("#p1").mouseenter(function(){ alert("Entraste al parrafo..!"); }); • El método mousemove(). La función se ejecuta cuando el puntero del ratón sale del elemento HTML: $("#p1").mouseleave(function(){ alert("Adios! Dejaste el parrafo..!"); }); Abril, 2015 # 20
  • 21. Los eventos mas comunes • El método mousedown(). La función se ejecuta cuando se pulsa el botón izquierdo del ratón, mientras que el ratón está sobre el elemento HTML: $("#p1").mousedown(function(){ alert("El mouse bajo desde el parrafo!"); }); • El método mouseup(). La función se ejecuta cuando se suelta el botón izquierdo del ratón, mientras que el ratón está sobre el elemento HTML: $("#p1").mouseup(function(){ alert("El mouse subio desde el parrafo!"); }); Abril, 2015 # 21
  • 22. Los eventos mas comunes • El método hover() realiza dos funciones y es una combinación de los métodos mouseenter() y mouseleave(). • La primera función se ejecuta cuando el ratón entra en el elemento HTML, y la segunda función se ejecuta cuando el ratón sale del elemento HTML: $("#p1").hover(function(){ alert("Entraste al parrafo..!"); }, function(){ alert("Adios! Dejaste el parrafo..!"); }); Abril, 2015 # 22
  • 23. Los eventos mas comunes • El método de focus() concede una función de controlador de eventos para un campo del formulario HTML. La función se ejecuta cuando el campo de formulario obtiene el enfoque: $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#ffffff"); }); }); Abril, 2015 # 23
  • 24. Los eventos mas comunes • El método blur() concede una función de controlador de eventos para un campo en un formulario HTML. La función se ejecuta cuando el campo del formulario pierde el enfoque: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/ jquery.min.js"></script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); $("input").blur(function(){ $(this).css("background-color", "#555555"); }); }); </script> Abril, 2015 # 24
  • 25. Los eventos mas comunes • El método on() concede uno o más controladores de eventos para los elementos seleccionados. $(document).ready(function(){ $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); }); Abril, 2015 # 25
  • 26. Bibliografías Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es 2008. Creative Commons reconocimiento no comercial - sin obra derivada 3.0 W3Schools a web developers site. http://www.w3schools.com Abril, 2015 # 26