#100DaysOfCode: Day 16 & 17: jQuery CSS Selectors + Sample Code

Continuing with Day 15, I want to add more details about what I’ve learned and worked on in Module 1 of Microsoft’s jQuery course.  After instruction on initial project setup like where to download jQuery and options for a CDN (which I recommend), Chris the instructor went over how to use CSS selectors with jQuery.  Today’s post will be quick guide on this subject.

jQuery and JavaScript are often used interchangeably because jQuery is one of the most widely used libraries in JS.  Some would even say it’s easier to learn than JavaScript because it takes less code to do the same functions. I first heard about jQuery as it was described as an alternative to Flash for animation, interactivity, and easy manipulation of the DOM.  As someone who wants to focus on web design and front-end development, I’m getting accustomed to using it more often.

Adding jQuery to a Page

jQuery can be added to a project as a separate .js file or within the HTML doc using tags.  If you want to download it, the minified, lightweight 1.12 and 2.2 versions are available here at the official site. An alternative is to run npm or bower install commands if using one of these package managers to setup your project. The beta version 3.0 has also available been made available this week, but if keeping your load as lean as possible is important to you, you may want to stick to 1.12 or 2.2. I prefer using the CDN available for it, which I listed below:

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

Cloudfare has also posted a CDN for the version 3:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js

Ready Your Doc

First, jQuery code is prefaced with $ to define it. To “ready” your document, you will need to use one of the two options for executing code on the DOM.

$(document).ready(function() {
   ...code...
});

 

or

$(function(){
   ...code...
});

Using CSS Selectors

The basic syntax for using CSS selectors is $(selector).event( ).  Selectors can be HTML elements, classes, ids, or utilize the keyword this.  There are multiple event handlers and methods that can be called on selectors. The w3 Consortium has a list of the most common ones available here, but for this guide, I’ll be using .text( ) and .click( ) as examples.

With the .text( ) event handler, it sets or returns content to the matching selector it’s applied to. The actionable code comes after the event.  In my example below, I use .text( ) on all <h1> elements in my doc to add a string:

 $(function(){     
    $('h1').text("hello world!");
});

The result in HTML is that the string is placed within <h1> tags. If there is content already in the tags, the content is replaced with .text( ) string.  Run the code and try it for yourself on jsfiddle here.

Likewise, the .click( ) event handler applies actionable code after the selector has been clicked on. For my example below, I used the .addClass( ) method to apply a class to the selector after it has been clicked.  CSS styles for that class are then set to the selector. For the html, I just created a paragraph inside <div> tags and added a <button> underneath

 

jquery_one

before

CSS styles for the class boxed

.boxed {
   border: 3px solid #33cccc;
   padding: 5px 5px;
   text-align: center;
   background-color: #ebfafa;
   color: #33cccc;
}

The class boxed is set to the <div> that contains the paragraph and styles it

$(document).ready(function() {
     $('button').click(function(){
           $('div').addClass('boxed');
   });
});

The results are shown below:

after button is clicked

after button is clicked

There’s tons more you can do with jQuery, and I’ll have more posts on the language in the future.  You can play around with my code examples on jsfiddle here, or download the demos I added to the #100DaysOfCode Github repo in the IntroJQ project folder.

*** Day 16 & 17 Recap ***

  1. Added demo2 to IntroJQ project folder
  2. Created buttons exercise and added to IntroJQ project folder
  3. Added buttons exercise to CodePen (available here)
  4. Tested for Module 1 in the jQuery course– Passed!
  5. Started Module 2

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s