►
From YouTube: Very Very Basic jQuery
Description
Presenter: Ed Veal
Notes: http://basicjquery.hopperdietzel.org/
A
A
It
was
like
the
right
time
for
the
east
coast,
but
like
really
early
for
me,
so
that's
just
how
it
worked
out
reminder
if
you
haven't
registered
yet
for
the
conference
and
are
planning
on
coming
to
our
social
event
tonight
or
our
bugapalooza
tomorrow.
Please
register
right
now,
because
I'm
going
to
send
out
the
link
before
the
end
of
this
presentation
and
maybe
jason-
can
drop
the
registration
link
in
chat
again.
So
it's
recent
and
I'll
check
back
in
after
the
presentation,
but
now
ed
feels
gonna
do
very,
very
basic
jquery.
B
I
guess
I'm
going
I'm
a
substitute
teacher
today.
As
you
know,
george
was
originally
scheduled
to
do
this,
so
he
and
I
worked
some
things
out
real
quickly
and
he
sent
me
his
notes
from
a
presentation
that
he
did
a
while
back
and
so
I'm
using
his
notes
and
I'm
going
to
make
them
mine.
So
let's
go
ahead
and
I'm
going
to
start
sharing
my
screen
or
sharing
the
screen
that
has
his
notes
on
it.
B
I'm
to
move
that
out
of
the
way
a
little
bit
yeah
all
right.
So
what
we're
going
to
talk
about
is
jquery,
but
in
very,
very
basic
terms,
quick
outline
of
how
we're
going
to
do
this,
I'm
first
going
to
talk
about
what
jquery
is,
how
it
can
be
used
within
quahog
and
then
we're
going
to
run
through
some
examples.
B
So,
let's
begin
first
of
all,
why
do
we
care
about
jquery
as
it
relates
to
coco
hot?
Well,
it's
pretty
simple
in
the
fact
that
koha's
provided
us
four
basic
system
preferences
that
we
can
use
jquery
or
javascripting
to
customize
the
the
particular
pages
we
can
customize
the
opec.
We
can
customize
the
staff
site
or
client
and
we
can
customize
self
checkouts,
as
well
as
the
self
check
in
system
by
using
jquery
or
javascripting
what
those
system
preferences
are.
B
B
If
you're
looking
for
these
in
this
administrative
area,
easiest
way
to
find
them
is
just
use
the
the
search
tool.
That's
there
and
search
for
user.js
that
will
bring
up
those
four
system
preferences
and
then
you
can
easily
manipulate
those
as
you
need.
So
that's
why
we're
interested
in
jquery.
We
can
use
it
to
manipulate
things
on
the
screen,
use
it
to.
B
Why
jquery
well
or
what
is
jquery
jquery
is
shorthand
usage
for
javascripting
javascripting
is
a
bit
more
complicated,
as
you
can
see
here,
javascripting,
a
particular
line
of
javascript
would
include
some
javascript
commands
some
selector
and
then
some
things
that
that
you're
trying
to
do
jquery
at
its
core
is
created.
A
library
in
the
background
coha
has
links
out
to
these
libraries
and
the
libraries
allow
you
to
use
shorthand.
So,
instead
of
having
to
use
this
whole
bit
here,
you
can
simply
start
with
the
selector
and
basically
what
it
is.
B
That's
the
the
quick
and
dirty
basics
of
what
jquery
is
doing
and
how
it
relates
to
javascript
the
high-end
coders
out.
There
there's
a
lot
more
differences,
but
that's
what
really
jumps
out
for
us
in
this
setting,
so
your
selector
is
basically
defining
what
it
is.
You
want
to
affect
what
it
is
the
the
the
piece
of
what
what's
being
displayed
on
the
screen.
What
it
is
you
want
to
change
and
then
your
the
next
piece
is
what
it
is
you
want
to
do
to
it.
For
example,
here
we're
hiding
it.
B
Next
basic
question
is:
let's
start
breaking
down
jquery
jquery,
as
everything
does
begins,
you
need
to
have
a
beginning
and
an
end
to
it.
Jquery
always
starts
with
the
dollar
sign,
so
any
jquery
that
you
would
write
has
your
dollar
sign
and
it's
got
to
end
with
a
semicolon
all
right.
Everything
goes
in
between
that.
B
The
next
nested
piece
of
information
are
going
to
be
your
parentheses,
with
some
kind
of
what
is
that
single
quote
and
then
anything
that
you
would
put
within
those
single
quotes
all
right
and
then
it
and
then
it
you
know,
then
you
have
your
a
dot
which
is
going
to
differentiate
to
where
you're
going
to
now
begin.
What
it
is
you
want
to
do.
B
That's
what's
going
to
appear
before
the
the
hide,
the
html,
the
the
the
function
that
you
want
it
to
do
when
you
put
it
all
together,
you
get
something
like
this
with
information
in
there.
So
now
that
we
have
the
basic
framework
here,
let's
talk
about,
let's
add
some
stuff
to
it.
So
how
do
we
find?
What
is
the
selector?
What's
that
first
piece
of
it
and
how
are
we
going
to
find
that.
B
B
A
B
Along
here,
let's
see
how
what
some
of
these
event
type
functions
are,
so
we
can
do
things
like
dot
click
hover
these
mean
when
you
move
the
mouse
over.
It
click
on
it.
It's
gonna
kick
off
hover.
When
you
move
the
mouse
over
and
hover,
it's
gonna
change
the
color
of
it.
It's
gonna
do
whatever
it
is.
You
want
it
to
do.
Toggle
it's
back
and
forth.
You
can
do
resizes,
fading
different
effects.
Fade
things
hide
things.
B
This
is
by
no
means
an
exhaustive
list
of
things
you
can
do.
There
are
dozens
of
other
things
that
you
can
do,
but
the
basic
answer
to
all
that
is.
We
want
to
find
something,
and
then
we
want
to
make
it
do
something
else
and
that's
what
we're
going
to
dive
into
if
you're,
using
chrome
or
firefox.
There
are
some
easy
ways
to
look
at
the
code
here
on
george's
notes.
He's
got
ctrl
shift.
B
B
B
Let's
talk
about
some
of
the
system
preferences
that
we
mentioned
early
on.
There
is
a
lot
of
documentation
on
the
cohort
wiki
about
using
jquery.
It's
great
link
out
here
there's
a
lot
of
good
information
there.
There
are
two
basic
schools
of
thought
on
how
to
add
jquery
to
these
system
preferences.
B
The
first
school
of
thought
says
that
you
add
this
particular
piece
of
code
at
the
beginning
of
that
system,
preference
and
then
you
have
this
particular
piece
at
the
very
end
and
all
of
your
jquery
everything
that
we've
talked
about
up
to
this
point
and
we're
gonna.
I'm
gonna
look
through
some
examples
and
we're
gonna
play
with
this
a
little
bit
when
I'm
done
going
over.
This
is
all
nested
within
that.
So
you
have
all
of
your
jquery
in
there.
That's
one
school
of
thought.
B
B
B
B
B
Sorry
on
the
staff
catalog
you
wanted
to
make
the
you
wanted
to
make
the
my
account
link
go
away
as
as
an
option
you
could
make
that
that
link
go
away
for
your
staff,
okay,
so
the
way
we
would
do
that
is
this
particular
piece
of
jquery
here,
but
let's
dissect,
it
opens
up
right
here
and
then
we
have
our
selector
here.
So
the
question
is:
how
did
we,
how
was
this
selector
chosen?
B
B
So
I
find
that
very
useful
in
dissecting
what
it
is
I
need
to
use
so
I'll
come
in
here.
We
see
a
class
here
top
links,
my
account.
That
seems
to
be
a
good
one.
To
use.
We
notice
that
these
other
ones
have
they're
not
affecting
what
it
is
we
want
to
affect,
so
we're
not
going
to
use
them.
We've
got
some
others
up
here.
B
Let's
go
ahead
and
look
at
these
top
link
different
options
in
there.
So
that's
how
the
selectors
chose
that's
how
this
was
chosen.
Okay
and
then
we
decide
what
we
want
to
do
with
it.
We
want
to
hide
it.
We
could
do
other
things
with
it.
We
could
add
css
to
it.
We
could
you
know
to
change
its
coloring
to
change
its
styling.
B
Self
check
in
opac
and
the
staff,
client
or
the
intranet,
because
we're
talking
about
the
intranet
up
here,
we're
going
to
use
the
intranet
system
preference
open
this
up.
I
have
already
added
this.
It
will
not
be
there
for
you.
I
went
ahead
and
did
that
to
make
this
go
a
little
faster
and
then
I
paste
the
jquery
in
that
we
want.
B
B
When
I
come
up
here,
it's
gone
so
we've
simply
hidden
that
first
example
there
let's
go
ahead
and
look
at
some
of
these
others.
Some
of
these
others
are
the
same
process,
but
they're
going
to
be
for
different
things,
hide
my
checkouts.
This
one,
I
actually
think,
can
be
useful
for
a
lot
of
multi-library
settings.
B
So
these
are
some
basic
jquery
statements
for
hiding
some
of
these
things.
Let's
look
at
this.
This
has
this
one
adds
some
extra
content
here.
Let's
talk
about
that,
the
first
two
were
simply
using
a
selector
and
hiding
it.
This
one
gets
a
little
more
complicated
because
it's
not
only
looking
at
the
selector
it's
using
what
we
call
a
contains.
B
B
B
B
B
B
B
B
I
need
multiple
monitors.
Sorry,
I'm
using
a
laptop
on
the
opac,
the
login,
if
somebody's
registering,
actually
that
wasn't
even
for
self,
let's
just
go
ahead
and
look
at
it
here
on
the
staff
side.
I
think
this
is
a
better
example
on
a
patron
record,
the
the
details
here
when
you
go
to
edit
somebody,
it
says
surname.
This
is
both
on
the
opac
and
on
the
staff
client
and
can
generate
some
confusion,
say
you
want
to
say
last
name
instead
of
surname,
it's
pretty
simple!
This
is
what
we're
doing
we're
changing
the
label.
B
B
What
we're
doing
is
because
it's
a
label-
this
is
a
pretty
standard
format.
You
do
label
and
then
you
use
the
square
brackets
for
equal
sign
and
then
the
the
field
that
that
that
that
label
is
for
so
then
you
go
ahead
and
change.
That
say
it
says:
label
for
surname
and
then
that's
where
it's
going
to
change
that.
So
let's
change
that
one!
Let's
come
in
here,
I'm
going
to
open
this
up
in
a
different
tab.
B
B
B
So
this
is
a
really
basic
way
of
making
basic
changes
to
things.
You
can
do
a
whole
lot
more
than
this.
This
is
the
the
very
intro.
What
do
we
have
here?
He's
done
changing
first,
first
and
middle:
that's
something
that
commonly
comes
up
nickname
instead
of
other
names.
You
can
change
any
of
those
fields.
B
B
B
B
B
You'll
notice,
what
this
is
doing
it's
hard
to
see
on
this
because
it
has
it
hidden.
It
didn't
keep
that
one,
I'm
not
sure
exactly
what
he
had
that
built
to
do.
Let's
reread
this
blur
function.
Entry
password
two
value,
entry
forms;
okay,
so
what
he's
doing
is
he's
pulling
that
there
you
go.
I
missed
the
very
end
of
it
here.
He
is
setting
both
password
and
password
two,
both
fields
to
be
the
surname.
B
Last,
when
we
tab
to
another
field,
what
that's
going
to
have
done
is
it
is
going
to
using
blur
it's
going
to
fill
these
with
that
surname.
We
can't
I
mean
with
that
that
same
field.
We
can't
see
it
simply
because
it
it's
hidden
in
here,
but
it
allows
it
to
pull
whatever's
in
here
and
populate
it
into
these
two
fields.
Handy
little
handy
little,
jquery
trick
there,
let's
see
here.
What
else
does
he
have.
B
B
B
You
can
do
all
sorts
of
stuff.
It's
divided
up
rather
nicely
a
nice
table
of
contents.
You've
got
the
intranet
all
of
the
different
jquery,
that's
submitted
by
the
community
in
here,
and
then
you've
got
the
opac
jquery
a
lot
there
as
well.
It's
also
broken
down
into
things
like
search
fields,
enhancement,
enhanced
content.
You
know
adding
some
different,
enhanced
content
information
each
one
of
these
is
literally
a
piece
of
code.
Let's
go
ahead
and
grab
one
here.
B
Hide
my
home,
lincoln
bootstrap
here
we
go.
This
is
one
that
was
written
a
long
time
ago
and
still
holds
true,
has
a
little
bit
of
different
coding
in
here.
Actually,
that's
not
a
good
one
to
look
at
for
a
basic
course.
Let's
look
at
this
other
one,
let's
relabel
something
here:
here's
here's
a
great
example
of
relabeling.
B
B
B
B
These
are
are
some
one
thing
to
note
each
one
of
these
examples
gives
who
wrote
it,
what
it's
supposed
to
do
and
as
well
as
what
it's
intended
for
as
well
as
the
version,
the
version
can
be
very
important.
There
are
some
of
these
that
are
now
going
to
be
obsolete
and
you
know
here's
an
example
of
something
it
was
good
for
318,
but
as
koha's
advanced,
it
needs
to
be
modified
for
other
versions.
B
B
Some
other
resources
that
george
mentioned
up
here-
that
I
did
not
mention,
but
I
want
to
go
into,
is
3w.
Schools
has
a
really
good
page
on
basic
jquery.
It
you
know,
talks
a
lot
about
the
structure
of
it,
how
it's
built.
If
you've
not
used
this
website,
I
recommend
it
highly
it's
a
great
resource
for
learning
how
to
do
some
of
these
things
all
right.
B
A
We
do
not
have
any
questions
yet
hannah
did
say
I
managed
to
accidentally
hit
whatever
the
code
is
in
firefox
at
least
a
couple
times
a
week
while
using
advanced
cataloging.
Whatever
the
shortcut
is,
I'm
like
I'll.
Do
that
sometimes
too
just
you
know
be
typing
around
and
it's
like,
oh,
I
must
have
pressed
like
alt.
I
I
think
is
the
inspect
in
chrome,
on
windows
and.
B
B
B
A
A
B
This
was
very,
very
basic,
as
you
saw
looking,
and
if
anybody's
really
interested
in
diving
into
the
jquery.
I
do
recommend
spending
some
time
with
the
3w
school
site,
because
it'll
it'll
give
you
what
way
more
than
you
need
to
know
for
coha,
but
you'll
get
a
good
understanding
of
it.
And
then
you
can
really
grow
into
doing
some
of
the
much
more
advanced
stuff
that
we
see
in
the
jquery
library,
because
you
can
do
some
really
wild
stuff.
A
Oh
yeah,
jennifer
weston
asked:
can
individuals
submit
additional
examples
to
the
koha
jquery
library?
Yes,
you
just
need
to
get
a
wiki
account
which
we
talked
about
a
little
bit
earlier
today.
I
think
maybe
jason
can
post
the
link
in
the
chat
again
and,
let's
see
michael
asks,
do
you
have
any
tips
for
troubleshooting
jquery?
I
know
that's
probably
more
advanced
but
there's
some
jquery
on
my
system
that
doesn't
seem
to
be
working
properly
and
I'm
trying
to
figure
out
why.
B
B
Let
me
see
if
I
can
find
what
I'm
looking
for
is
to
add
this
css
and
what
I
have
done
in
the
past
is
go
in
and
said.
If
maybe
you
can
find
that
do
you
know
what
I'm
talking
about,
where
you
add
the
css
to
add
some
color
in
a
in
a
text
box,
I
mean
a
frame
around
what
it
is
you're
trying
to
affect
that
can
really
help
you
narrow
down
the
selector
and
that's
usually
where
your
problem
is
usually.
B
A
A
If
it's
a
div
or
a
span,
you
have
to
like
tell
it
differently
what
you're,
selecting
like
hashtag
or
a
dot
and
so
making
sure
to
check
those,
and
especially
after
updates.
You
know,
if
you're
starting
to
have
problems,
there's
been
a
couple
times
where
we
use
jquery.
That
was
like
selecting
on
a
span
id,
but
something
had
been
changed.
So
it
was
a
div.
Instead,
now.
B
Yeah
I'll
I'll
find
it
and
add
it,
we
can
get
it
added
to
the
notes
afterwards.
Another
thing
that
I've
discovered
is
frequently
when
I'm
when
I
find
an
error
in
my
jquery.
It's
because
I
have
either
I've
not
closed
a
you
know.
I
I
I'm
missing
a
single
quote
or
I
have
double
quotes
and
single
quotes.
B
Next,
you
know
not
nested,
so
you
see
here
like
on
this.
One
you've
got
a
single
quote,
and
then
you
have
double
quotes
within
it.
If
these
were
put
in
a
single
quotes,
it
would
br
it
would
not
work,
and
I
I
find
that
a
lot
of
the
time.
That's
a
mistake
that
I
have,
or
I've
left
off
the
last
semicolon
at
the
end
of
a
line.
A
And
yeah:
that's
why,
when
it's
not
working,
what
I
usually
do
is
you
know
plug
it
into
jsfiddle
or
a
similar
tool
that
can
read
the
syntax
and
tell
you
if
you've,
you
know,
there's
lots
of
things.
It
can't
tell
you
because,
like
coha
has
specific,
divs
and
stuff,
it
won't
be
able
to
tell
you,
like
you
called
that
the
wrong
thing,
but
it
can
tell
you
when
you've,
you
know
forgotten
a
semicolon
or
left
out
a
quote
mark.
So
then
everything
after
that's
all
messed
up.
So,
okay.
B
Basically,
this
is
the
framework
I'll
use
whatever
the
selector
is,
I'm
looking
for
output
right
there,
and
then
I
will
have
this
after
it.
What
that
does
is
it's
going
to
add
this
custom
css
to
the
selector
area
that
I'm
that
I'm
trying
to
modify
so
what
it
does
is
it
gives
it
a
border
and
it
makes
that
border.
You
know
two
pixels
and
a
red
border,
so
it
helps
me
identify
okay.
B
Yes,
that
is
the
right
selector
that
I'm,
that
I
have
that
I'm
trying
to
do
trying
to
use
or
no
it's
not
when
I'm
at
the
very
beginning,
that's
one
of
the
first
things
I'll
do
to
make
sure
I'm
actually
affecting
the
correct
selector.
Sometimes
we
talked
about
this
top.
You
know
these
top
links
and
the
fact
that
this
one
right
here
knows
this
one
needed
to
use
a
contains
because
top
links
was
too
generic.
B
B
Well
yeah,
it
didn't
highlight
all
of
them,
but
you
know
that
it.
It
would
allow
me
to
to
see
the
top
links
and
highlight
them,
and
let
me
do
something
something
different
on
the
screen
here.
Let's,
let's
look
at:
let's
inspect
this,
this
classroom
trying
to
find
something
bread
crumbs,
let's
use
bread
crumbs
as
an
example,
coffee,
bread,
crumbs.