JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 4 More jQuerySelectors


In Lesson 3, we have learned how to use jQuery selectors based on name, id and class. In this lesson, we shall learn a few more example examples of jQuery selectors.

4.1 The * Selector

We use the symbol * in jQuery to select all elements. the syntax is as follows:

$("*")

Example 4.1

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("*").hide();
    });
	 
});
</script>
</head>
<body>
<button id="btn1">Click to hide All Elements</button><br>
</body>
</html>

Clicking the button below will hide everything on this page.



4.2 The Current Element Selector

We use the keyword this to select the current element. The syntax is:

$(this)

Example 4.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn2").click(function(){
        $("this").hide();
    });
});
</script>
</head>
<body>
<button id="btn2">Hide Me</button>
</body>
</html>



4.3 Select Elements with the same class name.

we can select all elements with the same class name. The syntax is:

$("element.classname")

Example 4.3

In this example, jQuery will select all p elements with class name "myclass"

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
        $("p.myclass").hide();
    });
});
</script>
</head>
<body>
<h1 class="myclass">This is my heading</h1>

<p class="myclass">This is paragraph 1 .</p>
<p class="myclass">This is paragraph 2.</p>

<button id="btn3">Click to hide paragraph</button>
</body>
</html>

This is my heading

This is paragraph 1 .

This is paragraph 2.



4.4 Select the first Element

jQuery can select the first element out of the same elements found on the webpage. The syntax is:

$("element:first")

Example 4.3

This example select the first <h5> element and hide it.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
        $("h5:first").hide();
    });
});
</script>
</head>
<body>
<h5>First Topic</h5>
<h5>Second Topic</h5>
<h5>Third Topic</h5>
</body>
</html>
First Topic
Second Topic
Third Topic

4.5 Selects the first <li>element of the first <ul></h3>

The syntax is

$("ul li:first")

Example 4.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn5").click(function(){
        $("ul li:first").hide();
    });
});
</script>
</head>
<body>
<h4>List of Fruits</h4>
<ul>
  <li>Apple</li>
<li>Banana</li>
  <li>Grape</li>
  <li>Orange</li>
</ul>

<p>List of Vegetables</p>
<ul>
 <li>Broccoli</li>
 <li>Cabbage</li>
  <li>Celery</li>
<li>Tomato</li>
</ul>

<button id="btn5">Strike off the first item</button>
</body>
</html>

List of Fruits

List of Vegetables

There are many more variations of jQuery selectors and we shall deal with them in coming lessons.





Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy