jQuery Looks like XPath

tp_vol4_020 So far in our examination of jQuery we’ve seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elements based on some other condition?

As the title of this post suggest, all you need is a basic knowledge of XPath statements and you are all set.

Now, you may be thinking, “Why would I even want to do this?”

Well, I have a perfect example.  Let’s say that you want to style all of your external links one way, all of the email hyperlinks another way, and all of your internal links a third way.

You could add the class keyword to each of those elements as you are coding the page.  But what if you don’t have the source code, or later want to style it in some other way?  You have to search for each of those types.

So, for example, you could select all of the hyperlinks that use the mailto: prefix by using the following line:

$('a[@href^="mailto:"]')

This selects all of the anchor tags with an href attribute starting with ‘mailto:’.

Obviously, to use this you are going to need some knowledge of XPath statements, something a lot of us have ignored for some time.  Well, just like you can’t afford to ignore JavaScript anymore, you can’t afford to ignore XPath statements.

Here are some resources that you might find helpful:

Other places talking about jQuery and XPath:

  • Use jQuery and quickSearch to interactively search any data | Encosia – If you’ve dealt with XPath for querying XML documents in the past, you’re going to love LINQ to XML. For example, these few lines of code are all that is required to execute the API request and extract a collection for databinding: …
  • Designers and Developers: Back Together Again Through Microformats … – JQuery is, at its most basic, a Javascript library designed with a lot of utility functions to make programming quicker and easier. Every Javascript library says it does that. But thinking of JQuery as simply “yet another library you …
  • using jquery selectors – what’s so nice about jquery is that the browser doesn’t need to support the css3 specification for you to use them within the framework itself. those familiar with xpath will also be happy to know that simple xpath selectors are also …

 

Other post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery – The Man, The Myth, The LegendjQuery – The Man, The Myth, The Legend I admit it.  I've been ignoring jQuery for quite a while.  But I have a tendency to do that with most new things.  I generally don't work with beta software and I wait for […]
  • jQuery Selectors – Looks just like CSSjQuery Selectors – Looks just like CSS Last week we took a look at the jQuery selector syntax, which allows us to select elements by their ID, class name, or tag name.While it is pretty cool that you can select by class […]
  • jQuery – class manipulationjQuery – class manipulation So, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it?Well, one thing we can do is use the two built-in methods, addClass and […]
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • jQuery – DropjQuery – Drop Last week we took a look at how to make an element draggable.  This isn't of much use unless we can drop it.Fortunately, making an item droppable is about as easy as making it […]

About Dave Bush

Dave Bush is a .NET programmer and Certified ScrumMaster who is passionate about managing risk as it relates to developing software. When he is not writing or speaking about topics related to Application Lifecycle Risk Management (ALRM), he is an example to his peers as he develops web sites in the ASP.NET environment using industry best practices.

One Pingback/Trackback