Jquery Course

After we have selected the elements in jQuery we are able to manipulate them and working with CSS properties to build effects.

Reading CSS Properties

To read the CSS property of an element, use the following sintax: 
$('selector').css('css_property');
- selector - represents a HTML element.
- css_property - is the CSS property you want to read.

The code in the following example gets the width and the background-color of the first <div> with class="cls", then displays these values in an Alert window when a button with id="btn" is clicked: 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Read CSS styles</title>
<style type="text/css"><!--
.cls {
 width:250px;
 background-color:#bcefcd;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // get the width and background-color of the first <div> with class="cls"
  var div1_width = $('div.cls:first').css('width');
  var div1_bgcolor = $('div.cls:first').css('background-color');

  // displays an Alert window when the HTML tag with id="btn" is clicked
  $('#btn').click(function(){
    alert('width = '+ div1_width+ ' , bgcolor = '+ div1_bgcolor);
  });
});
--></script>
</head>
<body>
<div class="cls">jQuery Tutorial</div>
<div class="cls">coursesweb.net/javascript/</div>
<button id="btn">Click</button>
</body>
</html>
Click on the button below to see the result.
jQuery Tutorial
coursesweb.net/javascript/

jQuery gives you the element's calculated style. You'll receive the value that's been rendered in the user's browser, rather than the value entered in the CSS definition. So, if you gave a div a height of 300 pixels in the CSS file, but the content inside it pushed the height over 300 pixels, jQuery would provide you with the actual height of the item, rather than the 300 pixels you'd specified.

Setting CSS Properties

To set a CSS property to an HTML element with jQuery, use the following syntax: 
$('selector').css('css_property', 'value');
Example: 
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the font-size of all <div> with class="cls", when the HTML tag with id="btn" is clicked
  $('#btn').click(function(){
    $('div.cls').css('font-size', '20px');
  });
});
--></script>
<div class="cls">jQuery Tutorial</div>
<div class="cls">coursesweb.net/javascript/</div>
<button id="btn">Click</button>
The code above sets the CSS property font-size:20px; to all <div> tags with class="cls", when the HTML tag with id="btn" is clicked.
Click on the button below to see the effect.
jQuery Tutorial
coursesweb.net/javascript/

If you want to set multiple CSS properties in a single statement, you can use the following syntax: 
$('selector').css({ 'property1': 'value', 'property2': 'value' });
- You can add as many 'property':'value' pairs as you want, within the curly braces, separated by comma.

Example: 
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets multiple css properties to the <div> with class="cls", when it is clicked
  $('div.cls').click(function(){
    $(this).css({'margin': '3px auto', 'background': '#bcfecd', 'color': 'blue'});
  });
});
--></script>
<div class="cls">jQuery Tutorial</div>
<div class="cls">coursesweb.net/javascript/</div>
The code above sets this CSS properties: margin:2px auto; background':#bcfecd; color:blue; to any <div> with class="cls", when it is clicked.
To see the effect, click on these two text lines:
jQuery Tutorial
coursesweb.net/javascript/

Adding and Removing Classes

jQuery allows you to easily add, remove, and toggle CSS classes. Here are the different syntaxes for accomplishing this:

    $('selector').addClass('class_name');   - adds class "class_name" to all HTML elements that match "selector".
    $('selector').addClass('class_name1 class_name2');   - adds class "class_name1" and "class_name2" to all HTML elements that match "selector".
    $('selector').removeClass('class_name');   - removes class "class_name" from all HTML elements that match "selector".
    $('selector').toggleClass('class_name');   - toggles the class "class_name" on all elements that match "selector" (adds it if it doesn't exist, and removes it if it does).

Example: 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Add, Remove class</title>
<style type="text/css"><!--
.cls1 { border:2px solid #01da02; color:blue; }
.cls2 { background:#bcfecd; font-size:18px; }
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // adds class "cls2" to the tag with id="id1", and remove class "cls1" from all <div> tags
  // when the tag with id="btn" is clicked
  $('#btn').click(function(){
    $('#id1').addClass('cls2');
    $('div').removeClass('cls1');
  });
});
--></script>
</head>
<body>
<div class="cls1">Free Web Development Courses</div>
<div id="id1">Web site: marplo.net</div>
<button id="btn">Click</button>
</body>
</html>
The jQuery code in this example adds class "cls2" to the tag with id="id1", and removes class "cls1" from all <div> tags, when the element with id="btn" is clicked.
Click on the button below to see the efect:
Free Web Development Courses
Web site: marplo.net

Check if a class is set

You can also check to see if a selected element has a particular CSS class, by using the hasClass() method, and then run some code if it does. Here is the syntax: 
if ($('anElement').hasClass('class_name')) {
  // do something here
}
- If the HTML element specified by "anElement" has a class of "class_name", the browser will execute the code within curly braces.

Example: 
<script type="text/javascript"><!--
$(document).ready(function() {
  // when the mouse is over a DIV with a class of "cls", adds a border to it
  $('div').mouseover(function() {
    if($(this).hasClass('cls')) {
      $(this).css('border', '2px solid blue');
    }
  });
});
--></script>
<div class="cls">Div with class="cls"</div>
<div>DIV without class</div>
<div class="cls">Another div with class="cls"</div>
The code above adds a border to each DIV with a class of "cls", when the mouse is over it.
To see the result, place the mouse over these text lines:
Div with class="cls"
DIV without class
Another div with class="cls"

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
CSS Styles with jQuery

Last accessed pages

  1. JavaScript Chronometer / Stopwatch (7355)
  2. Node.js Move and Copy file (28421)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (141759)
  4. Upload Script for Gallery of Images and Audio files (9754)
  5. Ajax-PHP Chat Script (49484)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (483)
  2. CSS cursor property - Custom Cursors (81)
  3. The Mastery of Love (73)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (64)
  5. CSS3 2D transforms (46)