oscar
3/21/2018 - 1:18 AM

Recordatorio Jquery

https://api.jquery.com/ documentacion de la pagina oficial

https://www.w3schools.com/jquery/default.asp Documentacion de la W3

$('ul').addClass('textoVerde');//añade una clase ya creada en css a un objeto

$('ul').removeClass('textoVerde');//elimina una clase

$('#valor1').val()//sacamos el valor, esto se ocupa en inputs, cuando le dan a entrar saca su valor o sino es undefined

$('ul').css('font-wight','bold');//añade un estilo css directamente al objeto sin estar puesto en una hoja css

$("#obj").css({
  "background":"#eee",
  "width":"100%"
})

$(this).attr("value");//al objeto que se le da click se le saca e atributo value
$(this).attr("src");//al objeto que se le da click se le saca e atributo src

$('#valor1').attr("href","www.google.cl")//al atributo href se le ingresa un valor

$('#valor1').html()//sacamos el valor de una etiqueta o un objeto que no es un input

$(document).ready(function({$('ul').css('font-wight','bold');}));//esto ocurre cuando el documento se cargue completo y se ejecute la funcion que hace que los ul sean negritos.

$(function({
 $('ul').css('font-wight','bold'); //hace lo mismo, se ejecuta al cargar el documento completo, salta la funcion
}))

$('li:first-child').addClass('textoVerde');//aak primer hijo de li le agrega la clase ya prehecha textoVerde

// Manejo de las imagenes 
$("img").attr("src","img/profesor.jpg") // Toma la img y cambia el src
.addClass('img-circle img-thumbnail');//Agrega una clase
	

	
$(".col-sm-5").children("p").eq(1);//toma los hijos p y escoge el numero 1 del arreglo es decir el 2° ya que el arreglo parte de 0

$(".col-sm-5") 
    .find("p") //buscamos todos los p del padre
    //.text("nuevo texto"); //reemplazamos el texto
    .html("Saludos, <u>Que tal</u>");
    
$("ul li")
.eq(1)//sirve para escoger el hijo del arreglo de li
.css("color","red");//cambio de variable css

$("ul")
.css({
  position:"relative",
  top: "200px"
});//las variables css se pueden tomar como objetos


$("ul li").eq(1).css("color","yellow").end()//el .end sirve para terminar la linea y que tome la siguente envez de escribir la misma sentencia de jquery
  .eq2.css("color","red").end();

$("<img>",{//se crea un elemento img
  class:"row",
  src:"url"
}).load(function(){//el load se ocupa para que se ejecute algo cuando alla cargado el elemento
  
})

$("#id").click(function(){
  $("#objeto").show();//Sirve para mostrar un objeto 
  $("#objeto2").hide();//Sirve para esconder un objeto display:none;
})

window.matchMedia("(min-width:768px)").matches //sirve para poner como minimo el width de la pantalla, es decir que no se muestre en celulares
(function(){//inicializamos automaticamente la llamada
$.ajax({
    type: 'GET',//tipo, puse ser GET o POST
    url:  'http://www.json-generator.com/api/json/get/bPbrprvPsi?indent=2',//la url a cual se llama
    dataType: 'json'//el tipo que devuelve
})
    .done(function(data){ //la data es todo lo que se devuelve del archivo que se llamo en url
    $("#picFoto").attr("src",data.picture);
    $("#txtNombre").val(data.name);
    $("#txtDireccion").val(data.address);
    $("#txtGenero").val(data.gender);
    $("#txtTelefono").val(data.phone);
})
    .fail(function(){//se ejecuta cuando la llamada falla
    console.log("fallo");
})
    .always(function(){//se ejecuta siempre, falle o sea exitoso
    console.log("completo");
})
})();

////////////////////////////////////////////////////////////////////////////////////////////////////
$("#bot1").on("click",function(){
    console.log("click");//evento de click
})

$("#bot1").on("click",function(){
    $(this).attr("src","img/nophoto.jpg");//evento de click cambia a una imagen
})

$("#wea").on("click",function(e){
  e.preventDefault();
  let link=($this).attr("href");//sacamos el href de un link;
})

$(document).ready(function(){//cuando la pagina este cargada hace algo
  console.log("La pagina esta lista para lo que sea.");
})

$("div").append("<h3>Hola</h3>");//Pone el elemento al final del div, es como un appendChild

$("div").prepend("<h3>Hola</h3>");//Pone el elemento al principio del div

$("input",{//los elementos tomados se le puede agregar atriburos
  type:"text",
  class:"form-control",
  placeholder:"Ingrese su nombre"
}).appendTo('.container').//lo ingresa al container
on('keypress', function(e){
  console.log(e.keyCode);//muestra la key presionada
});