Documentos de Académico
Documentos de Profesional
Documentos de Cultura
GlobalMentoring
Instalacin de JQuery
https://jquery.com/
Descargamos la ultima versin
o Ej. jquery-3.2.1.min
Caractersticas de JQuery
Funcionalidades Bsicas
Eventos
Selecciones
Manipulacin CSS
Efectos y Animaciones
Ajax
Selectores Basicos
Para el uso de selectores en jquery, la sintaxis es similar a la de css, y funciona en muchos
aspectos del mismo modo a esta.
Para utilizarlos se emplea el smbolo $
Tagname: identificador de un tipo de elemento
Identificador: Frase que identifica el elemento, utilizando el smbolo #
ClassName: Clase css asociada a un componente, utilizando el smbolo .
Combinaciones: Se puede realizar combinaciones de criterios.
o Ej. tag#id.className
Todos los componentes de la pgina, utilizando el smbolo *
Elemento que se encuentra despus de otro elemento, utilizando el smbolo +
Todos los elementos que se encuentran despus de un elemento, utilizando el
smbolo ~
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Primera Pagina JQuery</title>
<script type="text/javascript" src="../../js/jquery/jquery-3.2.1.min.js"></script>
</head>
<script type="text/javascript">
$("document").ready(function() {
//$('li').css('border','2px solid blue');
<style type="text/css">
.a{
color:#0000FF;
}
.b{
color:#FF0000;
}
.c{
color:#000000;
}
</style>
<body>
<ul>
<li class="a">Elemento 1</li>
<li class="b">Elemento 2</li>
<li class="c">Elemento 3</li>
</ul>
</body>
</html>
Filtros JQuery
El uso de filtros en jquery es una manera de buscar elementos de una forma mas especifica.
Basicos
<script type="text/javascript">
$("document").ready(function() {
//Filtra todos los parrafos que se encuentran despues del parrafo con
// en el indice numero 1, recuerda que los indices inician desde el 0
//$('p:gt(1)').css('border','2px solid blue');
//Resalta todos los elementos de la vista que cumplan con el listado y su indice
$('li:eq(5)').css('border','2px solid blue');
Contenido:
Este filtro de JQuery es utilizado cuando quieres obtener un componente o un conjunto de
componentes por texto en alguno de sus atributos.
<script type="text/javascript">
$("document").ready(function() {
// FILTROS CONTENIDO
//Todos los parrafos que entre sus atributos tengan una clase
//$('p[class]').css('border','2px solid blue');
//$('p[class=c]').css('border','2px solid blue');
//$('p[id]').css('border','2px solid blue');
//$('li[id^=ab]').css('border','2px solid blue');
//$('li[id$=q1]').css('border','2px solid blue');
$('p[id=p1][accesskey*=rra]').css('border','2px solid blue');
});
</script>