jQuery Tutorial - 18 - Multiple selectors Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this tutorial we're going to be
taking a look at multiple selectors and
how we can select two elements on a page
if we want to assign for example an
event handler to them now as an example
I'm going to go ahead and create a
button and a paragraph and both of these
are going to take the same action when
we click on them when we click on the
button we're going to show an alert
dialog and when we click on the
paragraph we're also going to show
another dialog however we're going to
use multiple selectors to bind the two
elements or select the two elements and
perform the same action now I'm going to
go ahead and do it the incorrect way
first of all and then I'm going to go
ahead and adjust this and do it the
correct way using multiple selectors so
the first thing we're going to do is go
ahead and create a button so the input
type is button going to give this a
value and this is called click me or
press me more appropriately I'm going to
go ahead and assign an ID to this and
this is just going to be button and I'm
going to come down I'm going to create a
paragraph as well and I'm going to give
this an ID of paragraph so inside here
I'm going to say click me now if we go
over to our page and refresh you see
we've got a button here which we can
click and a paragraph which we can also
click once we've assigned event handlers
to both of them so we're going to go
over to selectors j/s which is an
external file that i've created where
we're going to write our JavaScript code
and we're going to write jQuery inside
of here however I'm going to go ahead
and need to include this on my page
first of all so I'm going to use a
script include here to include the
source of a javascript file
obviously it's always better to keep a
JavaScript code external and in
different files so I choose this
selectors J's file and that's type text
forward slash JavaScript exactly the
same as we include jQuery so we've now
got the use of jQuery and this selectors
JS file which is currently blank so we
need to go ahead and first of all a
assign an event handler to this button
so we're doing we do that using normal
selector
remember we have an ID of button so we
in here we use a hash and then we give
the name of the ID or the value of the
ID and then we assign a click event
handler to this now inside here we're
going to go ahead and create a function
just bring this code down so we have all
this line here down so we have the space
in here to write this out and indent it
looks a lot nicer and I'm going to go
ahead and alert something out so let's
say something was clicked or something
was pressed clicked so now we have this
a click event handler assigned to this
button ID we can we go ahead and alert
something out so let's go ahead to our
page and test this when I click press me
you'll see something was pressed forward
such clicked so we have the correct
alert box now with regards to the
paragraph there's no event handler bound
to this so we need to go ahead and add
this event handler now this is the
incorrect way to do it so don't take
this as you know the advice I'm giving
you but we would go ahead and if we were
using the paragraph we're doing in
exactly the same way so we'd use a hash
to reference the ID paragraph so we go
ahead and type in paragraph and then we
use the same event handler just here
with a function inside of it with our
block of code here which we can bring
down and again we do exactly the same
thing so alert something was pressed
forward slash clicked so now what's
going to happen is we've bound this
event handler to our paragraph so now
when we click our paragraph we have this
message here which we defined just here
now if we wanted the same alert box to
happen for both of these elements what
we've actually done here is
unnecessarily duplicated code so we can
use an unlimited amount of handlers
inside of one selector so let's go ahead
and adjust this accordingly
now we've already referenced hash button
so the button that has the ID button now
what we can do is comma separate the
values that we want to use in each
selection so now I can just add in
paragraph here and what jQuery will do
is it will select both of these elements
and apply this event handle to it so now
when we go over to our page we have the
same result when we click the button and
we have the same result when we click
the paragraph as well so now that we've
bound this to both of our elements we
have the same action performed for each
paragraph now what happens if we want to
go ahead and only assign this to example
only buttons on our page we can use the
button selector so its input and then a
colon and button so this will select all
input types with the valor with the type
button all input fields with the type
button as well as any IDs with paragraph
however we can also go ahead and change
this and just use P so we don't just
need to reference using IDs we can now
remove these IDs and what this selector
is now done is selected all buttons on
the page or all paragraphs on the page
so if you had a few buttons that you
wanted to log an event for example for
each button that's pressed on your
entire page you can go ahead and just
use this input button selector so as
well as using multiple selectors I guess
now we've learnt that you can use a type
selector rather than referencing it with
a hash and it's ID so all paragraphs and
all input buttons or input fields with a
type of button are now going to be
assigned this event and we'll alert the
dialog when they are clicked so let's go
ahead to our page and just test that
press the button and we see the button
has been pressed and we have this alert
box and when we click the paragraph we
also have the same alert box as well so
we can go ahead and we can assign an
unlimited amount of event handlers just
here inside of our selector so that's
how we use multiple selectors in jQuery
and how you can dramatically reduce
duplicating code using this method