In a nutshell, these methods behave exactly the same as the jQuery selector but comes integrated into the browser, meaning you input the CSS selector (e.g. “#myDiv” or “.MyClass”) and out pops the first element in the tree, or a StaticNodeList of the elements (depending on whether you use the All part) .

querySelector() Example

The querySelector() method takes the CSS selector input, then returns a single element.

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<form>
	<fieldset>
		<legend>Input Field</legend>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
	</fieldset>
</form>
<script>
	document.querySelector('#myElem1').style.fontSize = "1.2em"; // Make the first paragraph 1.2em
	document.querySelector('p').style.color = "#0D0"; // This will only affect the first paragraph

	// You can also add event listeners...Again this will only affect the first checkbox.
	document.querySelector('input[type=checkbox]').addEventListener('click', function(e){alert("You Checked Me");});
</script>

View querySelector() Demo

querySelectorAll() Example

The querySelectorAll() method will return a StaticNodeList (Like an array) of elements in which you can cycle through.

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<form>
	<fieldset>
		<legend>Input Field</legend>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
	</fieldset>
</form>
<script>
	var classExample = document.querySelectorAll('.classExample'); // Get all the elements with class "classExample"
	for(i=0; i<classExample.length; i++) {// Cycle through them
		classExample[i].style.fontSize = "1.2em"; // Change the fontSize.
	}

	// Add an click listner to the element #myElem1 and #myElem2
	var idExample = document.querySelectorAll('input[type=checkbox]');
	for(i=0; i<idExample.length; i++) {// Cycle through them
		idExample[i].addEventListener('click', function(e){alert("You Clicked me!");}); // Add the alert.
	}
</script>

View querySelectorAll() Demo

Current browser support level

Selectors are currently a W3C Candidate Recommendation, so they work in most browsers updated after January 2010. Thus for the most part you can use the above code examples in your current website and only IE6 level users will have an issue (Though, they are probably use to that).

However, if you have to support older browsers you can make use of the getElementsByClassName() method. For example:

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<script>
	if(!document.querySelectorAll){ // If the user does not have querySelectorAll()
		var classExample = document.getElementsByClassName('classExample'); // Get all the elements with class "classExample"
	}else{ // Otherwise do it the HTML5 way
		var classExample = document.querySelectorAll('.classExample');
	}

	for(i=0; i<classExample.length; i++) {// Cycle through them
		classExample[i].style.fontSize = "1.2em"; // Change the fontSize.
	}
</script>

View Demo

Further Reading

I’ve only lightly covered this topic; here are a few pages which will give you much more information on the new HTML5 method.

• John Resig: Thoughts on querySelectorAll
• Jef Claes: HTML5: New in the javascript Selector API
• W3C: Selectors API Level 1
• JavaScript: The Definitive Guide (Definitive Guides)

How it works

Google Chrome Frame seems quite easy to support, all the web developer needs to do is add the following code into the head of the web page they want to run like Google Chrome Frame:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

If the user has Google Chrome Frame installed the page will render like Chrome, if not the page will load as normal.

First Impressions

When I first saw this product I had two concerns:

• If a user knows they need a better browsing experience, they should upgrade to a better browser. Wouldn’t this just delay the uptake of better browsers?
• If a user can’t upgrade to a better browser (Due to corporate restrictions, low bandwidth or lack of information) the odds they will be not be allowed to install Google Chrome Frame. Which makes me wonder how many people will actually benefit from it?

Having said that the product also has its positive points, for example if a company has a network based on IE6 they may find that upgrading to another browser could cause their system to fail. Google Chrome Frame allows them to keep the old software while still work on more advanced browser bases developments, without breaking their network.

I can’t decide whether this product is beneficial for the development of the web, or if it’s just giving users another reason not to upgrade from Internet Explorer 6.

What do you think? Does Google Chrome Frame encourage users to not upgrade, or does it make web developers lives easier? Leave your views in the comment section below.

Here is a really neat piece of jQuery I use to make forms a little easier for users which takes little work to integrate (Just copy and paste before the tag).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- Pull the jQuery base from Google, it has CDN so it should be a little faster. -->
<script type="text/javascript">
  $(document).ready(function() {
    $("form input, form input, form textarea").css('color', '#484848');
	$("form .submit").css('color', '#000');
	$("form label").hover(function () {
		$("#infobox").html($(this).attr('title'));
	});
	$("form input, form input, form textarea").focus(function () {
		if($(this).val() == $(this).attr('title')){
			$(this).val('');
		}
		$(this).css('color', '#000');
	});
	$("form input, form input, form textarea").blur(function () {
		if($(this).val() == ''){
			$(this).val($(this).attr('title'));
			$(this).css('color', '#484848');
		}
	});
  });
</script>

It takes the title of the field and places it into the value, then clears the value when the user clicks into it. It also takes the value of the label and places it into an information box, which can help explain what a user needs to do.

Here is an example of the script in action. Feel free to copy, change and share it.

Key Advantages of jQuery

• Very easy to learn and code. If you are familiar with basic JavaScript and CSS you should be able to pick it up quickly.
• A wide range of plugins available thanks to its large development community.
• Its cross browser compatibility is great. The same code will be able to work in Firefox, Chrome, Opera, Safari or even IE6.
• JQuery has fantastic documentation, which has a Firefox search engine plugin.

Unfortunately there is one disadvantage with jQuery. If a developer incorrectly utilizes it, the page loading times will drastically increase. This is mostly down to a developer adding lots of plugins without considering the total bandwidth required to send the data.

Below are some simple examples of jQuery in action.

JQuery “Shell” HTML

This code sample shows how to include jQuery into a page. In some cases it’s better to place JavaScript at the bottom of the page as it decreases rendering time, as the JavaScript will be pulled once the page is already rendered instead of waiting for the file to load then continuing to render.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Shell</title>
</head>
<body>
<!-- Put your content here -->
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<!-- Include the jQuery Engine/Libary -->
<!-- Add any jQuery plugins here -->
<script type="text/javascript">
//<![CDATA[
// Put your jQuery Here
//]]>
</script>
</body>
</html>

Changing the Class on an Object

In this example, you will see how jQuery changes a class on an Object with the ID object. To select the object we (like in CSS) use the variable “#object”. Likewise if you wanted to select something by class, you would just use “.class_name_here”. In this example, we will use the addClass & removeClass attributes.

<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$("#object").removeClass('empty');
	$("#object").addClass('full');
//]]>
</script>

Changing the InnerHTML of an object

The code in this example is similar code to the last example. But this time using the html attribute.

<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$("#object").html('This is the jQuery InnerHTML in action');
//]]>
</script>

This is quite a simplified introduction to jQuery, if you want to learn a little more about jQuery take a look at how jQuery Works.