HTML and CSS Reference
In-Depth Information
Figure 2-4 shows a sample run of the web form with text exceeding the
MaxLength
value. You can also
test the Submit button's functionality. Observe that if you click Cancel, the form isn't posted back to the
server.
Figure 2-4.
Character counter showing a warning
In the character counter you just developed, you used
#id
syntax to select a DOM element matching a
specific ID. By doing so, you uses one of jQuery's many selectors. The next section introduces some other
important selectors in jQuery.
Event Wiring Using the bind() Method
In the preceding example, you wired event handlers of the standard events
click
and
change
using the
jQuery functions
click()
and
change()
, respectively. As of this writing, jQuery doesn't include event
functions for HTML5-specific events. For example, the
video
element you learn about in Chapter 3 has
play
and
pause
events, but jQuery doesn't have built-in functions to wire event handlers for these events.
Luckily, jQuery provides a generic way to wire events to their handlers: the
bind()
method. You can use it
as follows:
$("#Button1").bind("click",OnClick);
This line of code wires the
click
event of
Button1
to an event-handler function named
OnClick
. The
bind()
method takes two parameters. The first parameter indicates the event you wish to handle, and the
second parameter specifies the event-handler function.
jQuery Selectors
While working with client-side scripts, you often need to perform certain tasks only on specific elements.
For example, you may want to read the value of a text box whose ID is
TextBox1
or display all the rows of a
table that contain a negative value in red. jQuery selectors let you match HTML elements against certain
criteria and select them for further processing. Thus jQuery selectors return a collection with zero or more
elements matching a selection criterion.
