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.



Series this article:
jQuery: Introduction
jQuery: Installation
jQuery: My First Code
jQuery: Using Event Handler

Bookmark and Share Tag: jQuery, introduction Category: JavaScript Post : March 20th 2008 Read: 22,537

advertisements


blog comments powered by Disqus