Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery-selector

The most important purpose of jquery is: select elements and do some action on those selected elements. The jquery element selectors allows you to search or select HTML elements (CSS3 as well as custom selectors) and then do intended action on that.

Example: we see Show/Hide feature on many sites for certain features of the page. This can be done by using a jquery selector. You can code all HTML of show or hide part in particular class e.g. ".showmenu" class. When Show is clicked menu would be shown and vice versa.

Syntax
Selectors in jquery start with: $()
For example: $('tagname') , $("#ID") $(".class")
Selecting on the basis of element ID
$("#ID_of_Element");

ID will be represented by "#" followed by ID of any element, It should be unique in document. In HTML your paragraphs, form buttons, Div etc. elements can be ID based. Jquery selector will search for given id in document and perform the given action.

Selector by #ID

In example below, Div with id=text will be shown and Show button is made hidden when document is ready. As you click on "Hide text" button div will be hidden and "Show text" button will be shown.


<html>
<head>
<title>jQuery Testing</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#showtext").hide();
$("#hidetext").click(function () {
$("#text").hide();
$("#showtext").show();
$("#hidetext").hide();
});
$("#showtext").click(function () {
$("#text").show();
$("#showtext").hide();
$("#hidetext").show();
});
});
</script>
</head>
<body>
<button id="hidetext">Hide Text</button>
<button id="showtext">Show Text</button>
<div id="text" style="background-color:yellow;">
This is Yellow line!!
</div>
</body>
</html>
Selecting elements by class name
$(".classname");

Selecting elements by class names requires calling by '.' (period) followed by class name of the element. Jquery selector will search for given class in document and perform given action.

Selector by .Class name

In example, Div with class=text will be shown and Show button is made hidden when document is ready. As you click on "Hide text" button div will be hidden and "Show text" button will be shown.


<html>
<head>
<title>jQuery Testing</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".showtext").hide();
$(".hidetext").click(function () {
$(".text").hide();
$(".showtext").show();
$(".hidetext").hide();
});
$(".showtext").click(function () {
$(".text").show();
$(".showtext").hide();
$(".hidetext").show();
});
});
</script>
</head>
<body>
<button class="hidetext">Hide Text</button>
<button class="showtext">Show Text</button>
<div class="text" style="background-color:yellow;">
This is Yellow line!!
</div>
</body>
</html>

In real-time development, the class name specifications may be specified in an outer CSS file.

Selecting elements by name
$('html_tag_name');

Where html tag name can be p, img, div etc. like

$('p')- It select all element with tag name p in page

$('div') = It select all elements with tag name div in page

Selector by tag name

Same example as given above with except that we used tag name div to hide and show text in jquery selector rather class name. If we have multiple div tags in page it will show/hide all the Divs.


<html>
<head>
<title>jQuery Testing</title>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".showtext").hide();
$(".hidetext").click(function () {
$('div').hide();
$(".showtext").show();
$(".hidetext").hide();
});
$(".showtext").click(function () {
$('div').show();
$(".showtext").hide();
$(".hidetext").show();
});
});
</script>
</head>
<body>
<button class="hidetext">Hide Text</button>
<button class="showtext">Show Text</button>
<div class="text" style="background-color:yellow;">
This is Yellow line!!
</div>
</body>
</html>
More jQuery Selectors
Syntax Description
$("*") Selects all elements
$(this) This selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") It selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements


Related Videos