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
});