jQuery Tutorial - 13 - ID selector Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dog
with a video for the New Boston in this
video we're going to be looking at the
jQuery ID selector and selecting
elements by their ID so let's go ahead
and first of all create an element on
our page I've already got selectors j/s
attached to my page or included in my
page and we're going to be writing some
code in here to return a value from from
a particular element by its ID so let's
go ahead and create for example an input
field and this is going to be type of
text and we're going to give this an ID
of name okay so now that we have this we
want to reference this by name we've
given it the ID of name therefore we can
uniquely reference this as an ID so
inside selectors we're going to want to
well let's just first of all put in here
a value of hello so when we refresh our
page you can see that we've just got
hello inside of a text area field okay
so now inside selectors or j/s if we
want to reference or refer to this field
we can refer to it by its unique name we
could go and refer to it by an input
field however because we've specified an
ID we can use a hash and then the name
of the particular element to actually
grab a value from it so inside selectors
we just want to create a variable and
this is going to be called name now
we're going to use the selector here so
this is a selector inside here we're
going to select name but we don't want
to just put name inside here we want to
use a hash because we've used an ID so
this is saying grab the element with the
ID of name and then we want to return
the value inside of that so Val just is
going to return this value inside of
here so that's not really important for
now but we're just taking a look at
concentrating on how we've selected this
ID okay so now we want to go ahead and
alert that out so we want alert name
remember now
now contains the value of the name field
so when we refresh this we should be
greeted by hello because essentially
what's happened is we've taken this
value from this field here by its ID and
then we've just had alerted this out to
the user so now that we've selected by
an ID in a field what else can we do
well almost any element in HTML can be
have an ID attached
for example paragraphing we could give
an ID to a paragraph so text for example
and some text we could then go to
selectors j/s and just simply change
this around so this could be text this
could be text and then we'll change this
variable as well accordingly so now
we've got the tête the value of text
let's go ahead and refresh the page
oh no sorry we also need to change this
here we need to grab the text from this
so this essentially takes text from
inside the paragraph and we're
referencing the paragraph as hash text
because we've called it text just here
let's go ahead and refresh you can see
that we've got some text in an alert
field so with regards to the ID selector
you can give an ID to almost every
element in HTML you can give an ID to
images fields paragraph spans divs
absolutely anything so if you're writing
code inside this file inside any file in
an external javascript file you can use
this to reference each element so this
is shown more commonly in an example
such as an input button so let's go
ahead and create a button again or for
the first time so we created a text
field before and I'm going to give this
a value of click me I'm also going to
give this an ID of click underscore me
so now this is our reference point here
and inside selectors we can actually use
this to a to carry out a specific action
when this particular button named click
me has been
clicked let's go to our browser and
refresh just so we can see we've got the
button here and when we click it for
example we want to create an alert box
for the user so we reference it by click
me so inside of our code we can say hash
click me dot click we're creating an
event handler here so handling the event
when it click me is has been clicked
don't worry if you're not too sure about
this just for now we then go ahead and
create a function here with the
parentheses the curly parentheses as
well bring this down and then after here
we can just write alert and hello so
we've referenced this click Me button
using a hash and then the click me it
should be click underscore me text and
then when we click we run this line here
so we've referenced this button and
we've added an event to it you'll notice
that this automatically I eradicate the
need for inline JavaScript as well
we've created everything externally by
attaching this event to this button here
by referencing it let's go ahead and
click that button and we get the hello
dialogue box appear on our screen so
that's essentially how we would
reference we would use our jQuery
selector to select an field or an
element sorry by its ID