JQuery

JQuery
GlobalMentoring
Librera gratuita de JavaScript, su objetivo es aumentar la simplicidad a la hora de

implementar sentencias, hacer ms simple la programacin, funciona en todos los
exploradores conocidos, incluso los mviles.
Se enfoca en el uso de simple sentencias (obtener y manipular contenido, utilizar eventos
de una manera simple, agregar animaciones y efectos).
Permite un amplio manejo de atributos css, lo cual hace que el cambio o el diseo de tu
pgina a la hora de programar sea mucho ms sencillo.
Trabaja con un conjunto de elementos, es decir cuando quieras seleccionar un componente,
puedes seleccionarlo en conjunto y aplicarle cambios a todos al mismo tiempo.
Permite mltiples funciones en una misma sentencia, para realizar varios eventos a un
mismo componente y todos en una misma sentencia
Instalacin de JQuery
https://jquery.com/
Descargamos la ultima versin
o Ej. jquery-3.2.1.min
JavaScript solo se ejecuta cuando toda la pgina se ha cargado.

Jquery se ejecuta cuando se reconoce de qu tipo de pgina se va a cargar.
Caractersticas de JQuery
Funcionalidades Bsicas
Eventos
Selecciones
Manipulacin CSS
Efectos y Animaciones
Ajax
Selectores y Filtros de JQuery

JQuery permite seleccionar elementos y posteriormente manipularlos de acuerdo a tus
necesidades.
Un selector o un filtro, retorna un array de elementos que cumplan con el filtro de
seleccin, los filtros operan dentro de los selectores.
El array de retorno de un selector o un filtro, no es un conjunto de elementos DOM, es un
conjunto de elementos JQuery que provee una amplia variedad de caractersticas que
pueden ser utilizadas por la librera ya sea para utilizar cualquiera de sus funciones de
manipulacin de datos de cambio de atributos CSS, agregar cualquier eventos, etc.
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');
//$('p').css('border','2px solid blue');
//$('.a').css('border','2px solid blue');
// los criterios deben de estar unidos, sin espacio entre ellos

//$('li.c').css('border','2px solid blue');
//$('li, .c').css('border','2px solid blue');
//$('#element2').css('border','2px solid blue');
//$('li + .c').css('border','2px solid blue'); //Debe de cumplir con ambos criterios
// Resalta todos los elementos p que se encuentran despues de una lista li

$('ul ~ p').css('border','2px solid blue');
});
</script>
<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>
<p class="a">Parrafo 1</p>

<p class="b" id="element2">Parrafo 2</p>
<p class="c">Parrafo 3</p>
</body>
</html>
Filtros JQuery
El uso de filtros en jquery es una manera de buscar elementos de una forma mas especifica.
Los filtros en jquery lo podemos encontrar en 6 categorias:

Bsicos: Provee un filtro bsico.
Contenido: Basado en el contenido del componente
Visibilidad: Basado en sus atributos de visibilidad
Atributo: Elementos basados en el texto de sus atributos
Child: Basados en la relacin con sus hijos
Form: Elementos que se encuentran en un formulario (text, password, checkbox).
Basicos
//$('p:first').css('border','2px solid blue');
//$('p:last').css('border','2px solid blue');
//$('li:even').css('border','2px solid blue'); // pares 0, 2 , 4..
//$('li:odd').css('border','2px solid blue'); // impares
//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');
//Resalta todos los elementos de la vista excepto el mensionado

$(':not(li:eq(1))').css('border','2px solid blue');
});
</script>
Contenido:
Este filtro de JQuery es utilizado cuando quieres obtener un componente o un conjunto de
componentes por texto en alguno de sus atributos.
attribute = value Filtra por un valor de atributo en especfico.

attribute != value Filtra por un valor de atributo distinto al valor del criterio
attribute ^= value Filtra que el atributo inicie en un valor en especifico
attribute $= value Filtra que el atributo termine con un valor especifico
attribute *= value Filtra que el atributo contenga en alguna de sus partes un valor
especifico
// 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>

JQuery

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

JQuery

Diunggah oleh

Hak Cipta:

Format Tersedia

JQuery

Librera gratuita de JavaScript, su objetivo es aumentar la simplicidad a la hora de

JavaScript solo se ejecuta cuando toda la pgina se ha cargado.

Selectores y Filtros de JQuery

//$('p').css('border','2px solid blue');

//$('.a').css('border','2px solid blue');

// los criterios deben de estar unidos, sin espacio entre ellos

//$('li, .c').css('border','2px solid blue');

//$('#element2').css('border','2px solid blue');

//$('li + .c').css('border','2px solid blue'); //Debe de cumplir con ambos criterios

// Resalta todos los elementos p que se encuentran despues de una lista li

<p class="a">Parrafo 1</p>

Los filtros en jquery lo podemos encontrar en 6 categorias:

//$('p:first').css('border','2px solid blue');

//$('p:last').css('border','2px solid blue');

//$('li:even').css('border','2px solid blue'); // pares 0, 2 , 4..

//$('li:odd').css('border','2px solid blue'); // impares

//Resalta todos los elementos de la vista excepto el mensionado

attribute = value Filtra por un valor de atributo en especfico.

Anda mungkin juga menyukai