My first dig at jQuery
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/jav开发者_如何学运维ascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update: I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.
加载中,请稍侯......
精彩评论