October 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

10 Ways to Find the Web Elements You're Looking For with jQuery

  • May 17, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

6. Finding an Element by an Attribute

Suppose you created a website that allowed teachers to post their lesson plans online for others. These plans often reference third-party online PDF- and Excel-based resources. For instance, a lesson snippet might look like this:

If you'd like to carry out your own physics experiments, check out the e-book, 
<a href="http://www.example.com/lab.pdf">"Building Your Own Lab"</a>.


Because of the posted lessons' free-form nature, it's not easy to create server-side solutions that can parse the document for a list of all PDF links -- a task that might be useful for creating lesson summaries identifying third-party resources. However, performing this task with jQuery is trivial:

var pdfs = $('a[href$=pdf]');
$.each(pdfs, function(index, item) {
  $("#externals").append(item + "<br />");
});


7. Filtering Your Selections

Suppose you created an online recipe repository with the feature of e-mailing users only those recipe ingredients that aren't already available at their homes. The feature determines which ingredients need to be purchased by allowing the user to click on those list items he knows he already owns. Each click adds a class named selected to the ingredient. When complete, the code retrieves only those list items not associated with the selected class. You can accomplish this task using the :not() selector:

var ingredients = $("li:not('.selected')");


8. Retrieving Form Values

Earlier you learned how to use the :checked selector to detect whether a checkbox was checked. But how would you retrieve the value of, for instance, a particular text input? You actually use syntax quite similar to that used in the earlier example, additionally using the val() method to retrieve the input:

var email = $("input[name=email]").val();


9. Finding Elements Containing Text

A site that offers users searchable indexes of documents might make keyword searches more convenient by highlighting paragraphs containing the sought after term. You can use the :contains() selector to easily associate a class with all paragraphs containing the keyword:

$("p:contains('NASA')").addClass("highlight");


10. Using jQuery's Custom Selectors

Developers often need to select DOM elements based on criteria that are not easily accessible using standard JavaScript. Recognizing that, jQuery offers a number of custom selectors capable of performing tasks such as retrieving all checkboxes or radio buttons that are currently checked:

var checked = $(':checked');


JQuery supports a number of other custom selectors, capable of retrieving all checkboxes (checked or otherwise), header elements (h1, h2, etc.), button elements, and others.

Conclusion

JQuery's powerful selector syntax makes retrieving any page element a trivial task! What other jQuery features do you like best? Tell us about them in the comments.

About the Author

Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Third Edition".


Tags: Web development, JavaScript, jQuery, search



Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel