jQuery Selectors

 

Selecting with jQuery

After the last two steps are competed, we can now start using jQuery! To begin, we use jQuery methods calling either jQuery() or just using the bling symbol, like $(). We access the DOM using mostly CSS syntax, and apply an action using one of the given two methods. The basic syntax for doing anything in jQuery is written like so $("selector").method();.

Selectors are essentially how we tell jQuery which elements we want to work on. Let's look at a few of the ways we can select elements.

    // Select all image tags and add the class 'profilePic'

  $("img").addClass("profilePic");

  // Select all elements with the 'custom' class and change to green text

  $(".custom").css("color", "green");

  // Select all elements with the 'custom' id and set font size to 20px

  $("#custom").css("font-size", "20px");

  // Select all <a> tags inside of <li>'s and set font to bold

  $("li a").css("font-weight","Bold");

For example, running $(“h1”) will select all of your your header 1 tags. You can manipulate DOM elements using css methods by simply using the css keyword. If you wanted to change all of the header elements to have blue font, you'd type $(“h1”).css("color", "blue");.