Category Archives: jQuery

06 – Form filters in jQuery

Many times you need to select elements that are part of a form. For example you might want to select all check-boxes that are selected.

You could match by attribute $('input[type="checkbox"][checked]'); but that will match only the initial state (specified in HTML markup).

What you want to do is to check its state in real time. For that you have to use the CSS pseudo-class :checked. This pseudo-class matches all the elements that are in the checked state. So, you should write something like shown below:

$('input[type="checkbox"]:checked');

You may also want to combine the custom jQuery selector :checkbox with the CSS pseudo-class :checked to create a very powerful custom filter.

$('input:checkbox:checked');

Continue reading

05 – Selecting elements using child filters in jQuery

You can select elements in jQuery using CSS3 child pseudo-classes based on their position inside a parent element.

A few examples:

  • The ul li:last-child selects the last <li> of each <ul> element.
  • The div p:nth-child(2) retrieves all <p> elements inside a <div> that are the second child.
  • The div .main-div:nth-of-type(3) retrieves all the third elements having class main-div inside a <div>.

Note:

  • The :nth-child() counts all children elements regardless of their type and the index starts from 1 instead of 0.
  • The :eq() selects only the elements corresponding to the selector attached to the pseudo-class, regardless of how many siblings they have before them and the index starts from 0.

Continue reading

04 – Selecting elements by filtering their position in jQuery

With jQuery you have the ability to select elements of a web page by their position. For example if you want to select the first <a> on the page you will write:

a:first

If you want to retrieve links starting from the third one on the page you will write the following code:

a:gt(1)

The gt means “Greater Than”. The argument 1 is the index from which to start. If you have any kind of programming background you will know that indexes usually start at 0. So, greater than 1 means the third element!

Continue reading

03 – Selecting elements using attributes in jQuery

Attribute selectors allow you to select elements based on their attributes. Let’s take a look at the ul part of our page.

<ul class="list-one">
		<li>
			<a href="http://dan.saigon.ro">My website contains:</a>
			<ul>
				<li><a href="http://dan.saigon.ro/about/">About Page</a></li>
				<li><a href="http://dan.saigon.ro/portfolio/">Portfolio Page</a></li>
				<li><a href="http://dan.saigon.ro/contact/">Contact Page</a></li>
				<li>And many other pages</li>
			</ul>
		</li>
		<li>I have other websites as well
			<ul>
				<li>About chemistry website</li>
				<li>About Math website</li>
			</ul>
		</li>
</ul>

Continue reading

02 – Retrieving elements by their hierarchy in jQuery

You may want to retrieve only the direct child of a certain element. To exemplify this we have to add a list (actually a list within another list) to our page. Here is what we have so far.

<!DOCTYPE html>
<html>
<head>
	<title>My site</title>
	<script src="jquery-3.2.1.min.js"></script>
	<style>
		.conclusion {
			font-size: 0.7em;
		}
		.red {
			color: red;
		}
	</style>
</head>
<body>

<div class="main-div">
	<h3>I am a header</h3>
	<p>I'm a paragraph</p>
	<p class="conclusion">This is a conclusion</p>
	<p class="conclusion red">This paragraph is a red conclusion</p>
	<img id='my-img' src='dan.jpg' alt="Dan pic">
	<ul class="list-one">
		<li>
			<a href="http://dan.saigon.ro">My website contains:</a>
			<ul>
				<li><a href="http://dan.saigon.ro/about/">About Page</a></li>
				<li><a href="http://dan.saigon.ro/portfolio/">Portfolio Page</a></li>
				<li><a href="http://dan.saigon.ro/contact/">Contact Page</a></li>
				<li>And many other pages</li>
			</ul>
		</li>
		<li>I have other websites as well
			<ul>
				<li>About chemistry website</li>
				<li>About Math website</li>
			</ul>
		</li>
	</ul>
</div>

<script>
	var $allElements = $('*');
</script>

</body>
</html>

Continue reading

01 – Basic selectors in jQuery

jQuery is all about manipulating HTML elements. In order to manipulate the HTML elements you have to select them. You can select them in different ways.

The All (Universal) selector

The All selector allows you to select all the elements of the page (all DOM elements of a page). It is represented by an asterisk, *.
Let’s consider a simple HTML page with different elements in it.

<!DOCTYPE html>
<html>
<head>
	<title>My site</title>
	<script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<div class="main-div">
	<h3>I am a header</h3>
	<p>I'm a paragraph</p>
	<img id='my-img' src='dan.jpg' alt="Dan pic">
</div>

<script>
	var $allElements = $('*');
</script>

</body>
</html>

Continue reading