jQuery: My First Code

JQuery Introduction Step By Step Tutorial - Part 3: After create simple page, we try to apply jQuery at the page. In this post, we will practice how to modify css action with jQuery.

We want to modify page in order to be like this:

For this job, create a file named "myjs.js". Enter following code:

// JavaScript Document
$(document).ready(
  function(){
	$('.lyric-text').addClass('lyric-full');
  }				  
);

What mean? The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. In this case, jQuery find lyric-text class. Then, jQuery inject new class named "lyric-full". This job use .addClass() method. So, we must add new class in our css, like this:

.lyric-full {
  font-style: italic;
  background-color:#FFFFCC;
  border: 1px solid #FF0000;
  padding: 0.5em;
}

Thus, open your mycss.css. Update like this:

@charset "utf-8";
/* CSS Document */

body {
  font: 75% Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

h2 {
  font-size: 1.2em;
  margin-bottom: .5em;
}

h3 {
  font-size: 1.0em;
  margin-bottom:0;
}
.lyric{
  margin: 0 2em;
}
.lyric-full {
  font-style: italic;
  background-color:#FFFFCC;
  border: 1px solid #FF0000;
  padding: 0.5em;
}

Point your browser to http://localhost/test/jquery/myfirstjquery.html.