Introduction with JQUERY - Using Selectors

Guest Posts Paolo Nikko Nuñal

For those of you who have been programming with Javscript, then you might not have heard about JQUERY. JQUERY can be summarize into one basic sentence, and that is JQUERY, is a JavaScript Library that greatly simplifies Javascript programming and is easy to learn.

To make it even easier, they have a so called tagline that goes like this "Write Less Do More".




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here





JQUERY Selectors

The most important things you need to know about JQUERY are the selectors. It is the most important parts of any JQUERY script that you need to master. Selectors will allow you to select and manipulate HTML elements and are used to find and select the HTML elements based on attributes. Selectors start with a dollar sign and are enclosed in a parentheses:

Code

$().


ELEMENT Selector

In JQUERY you can select elements based on their element name. If you want to select all H1 in the page you can do so by declaring a syntax like this.

Code

$("h1")


Example

<html>
<head></head>
<body>
<h1>Header 1</h1>
<h1>Header 2</h1>
<h1>Header 3</h1>
<button>Hide All Headers</button>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
       $("h1").hide();
    });
});
</script>
</html>


Another way to select elements is using the #id selector that uses the id attribute of any HTML tag to find a specific element. An id should be unique within the page.

Code

<button type="button" id="btn-show">Show</button>


From the sample above we have declared the "Show" button with an id "btn-show". In order to select it we can do that by writing this piece of code.

Code

$("#btn-show")


Always begin with a hash tag "#" in order to select elements that has an ID.

Code

<html>
<head></head>
<body>
<h1 id="first-h1">Header 1</h1>
<h1 id="second-h1">Header 2</h1>

<button type="button" id="btn-show">Hide</button>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-show").click(function(){
$("#first-h1").hide();
});
});
</script>
</html>

Lastly the class Selector. You can also select elements with a specific class by using the class Selector. You can do this by starting with a "." Period to indicate you are selecting a class.

Code

$(".hello")


Code

<html>
<head></head>
<body>
<h1 class="header">Header 1</h1>
<h1 class="header">Header 2</h1>

<button type="button" id="btn-show">Hide</button>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-show").click(function(){
$(".header").hide();
});
});
</script>
</html>




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here