//cuando el documento se haya cargado se ejecuta una funcion
$(document).ready(function() {
$(«#boton»).click(function (){
$(«table»).hide();//selector para un atributo mayor que una caracteritica especifica > 2
});
});
//cuando el documento se haya cargado se ejecuta una funcion
$(document).ready(function() {
//los atributos son aplicados segun el orden de las lineas de codigo
//$(«*»).css(«color», «green»);//selector para todos los elementos
$(«#titulo»).css(«color», «red»);//selector para un elemento segun id
$(«a»).css(«color», «gray»);//selector para un elemento segun tag
$(«.otro»).css(«color», «black»);//selector para un elemento segun class
$(«h1, a»).css(«background-color», «yellow»);//selector para un grupo de elementos
});
//cuando el documento se haya cargado se ejecuta una funcion
$(document).ready(function() {
$(«div span»).css(«background-color», «yellow»);//selector para elementos descendentes
$(«li > ul»).css(«color», «red»);//selector para hijos del elemento
$(«#item1_1 + li»).css(«color», «blue»);//selector para el siguiente elemento al seleccionado
$(«#item1_1 ~ li»).css(«color», «blue»);//selector para los siguientes elementos al seleccionado
});
$(«tbody tr:first»).css(«background», «yellow»);//selector el primer elemento que cumpla la condicion
$(«tbody tr:last»).css(«background», «yellow»);//selector el primer ultimo que cumpla la condicion
$(«tbody tr:not(tbody tr:last)»).css(«background», «yellow»);//selector para todas las opciones excepuando el de la condicion
$(«tbody tr:even»).css(«background», «yellow»);//selector para todas las ocurrencias pares
$(«tbody tr:odd»).css(«background», «yellow»);//selector para todas las ocurrencias impares
$(«tbody tr:eq( 1 )»).css(«background», «yellow»);//selector para un atributo espcifico posicion 1
$(«tbody tr:gt( 2 )»).css(«background», «yellow»);//selector para un atributo mayor que una caracteritica especifica > 2
$(«td:contains(Comedia)»).css(«background», «yellow»);//selector para identificar un contenido o texto
$(«tbody td:empty»).css(«background», «yellow»);//selector para identificar las celdas vacias
$(«td:has(strong)»).css(«background», «yellow»);//selector para identificar las celdas que contengan un tag especifico
$(«a[name=menu]»).css(«background», «yellow»);//selector para identificar el valor de un atributo
$(«a[href*=’google’]»).css(«background», «yellow»);//selector para identificar si valor de un atributo contiene un valor
$(«a[href$=’com’]»).css(«background», «yellow»);//selector para identificar si valor de un atributo termina en un determinado valor
$(«a[href^=’http’]»).css(«background», «yellow»);//selector para identificar si valor de un atributo comienza con un determinado valor
$(«a[name!=menu]»).css(«background», «yellow»);//selector para identificar el valor diferente a un valor determinado
$(«:input»).css(«background», «yellow»);//selector para identificar los elementos de un formulario
$(«:button»).click(function(){
$(«input[value=text]»).css(«background», «yellow»);
$(«:password»).css(«background», «yellow»);
$(«input[value=text]»).next().css(«background», «yellow»);// next() para identificar el proximo elemento
$(«:password»).prev().css(«background», «yellow»);// para identificar el anterior elemento
$(«:radio»).parent().css(«background», «yellow»);// para seleccionar el elemento que es padre del elemento seleccionado
$(«:enabled»).css(«background», «yellow»);// para seleccionar todos los elementos que se encuentren habilitados
$(«:checked»).css(«background», «yellow»);// para seleccionar todos los elementos que se encuentren marcados
$(«:selected»).css(«background», «yellow»);// para seleccionar todos los elementos que se encuentren seleccionados generalmente en el elemento select – option de html
});
$(«span»).click(function() {
$(«:password»).css(«background», «yellow»);
alert ($(«img»).attr(«title»));//para recuperar el valor de un elemento
$(«:text»).attr(«value»,»hola mundo»);//para definir el valor de un elemento
$(«:text»).attr({
value: «hola mundo»,
title: «hola pirinola»
});//para definir los valores de un elemento mediante json
$(«:text»).removeAttr(«value»); // elimina un atributo de un elemento seleccionado
$(«:text»).addClass(«destacado»);//para adicionar una clase de estilo // ‘destacado’ se define en ejercicio10.css
alert ($(«:text»).hasClass(«destacado»));//para identificar si un elemento emplea una clase de estilo css especifica
$(«:text»).toggleClass(«destacado»);//para alternar una clase de estilo // ‘destacado’ se define en ejercicio10.css
});
$(«span»).click(function() {
alert($(«p»).html());//para recuperar el contenido de un elemento
$(«p»).html(«hola pririnola»);//para modificar el contenido con etiquetas html
$(«div div»).text(«<h1>hola pirinola</h1>»);//para modificar el contenido de un elemento no interpreta html
alert($(«div div»).text());//para recuperar el contenido de un elemento
$(«div div»).text($(«p»).html());//para modificar el contenido de un elemento no interpreta html
$(«p»).html($(«textArea»).val()); // recupera el contenido de un elemento y lo agrega a otro
$(«p»).replaceWith($(«textArea»).val()); //para remplazar un contenido
});
$(«span»).click(function() {
var img = $(«<img/>»,{//esta es la etiqueta para crear un nuevo elemento
src:»hola.png»,
title:»hola pirinola»,
click:function(){alert(«hola cara de pepino»);}//adiciona el evento click
}); //para crear un elemento
var ul=$(«<ul/>»).append($(‘<li/>’).append(«hola cara de pepino»));
$(«body form»).append(img); //para adicionar el elemento al documento
$(«body form»).append(ul); //para adicionar el elemento al documento
});
$(«span»).click(function() {
$(«li»).css(«background», «yellow»);
var li = $(«<li/>»).append(«hola mundo»);
$(«lu»).append(li);//adiciona un elemento en la ultima posicion de la lista
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).before($(«<h1> fuera y antes de la lista</h1>»));//adiciona un elemento antes y fuera de la lista la lista
$(«lu»).after($(«<h1> fuera y despues de la lista</h1>»));//adiciona un elemento despues y fuera de la lista la lista
$(«lu»).wrap($(«<p></p>»));//aenvuelve al elemento
$(«lu»).append($(«li»).clone());//clona todos los elementos y los adiciona
});
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).prepend($(«<li> primera posicion</li>»));//adiciona un elemento en la primera posicion de la lista
$(«lu»).before($(«<h1> fuera y antes de la lista</h1>»));//adiciona un elemento antes y fuera de la lista la lista
$(«lu»).before($(«<h1 id=’titulo’> titulo</h1>»));//adiciona un elemento antes y fuera de la lista la lista
$(«span»).click(function() {
$(«h1»).remove();//elemina todos los elementos de un tipo
$(«h1»).remove(«#titulo»);//elemina un elemento específico
$(«lu»).empty();//limpia todos los elementos internos
$(«lu»).unwrap();//borra el elemento envolvente
});
$(«span»).click(function() {
alert($(«:text»).css(«width»));//recupera el valor css de un elemento
alert($(«:text»).css(«height»));//recupera el valor css de un elemento
$(«:text»).css({
height:»200px»,
background:»red»,
border:»solid»
});//asigna va css de un elemento
alert($(«:text»).hasClass(«destacado»));//identifica si el elemento utiliza una clase css especifica
$(«:text»).removeClass(«destacado»);//elimina la relacion de un elemento con una clase css
$(«:text»).addClass(«destacado2»);//relaciona una clase css a un elemento
//LARGO Y ALTO
alert($(«:text»).width());//recupera el ancho de un elemento
alert($(«:text»).innerWidth());//recupera el ancho de un elemento incluye el borde
alert($(«:text»).outerWidth());//recupera el ancho de un elemento incluyendo el contenedor
//POSICION DE LOS ELEMENTOS
alert($(«:text»).position().top);//recupera la posicion respecto a la parte superior de la ventana
alert($(«:text»).position().left);//recupera la posicion respecto a la parte izquierda de la ventana
alert($(«:text»).offset().top);//recupera las margenes respecto a la parte izquierda de la ventana
alert($(«:text»).offset().left);//recupera las margenes respecto a la parte izquierda de la ventana
});
$(«span»).click(function() {
$(«:text»).attr(«value»,»hola click»);
});//evento click sobre un elemento
$(«span»).dblclick(function() {
$(«:text»).attr(«value»,»hola doble click»);
});//evento doble click sobre un elemento
$(«span»).mouseover(function() {
$(«:text»).attr(«value»,»hola sobre»);
});//evento mouse sobre un elemento
$(«span»).mouseout(function() {
$(«:text»).attr(«value»,»hola fuera»);
});//evento mouse sale de un elemento
$(«span»).mouseup(function() {
$(«:text»).attr(«value»,»hola suelta»);
});//evento mouse suelta el click de un elemento
$(«span»).mousedown(function() {
$(«:text»).attr(«value»,»hola presiona»);
});//evento mouse presiona el click de un elemento
$(«span»).mousemove(function(p) {//catura un parametro
var valor=»movimiento: X=»+p.clientX;
$(«:text»).attr(«value»,valor);
});//evento mouse movimiento del cursor sobre un elemento
$(«:text»).keyup(function(){//cuando se saca una tecla
$(«span»).css(«background»,»yellow»);
$(«p»).html($(this).val());
});
$(«:text»).keypress(function(){//cuando se presiona una tecla
$(«p»).html($(this).val());
});
$(«:text»).keydown(function(){//cuando se presiona una tecla // el efecto es inmediato
$(«p»).html($(this).val());
});
$(«:text»).focus(function(){//cuando gana el cursor
$(«p»).html($(this).val());
$(this).css(«background»,»yellow»);
});
$(«:text»).blur(function(){//cuando se pierde el cursor el cursor
$(«p»).html($(this).val());
$(this).css(«background»,»none»);
});
//VALIDACION DE FORMILARIOS
$(«form»).submit(function(){//para la validacion de un formulario
if($(«:text»).val() == «xti»){
return true;
}
return false;
});
$(«:text»).change(function(){//cuando cambia el valor
//funciona para las opciones de select, para este caso no funciona
$(«p»).html(«valor cambiado»);
});
$(«:text»).select(function(){//cuando se hace una seleccion sobre el elemento
$(«p»).html(«valor ha sido seleccionado»);
});
//—————————————————
//los dos siguentes ejemplos tienen la misma funcion
$(«:text»).keyup(function(e){
$(«p»).html($(this).val());
});
$(«:text»).bind(«keyup»,function(){
$(«p»).html($(this).val());
});
//—————————————————-
//otra posibilidad es crear una funcion independiente
function pintar(e){
$(«p»).html($(this).val());
}
$(«:text»).bind(«keyup focus»,pintar);
//—————————————————-
//forma para disparar eventos de forma automatica
//tambien deshabilita un evento de un elemento
$(«:button»).click(function (){
$(«:text»).unbind(«keyup»,pintar); //para desasociar un evento de un elemento
$(«:text»).val(«texto incluido»);
$(«:text»).trigger(«focus»);//sirve para disparar un evento, forzar el disparo de un evento
});
//—————————————————-
//en estas lineas se adiciona un elemento por codigo pero
$(«form»).delegate(«:text»,»keyup»,pintar);//tambien se le asignan los eventos generales
$(«input[value=boton2]»).click(function (){
$(«:text»).css(«background»,»yellow»);
$(«form»).prepend(«<input type=’text’/>»);
});
//—————————————————-
//funcion que recibe varios parametros
$(«input[value=boton3]»).click(function (col){
$(«:text»).css(«background»,col);
});
$(«input[value=boton3]»).trigger(«click»,[‘yellow’]);
//—————————————————-
$(«:button»).click(function() {
//$(«:text»).hide();
$(«:text»).hide(«slow»);//normal, fast, slow
});
$(«:input[value=’boton2′]»).click(function() {
$(«:text»).show(3000);//tres segundos
});
$(«:input[value=’boton3′]»).click(function() {
$(«:text»).toggle(2000);//dos segundos
});
$(«:button»).click(function() {
$(«#texto1»).fadeOut(«slow»);//normal, fast, slow//convierte el elemnto a transparente
$(«#texto1»).fadeIn(«slow»);//normal, fast, slow//convierte el elemnto a opaco
$(«#texto1»).fadeTo(«slow»,0.5);//normal, fast, slow//nivel de opacidad
$(«#texto1»).toggle(«slow»);//normal, fast, slow//alterna
});
$(«:input[value=’boton2′]»).click(function() {
$(«#texto2»).slideUp(«fast»);//efecto cortina hacia arriba
$(«#texto2»).slidedown(«fast»);//efecto cortina hacia abajo
$(«#texto2»).slideToggle(«fast»);//efecto cortina hacia abajo
});
$(«:input[value=’boton3′]»).click(function() {
$(«:text»).toggle(2000);//dos segundos
});
$(«#pelis thead tr th»)
.prepend(«<span>+</span>»)//adiciona un efecto en un espan
.not(«th:first-child») //para que no se añada a la primera columna
.css(«cursor»,»pointer»);//efecto de cursor
$(«#pelis thead tr th»).each(function(i){//funcion implementada para cada uno de los titulos de la tabla
var n= i-1;
$(this).click(function(){//al hacer click sobre el titulo de la tabla
$(«td»).removeClass(«destacado»);
$(this).parents(«thead»)//trae el elemento padre
.siblings(«tbody»)//trae el cuerpo
.children(«tr»).each(function(){
$(this).children(«td:eq(«+n+»)»).addClass(«destacado»);//marca la columna del titulo
});//para recorrer cada una de las tr
});
});
//valida que solo sean añadidos numeros
$(«:text»).keydown(function (e){
var keyCode = e.which;
var esvalido=(keyCode>47 && keyCode < 58);
var esOtro=(«,8,46,37,38,39,40,».indexOf(«,»+keyCode+»,»)>-1); //8. backspace//46. delete//37,38,39,40. cursoras
if(esvalido || esOtro){
return true;
}else{
return false;
}
});