Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post.
Primero vamos con un ejemplo sencillo

Ejemplo de uso básico de jQuery

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html">
    <title>Leccion 01</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
</head>
<style>
    .textoVerde {
        color: green;
    }
</style>

<body>

    <ul>
        <li>Hola 1</li>
        <li>Hola 2</li>
        <li>Hola 3</li>
    </ul>

    <ul>
            <li>Negrita</li>
            <li>Negrita 2</li>
            <li>Negrita 3</li>
        </ul>

    <script>
        jQuery('ul').addClass('textoVerde');

        jQuery('ul').css('font-weight','bold')
    </script>


</body>
<script></script>

</html>

Como véis tenemos un html básico con dos listas, y en ellas cambiamos proopiedades, añadimos una clase css en una de las funciones de jQuery y en la otra le añadimos un estilo de css directamente, esto seria lo mismo que tener un html de esta forma

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html">
    <title>Leccion 01</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
</head>
<style>
    .textoVerde {
        color: green;
    }
</style>

<body>

    <ul class="textoVerde">
        <li>Hola 1</li>
        <li>Hola 2</li>
        <li>Hola 3</li>
    </ul>

    <ul style="font-weight:bold;">
            <li>Negrita</li>
            <li>Negrita 2</li>
            <li>Negrita 3</li>
        </ul>

    <script>
        //jQuery('ul').addClass('textoVerde');

        //jQuery('ul').css('font-weight','bold')
    </script>


</body>

</html>

Si os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.

Esperando a que la página esté cargada para ejecutar algo

Algunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método ready que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo.

Si nosotros pusieramos los métodos anteriormente mencionados en el header, por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma

<script>
    $(document).ready(function() {
        $('ul').addClass('textoVerde');
        $('ul').css('font-weight','bold')
    });
</script>

Metiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
jQuery nos da una forma más corta para hacer lo mismo:

<script>
    $(function() {
        $('ul').addClass('textoVerde');
        $('ul').css('font-weight','bold')
    });
</script>

Esto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:

<script>
    $(() => {
        $('ul').addClass('textoVerde');
        $('ul').css('font-weight','bold')
    });
</script>

Las tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.

Trabajando con selectores y otras cosas

Vamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM

<script>

	$("img")
		.attr("src","img/photo2.jpg")
		.removeClass('img-circle')
		.addClass('img-thumbnail');

</script>

Esto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail

Estas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr