jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!
Posted: September 13th, 2009 | Author: Kurt | Filed under: Programming | 14 Comments »
This is the first part of a series of jQuery tutorials for designers and web developers. You can automatically receive future additions to the tutorial series by subscribing to the RSS feed, or by following me on Twitter.
jQuery is a javascript framework that makes it easy to edit markup and styles on a page, build advanced user interfaces, and update data sources with AJAX (that is, Asynchronous Javascript and XML). In the words of the jQuery developer site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Today, we’ll go over the first steps and the one major benefit of using jQuery: selecting and manipulating markup and CSS. First, you’ll need to include jQuery in your page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// this is where our jQuery commands will soon go
</script>
...
For the course of this tutorial, I’m going to refer to a sample unordered list with two text spans. It looks like this:
<ul id="list">
<li class="listitem" id="listitem-1"><span class="smallcaps">Hello</span> and thank you for reading.</li>
<li class="listitem" id="listitem-2">I hope you like this tutorial.</li>
</ul>
Notice that I adorned the markup with the id and class attributes. That’s so I can select portions of the markup with jQuery. Remember, the id attribute should be unique, but the class attribute will be repeated on multiple elements, usually in line with an attached stylesheet. For this tutorial, though, assume that there is no CSS modifying the basic behavior with the markup.
Now, you can use jQuery to apply a style to the entire list. First, we’ll create a function that is loaded when the page is opened, we’ll select the entire list with jQuery, and apply a CSS style to make the text blue via the color attribute.
$(document).ready(function() {
// anything in here will be loaded when the page is ready
$("#list").css("color", "blue");
});
Here’s the rundown: the $() command is used to select markup or series of markup from the page. You can select elements by id, class, or element name. To select by id, add a # to the front of the id name inside the parenthesis. For instance, to select the first li in the example above, use $("#listitem-1"). Classes are selected by putting a . before the class name, and element names are selected without adding any modification.
You can use hierarchies to drill down through the markup and select specific portions of the page. The syntax is similar to XPath, where you place a > in between the names discussed above. Here’s a quick snippet partially based on the sample above:
$("#list > li") // all list items in the list with an id of list
$("div > .nav > a") // all links underneath the div elements that belong to an element with a class of nav
Once you select an element, you can apply a CSS style to them with the css(attribute, value) command. Attributes are things like color, font-weight, and display, and values are things like #cccccc, 1.2em, and inline. So, you can make the span in the section above render in small-caps with the following:
$(".smallcaps").css("font-variant", "small-caps");
Next time, we’ll walk through some of the more advanced selectors. Also, expect tutorials on AJAX and jQuery UI.
jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! …
Today, we’ll go over the first steps and the one major benefit of using jQuery: selecting and manipulating markup and CSS….
I’m a Web Designer not a Programmer, so my knowledge of JavaScript is minimal.
This very small tutorial so far has taught me SO much. Explaining the syntax in a very simple, 3rd-grader languange is something I haven’t found… although the W3Schools.com is somewhat simple too, but it doesn’t compare to the simplicity of this post.
Looking forward to the next one.
Thanks a million.
How about multiple css values, how do I separate them? Is it done like in the following example or do I have to separate them with semicolons or something else? How about shorthand css like background, do I need to put in backgroundColor instead? And could I also change a whole css shorthand value like in the second example?
$(”p.article”).css(”background”, “#cccccc”, “text-align”, “justify”, “color”, “#ffffff”);
$(”p.article”).css(”background”, “#cccccc url(./bg/somebg.png) no-repeat”);
The second example is correct, but as for multiple CSS attributes added in a single command, you should do it like this:
$(”p.article”).css({’background’ : ‘#CCCCCC’, ‘text-align’ : ‘justify’, ‘color’ : ‘#FFFFFF’});
Same deal as before, but you surround the thing in brackets (so jQuery knows it’s a whole array of values and doesn’t give up before you’re finished outlining CSS), and you put a “:” in between the attribute and the value.
Hope this helps!
Great, learned something again =)! thx
[...] jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! [...]
It doesn’t get any simpler than this i’ve been scouring all over the ‘net looking for the best way to learn jquery or at the very least understand it’s inner workings, I’m grateful I stumbled upon this post so simple and yet so informative.
excellent looking forward to the next post.
[...] jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! [...]
[...] jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! – Cherrysave (tags: jquery tutorial) [...]
[...] jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! – Cherrysave (tags: jquery tutorial javascript programming webdesign tutorials) [...]
Bank spends or invests 30 back into the economy. ,
[...] Interface This is the second part of my series on JQuery for Beginners. Be sure to check out the first part of the JQuery tutorial series where I introduce the framework and show readers show to use selectors, hierarchies, and [...]
[...] The Complete Series Woorkup: jQuery Lesson Series: Introduction to Selectors Cherrysave.com: jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My! Comparte este artículo en tu red [...]
Answer to LuK’s question about adding multiple css atributes:
You can also add a css class on something, like in your case something with the class of article inside a p tag. Do like this.
$(”p.article”).addClass(”yourCssClass”);