In this lesson, you will learn about a compelling technique for selecting and interacting with web page elements – using CSS selectors. That means, if you are familiar with Cascading Style Sheets and know how to select a particular element to style it, you are on your half-way to learning jQuery.

Basic Selectors

A CSS selector is simply a way to tell the browser which element you want to style. For example, h1 is a basic HTML heading tag, and if you use $('h1'), then you are basically telling the browser to select all h1 tags in the web page.
With jQuery, you can select one or more web page elements using jQuery object. The basic syntax is like this: $('selector');

You can use all CSS selectors to create a jQuery object. For example, if you want to select an element with a specific ID of the footer in jQuery, you can achieve that by the code below:

<div id=”footer”> …. </div>
$(‘#footer’)

The # symbol identifies that you are trying to access an element with its ID. As you can see there is nothing written in footer div, so let’s do it with jQuery.

$(‘#footer’).html(‘<h1> The tutorial belongs to tutorialspanel.com </h1>’);

ID selectors

You can select any web page element that has a particular ID attached to it by using jQuery and a CSS selector. For example, let’s say you have a web page with a div tag for the footer.

<div id="footer"> Design & Developed by TutorialsPanel.com </div>

You can select footer using jQuery like this:

<script type="text/javascript">
$(document).ready(function(){
$("#footer").css("text-align", "center");
$("#footer").css("padding", "40px");
$("#footer").css("background-color", "#ccc");
});
</script>

Element Selectors

jQuery also has its own version to select the element by Tag name.

Instead of using document.getEleementByTagName('a'), you can write $('a').

Simple. Isn’t it?

Class Selectors

In the real-world projects, developers usually prefer to refer elements by class name. Supposing that you want to create a navigation bar that includes a drop-down menu. When a user hovers a mouse over one of the navigation menus, the drop-down menu should appear.

HTML

<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About us</a>
<ul class="fallback">
<li><a href="#">Our Vision</a></li>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our CEO</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="fallback">
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Web Marketing</a></li>
</ul>
</li>
<li><a href="#">Get a quote</a></li>
<li><a href="#">Contact us</a></li>

</ul>

</nav>

CSS

<style>
body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; background-color:#ccc;}
nav {background:#FFF;float:left;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;}
nav ul li:hover {border-bottom:2px solid orange;}
nav ul li a {display:block;padding:10px 25px;color:#444; text-decoration:none;}
nav ul li ul {position:absolute;width:110px; background:#FFF;}
nav ul li ul li {}
nav ul li ul li a {display:block;padding:10px 1px;color:#444;}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}
</style>

jQuery

To write the jQuery, you first have to include the jQuery library as we taught you in lesson # 2 Getting started with jQuery

<script type="text/javascript">
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(100);
},
function () {
$('ul', this).stop().slideUp(100);
}
);
</script>

Advanced Selectors

With jQuery, you can use more complicated selectors to precisely select the tag you wish to interact with. Don’t worry if it seems too much for the time being. Once you have understood the basics and try some examples in this lesson, you will be good to go.

1 – Descendant selectors

It Allows you to select a tag inside another tag. For example, you have created a navigation bar with an unordered list and attached ‘nav_bar’ id along with that. Now you want to select the hyperlinks in the #nav_bar. If you use jQuery such as $('a') it will select all <a> tags on the web page, which is probably you don’t want to.

So the solution is to use the descendant selector like $('#nav_bar a').

This merely tells the browser to select the <a> tag inside the tag with id nav_bar. The selector last in the list ( in this case) is the target you want to select.

2 – Child selector

It targets a tag that is a child of another tag in the DOM tree. A child tag is the direct descendant of the wrapper tag.

<body>
<h1> Child Selector Example</h1>
<p> You can find the detail by clicking <a href=”#”> here </a></p>
</body>

In the above example, the <h1> and <p> tags are direct children of the <body> tag, but the <a> tag isn’t because it is wrapped by the <p> tag.

In jQuery, you create a child selector by first listing the parent element, followed by > symbol, and then comes the child element you want to target. For example, to target <a> you can write $('body > p > a')

3 – Adjacent or Sibling selectors

It let you select a tag that appears adjacent to the tag in the DOM tree. For example, let’s say you have an invisible panel <div> that appears when you click on the <h2> tag. To make the <div> tag (the panel) visible, you will need to select it.

In jQuery, you can select an adjacent sibling selector: $('h2 + div') the selector on the right (<div> is the one to select, but only if it comes directly after the selector (<h2>) on the left.

4 – Attribute selectors

It allows you to select an element on the web page based on its attribute, and its value. With an attribute selector, you can find the <img> tag that has alt attribute. Or you can select all external links that point outside from your site.

For example, to find <img> tags that have the alt attribute, you write this:

$(‘img[alt]’)

With [attribute], you can select the element that has the particular attribute assigned in the document. For example, $('a[href]') locates all <a> tags with href attributes. Selecting by attribute will exclude all links without href attribute – that are used as internal reference links.

[attribute = “value”] will select element with a particular attribute with a specified valued. For example, to find all text fields in a web form you can use:

$(‘input[type=”text”]’)

jQuery Filters

You can also filter your selection based on certain characteristics. For example, if you want to select every alternate paragraph on a webpage, you can use:

$(‘p:odd’)

With jQuery filters, you can find elements that contain particular tags, specific text, elements, or even elements that do not match certain criteria.
For example, to select even rows of a table, you can write:

$(‘tr:even’)

Let’s say you want to narrow it down to even rows with a class name of grey only, you can write

$(‘.grey tr:even’)

To select the first element in the group, use $('p:first') or $('p:last') to select the previous element in a group.

You can use :not() function to ignore a particular element. For example, to select every hyperlink that doesn’t start with http:/ you can write:

$('a:not([href^-“http://”])')
Document Object Model Tutorial Home jQuery Chaining
Last modified: July 8, 2019

Comments

Write a Reply or Comment

Your email address will not be published.