jQuery #id selector

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss
1. What are jQuery selectors
2. Different selectors in jQuery
3. #id selector in jquery

What are jQuery selectors
One of the most important concept in jQuery is selectors. jQuery selectors allow you to select and manipulate HTML elements.

Different selectors in jQuery
jQuery selectors allow you to select html elements in the DOM by
1. Element ID
2. Element Tag Name
3. Element Class Name
4. Element attribute
5. Element Attribute values and many more

Id selector in jquery
To find an HTML element by ID, use the jQuery #id selector

Example : The following example finds button with ID button1 and attaches the click event handler.
[html]
[head]
[title][/title]
[script type="text/javascript"]
$(document).ready(function () {
$('#button1').click(function () {
alert('jQuery Tuorial');
});
});
[/script]
[/head]
[body]
[input id="button1" type="button" value="Click Me" /]
[/body]
[/html]

Changes the background colour of the button to yellow
$(document).ready(function () {
$('#button1').css('background-color', 'yellow');
});

Important points to remember about jQuery #id selector

2. jQuery #id selector is the most efficient among all jQuery selectors. If you know the id of an element that you want to find, then always use the #id selector.

3. HTML element IDs must be unique on the page. jQuery #id selector returns only the first element, if you have 2 or more elements with the same ID.

[html]
[head]
[title][/title]
[script type="text/javascript"]
$(document).ready(function () {
$('#button1').css('background-Color', 'yellow');
});
[/script]
[/head]
[body]
[input id="button1" type="button" value="Click Me" /]
[input id="button1" type="button" value="Click Button" /]
[/body]
[/html]

[html]
[head]
[title][/title]
[script type="text/javascript"]
$(document).ready(function () {
if ($('#button1').length ] 0) {
alert('Element found')
}
else {
alert('Element not found')
}
});
[/script]
[/head]
[body]
[input id="button1" type="button" value="Click Me" /]
[/body]
[/html]

[rahulbhardwaj]

Sir, ur videos is very helpfull for me ... thanks

[VikasBhukarhd]

First time I feel that I can learn jquery so easily, , seriously .... U r awesome Sir.. keep it up...

[AhmedDeedatPalestine]

It was a huge relief when I saw the first "if" statement. I mean everything is so unconventional in javascript and yet fascinating.

[fatimahal-khateeb]

I'm totally thankful for every second you teach ...

[krismaly]

I enjoyed watching this video and recommend others to watch. Topic has been explained step by step making audiences to understand the subject very well. Narator seems to be very good at topic. 
Thanks for educating the community and appreciate your volunteer-ship.

Thanks a bunch

[BKLee-nyjn]

really easy approach to understand ID selector... appreciate it.

[varukolusampathsai]

it is very easy to understand and every person learn independently without no one help very nice nd thanks a lot

[murarisrikanth]

Very simple and elegant. Even the naïve user would gain strong basic out this video.

[panduraju]

I don't have idea about jquerry. But your videos are very useful.

Thank you very much

[alacrity]

Your Videos are really useful and simple to understand. Thank You Very Much sir

[narendratelaprolu]

hi sir your videos very helpfully for me and easily can understand..

[qwe]

Venkat,

You use the term "JQuery Selector", but selectors are parts of CSS. So, How do I understand, when you say "JQuery Selector"? In javascript, we also traversed DOM using CSS selectors.

[namahshrestha]

Really!! Exactly what I wanted to know..You really are awsome

[malharjajoo]

Nice contrast between js and jQuery id selector.

[danezubro]

You are amazing !!! Very good job!!
You help me a lot ! Thanks !

[shrutikittur]

Sir intellisense not working for when i am using raw javascript, but working for Jquery.Should i add any refernce. If yes, plz tell how to add it and which one.Thanks in advance

[lagajjar]

very nice understanding for js and jQuery

[danielbrown]

My code is the exact same, I have javascript and popups allowed, and I am still not getting any of these alerts from these tutorials to pop up

[nikithamalkapuram]

Sir, please tell me, "function for multiple buttons with the same id" in jquery

[miketennor]

Could you make the code created in each lesson available for download?