Use of jQuery usually starts with you selecting one or more elements in a web page.

Selectors is the start of how you will identify which elements you want jQuery to work on.

To start with jQuery, you will typically use the $ (dollar sign) symbol as a shortcut to call jQuery, or jQuery name itself. The selector will be in parenthesis, and is a string of text. Generally it will look something like the following:

$('p')

If this looks familar, then that is good. This is actually a function that gets called. And you get to pass a parameter to identify the web elements you want to select.

What can you select?

jQuery allows you to select elements using CSS3 selectors, even if they are not supported in the browser that your end user is currently using. This includes pseudo selctors like :first, :odd and more.

Since I use CSS selectors, I will use the hash mark to identify elements with an ID, and a period to identify classes, such as:

$('#nav')
$('.calendar')

I can also select a more specific element by using combinations. This would be something like:

$('#nav a.selected')
$('#content p:first')
$('div + p')

In the next section we will look at how to work with those elements so that you can do something besides select them.

jQuery Selectors was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts

jQuery Mobile Forms

ByWalter Wimberly

Couple of interesting thoughts on mobile forms in jQuery Mobile. First, the concept of creating a mobile form is similar to creating a form for a desktop user. This means you will create a form with the standard action, and using GET/POST as you normally would. This also includes wanting to add labels with the…

jQuery UI – Creating and Apllying a Theme to Your Page

ByWalter Wimberly

The way that jQueryUI controls the way the elements look is through effective use of CSS. Choosing and using a theme is an important part of working and installing jQueryUI into your website. If you inspect the controls that jQuery creates it actually creates several HTML tags with classes. These classes will control the styles…

jQuery Effects – Sliding Elements into/out of View

ByWalter Wimberly

In addition to hiding and reveling HTML elements, jQuery allows you to move elements around on the screen, over a given duration. Vertically Appearing / Disappearing Movements jQuery provides two commonly used methods to vertically add/remove an HTML element. .slideUp() and .slideDown(). .slideUp() will cause an element to remove itself from view, but sliding up…

One Comment

  1. Pingback: Applying CSS to Elements — Access 2 Learn

Comments are closed.