jQuery example for val() of input box
The example for finding the value of an input box in jQuery is below.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
<script>
$("input").keyup(f开发者_C百科unction () {
var value = $(this).val();
$("p").text(value);
}).keyup();
</script>
</body>
</html>
I have 2 questions.
- Why is the script inside the body? (I tried putting it between the head tags and it does not work).
- Why are there two different keyup() methods, one directly after $("input") and the other after the function?
- If you want it to run in the head, you should use
.ready()or.load()(usually.ready()) - The second
.keyup()fires the event
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
});
</script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
</body>
</html>
http://jsfiddle.net/eqfbY/
Ready waits until the DOM is ready to be parsed. Otherwise, what you're running is an inline script run in the order it is parsed.
Note, a shorthand version of ready() is:
$(function(){
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
});
The script doesn't work in the head because by the time the script gets executed in the head, $("input") does not yet exist.
The second keyup() triggers a keyup() event, but it isn't necessary for the keyup event to be bound.
It only works at the end of the body because it's not in an
onload/readyevent handler, so it has to be executed after the tags have been created. This is the wrong way to go about it by the way.The first
keyupcall adds a handler to the event handler queue, and the second executes all the handlers (so in this case you get a nice value once you load the page, without having to first type something).
Your script should go inside something like:
$(function(){
});
If you immediately start doing things with the DOM before you're certain the DOM has been constructed you'll start referencing elements that don't exist yet. Putting it inside this function is jquery shorthand for executing it once the DOM is ready.
@robbrit
Why is the script inside the body? (I tried putting it between the head tags and it does not work).
Chrome has a different kind of processing in JS w.r.t a function, especially when you use more than one server pages using jQuery tabs or something like that. So, a javascript has to be defined inside the body tag in order to work. This should not be the case with other browsers.
Why are there two different keyup() methods, one directly after $("input") and the other after the function?
The function automatically does the 'keyUp' everytime the browser is called. First keyup is to specify what to do when Input has been keyUpped and second is to do the keyUp function.
加载中,请稍侯......
精彩评论