JQuery指导与基础(Tutorials/Basics)-开始你的JQuery之行:这些都是最基本的入门,千里始于足下,希望大家能熟悉这个好东西. 这是一个基本的指导与设计教你开始使用JQuery. JQuery提供一系列很好的针对常见问题的解决方法.

吕的部落格唯女子与小人为难养也近之则不孙远之则怨

JQuery指导与基础(Tutorials/Basics)-开始你的JQuery之行

吕翻译,原文
这些都是最基本的入门,千里始于足下,希望大家能熟悉这个好东西.
这是一个基本的指导与设计教你开始使用jquery. jquery提供一系列很好的针对常见问题的解决方法.

如果你还没开开始安装与使用jquery,提醒你赶紧使用以下这些代码试试:

  <html>
<head>
<script type="text/javascript"
src="link/to/jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jquery</a>
</body>
</html>

请在HTML页引入您的jquery.js文件

<script type="text/javascript" src="jquery.js"></script>

在你加载完文档后运行你的处理代码

放多Javascript编程都经常使用以下代码来处理加载后的工作:

  window.onload = function(){ ... }

在加载完页面后你需要正确地运行你的代码. 但是不管怎么这些代码还要等图片及相关脚本等文件全部加载完后才能运行 (如果说你嵌入的一些广告).The reason for using window.onload in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.(感觉怎么翻译都不通,唉,English还是不够好)

围绕这两个问题(有个问题不会翻译,哪位朋友翻译一下), jquery提供了简单的语句让你可以如愿使用:

  $(document).ready(function(){
// Your code here
});

$("a").click(function(){
$(this).hide("slow");
return false;
});

这点代码阻止了上过所说的等待问题 - 这正是我们想要的 ,所以请使用上页这些小代码在你的测试页里试试:)

为点击增加事件

第一件要尝试的事情是我们处理当链接被点击时的相关事件. 请尝试在你的代码中加入以下代码:

  $("a").click(function(){
alert("Thanks for visiting!");
});

保存你的HTML文件并在浏览器中进行测试,在转向真实页面之前,将弹出一个警告条:)不用再加Onclick了.

:如果加return false;那么只会触发事件,而不导向链接页面

增加一个样式

另外,你可以为元素增加或去了一个样式属性, 例如:

  $("a").addClass("test");

或者:

  $("a").removeClass("test");

你可以在头部加入以下样式试试:

  <style>a.test{font-weight:bold}</style>

在元素被加上样式后你可以看到他被加粗了.

特殊效果

Basic Effects 里, 提供了一对很简单的特殊效果, 这个可以让你的页面内容显现不错的效果, 把以下代码放到刚才那个位置试:

  $("a").click(function(){
$(this).hide("slow");
return false;
});

现在,你点击你的链接,它将会慢慢消失.

附件:三个小例子

相关文章

数据加载中,请稍候……