Jquery Learning Series for Beginners part 2:

Before I start, how to get element from HTML page by using jQuery, lets understand tree structure of HTML page. HTML, like other markup languages, uses tree structure model to describe the relationships of things on a page. When we refer to these relationships, we use the same terminology that we use when referring to family relationships—parents, children etc.

Let me explain with simple example:

Here, <html> is the ancestor of all the other elements; in other words, all the other
elements are descendants of <html>. The <head> and <body> elements are children
of <html>. Therefore, in addition to being the ancestor of <head> and <body>,
<html> is also their parent. The <p> elements are children (and descendants)
of <div>, descendants of <body> and <html>, and siblings of each other.

One of the most powerful aspects of jQuery is its ability to make Document Object Model (DOM) traversal easy. The DOM is a family-tree structure of sorts.
Now lets understand how to get element from HTML page: No matter which type of selector we want to use in jQuery, it always starts with the dollar sign and parentheses: $(). $() function removes the need to do a for loop to access a group of elements since whatever we put inside the parentheses will be looped through automatically and stored as a jQuery object.

Below you can see list of the selectors included in CSS:

A tag Name: $(‘p’) – get all paragraphs in the documents.
An ID: $(‘#some-id’) – get the single elment in the document that has the corresponding some-id ID.
A Class: $(‘.some-class’)– get all elements in the document that have class of  some-class.
$(‘#selected-plays li’) – get all list items that are descendant with an ID of selected-plays.
$(‘#selected-plays li:not(.some-class)’) – get all list items that are descendant with an ID of selected plays and does not a some-class attached with himself.

Now this is the one way to get an element from the HTML page. There are couple of other ways to find an elements form HTML page, like xPath, custom- selector etc.

XPath Selectors: XMl Path language(XPath) is a type of language for identifying different elements or their values within XML documents, similar to the way CSS identifies elements in HTML documents. The jQuery library supports a basic set of XPath selectors that we  can use alongside CSS selectors, if we so desire.

When it comes to attribute selectors like name, title etc., jQuery uses the XPath convention of identifying attributes by prefixing them with the @symbol inside Square brackets. For example, to select all links that have  a title attribute, we would write the following:
$(‘a[@title]’) .
The most important things that attribute selectors accept regular-expression-like syntax for the begining(^)  or ending ($) of a string. They also take an asterisk (*) to indicate an
arbitrary position within a string.
For example, let’s say you have lots of links in your page and you want to add different text colors.
$(‘a[@href^=”email:”]’) :- get all anchor elements(a) with an href attribute that begins with email. After selecting that you can addclass, remove class, can add attribute or can remove attribute, can directly add css.
$(‘a[@href^=”email:”]’).addClass(‘some-class’); This will add only some-class from selected element.
$(‘a[@href^=”email:”]’).removeClass(‘test-class’); This will remove only test-class from selected element.
$(‘a[@href^=”email:”]’).removeClass(); If you use this then this will remove all classes from selected elements.
$(‘a[@href^=”email:”]’).attr(‘disabled’ ,’disabled’); By using this function you can add attribute from selected elments.
$(‘a[@href^=”email:”]’).removeAttr(‘disabled’); By using this function you can remove attribute from selected elments.
$(‘a[@href^=”email:”]’).css(‘fontSize’, 14); This is the way to add directly style on selcted elements.
$(‘a[@href^=”email:”]’).hide(); (will hide all anchor elements with an href attribute that begins with email).
$(‘a[@href^=”email:”]’).show();(will show all anchor elements with an href attribute that begins with email).
These are the most important functions of jQuery, where each jquery developer spends their time.
Custom Selectors: To the wide variety of CSS and XPath selectors, jQuery adds its own custom selectors. The syntax is the same as the CSS pseudo-class syntax, where the selector startswith a colon (:). For example, if we wanted to select the second item from a matched set of divs with a class of horizontal, we would write it like this:
$(‘div.horizontal:eq(1)’) .
Remember one thing, that I found that even experienced developers also do this mistake very often is that, the eq(1) gets the second item from the set because JavaScript array numbering is zero-based, meaning that it starts with 0. In contrast, CSS is one-based, so a CSS selector such as $(‘div:nth-child(1)’) gets any div that is the first child  of its parent.

If you want to read more about selectors, you can refer jQuery API.

I hope that I am able to explain some basic concepts of jQuery. That’s it for now. In my next post I will explain all these concepts with examples and after that will write about event handler. Thanks for reading this article.


About learningtechstuffs

I'm Ansu Jain. I have 1.5 years of experience in iPhone development and 1.5 years of experience in web technology. I have worked on a number of web framework including Drupal, Django, Moodle, Pinax, NodeJs. This blog is dedicated to things I feel that each developer must know.
Gallery | This entry was posted in Jquery, things that every developer must know and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s