//// JQUERY basic selectors

SELECTOR    PURPOSE
tagname     Finds all elements that are named tagname
#identifier Finds all elements with ID of identifier
.className  Finds all elements that have class attribute with the value of className
tag.className   Gets elements of type tag that have a class attribute with the value of className
tag#id.className    Retrieves the tag element that has an ID of id and a class attribute with the value of className
*   Finds all the elements on the page


Para traer todos los elementos de la página con el tag “p” (y otros elementos):

JS > document.getElementsByTagName(“p”);
JQ > $(“p”);

JS > document.getElementById(“list1”);
JQ > $(“#list1”);

JQ > $(“li.a”);
JQ > $(“ul .b”);

//// BASIC SELECTORS

        $("p").css("border", "3px solid red");
        $(".a").css("border", "3px solid red");
        $("#list1").css("border", "3px solid red");
        $("p.b").css("border", "3px solid red");

        $("p:first").css("border", "3px solid red");
        $("p:last").css("border", "3px solid red");
        $("p:even").css("border", "3px solid red");
        $("p:odd").css("border", "3px solid red");
        $(".a:first").css("border", "3px solid red");
        $(".b:even").css("border", "3px solid red");
        $("p:gt(1)").css("border","3px solid red");
        $("p:not(p:eq(2))").css("border", "3px solid red");

//// CHILDVISCONT

        //$("p:contains(3)").css("border", "3px solid red");
        //$("p:parent").css("border", "3px solid red");

        //$("ul:has(li[class=a])").css("border", "3px solid red");
        //$("ul li:nth-child(3)").css("border", "3px solid red");
        //$("ul li:nth-child(2n)").css("border", "3px solid red");

Adds the class "test" to all divs that have a paragraph inside of them.

$("div:has(p)").addClass("test");


//// FORM SELECTORS

        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");