jquery基础教程一[click,addClass,show,hide]

Await / 前端交互 / 2008/09/11 12:05 / 热度(4,994)

原创内容—转载请说明出处.

jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资料就不在这说了。因为这不是我要说的。我只想说一些实际的东西，也就是我们需要的东西。
先看一个最简的例子：Hello World

[如无法运行请多刷新几次或保存到本地运行]

提示：你可以先修改部分代码再运行。

先说下几点要注意的东西：
1.jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。（也许window.onload()能实现同样的功能，但是jQuery更加快速，灵活）。
$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
2.请确保在元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。
3.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

接下来我们来看一些简单的例子：

Demo_1：鼠标点击时的触发 [如无法运行请多刷新几次或保存到本地运行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标点击时的触发 hello world</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){alert("hello world");}); }); </script> </head> <body> <p>$(document)是获取整个网页文档对象,$("p")是获取所有的段落标签.当单击页面中的每一个p时弹出窗口 ---[单击我]</p> <hr/> <p>我也是一个段落文本,单击我也弹出hello world .[单击我]</p> </body> </html>

提示：你可以先修改部分代码再运行。

Demo_2：增加CSS [如无法运行请多刷新几次或保存到本地运行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>增加CSS</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $("#louis").addClass("c_red"); }); }); </script> <style> .c_red{ color:red; } </style> </head> <body> <p>单击我下面的字会变红色的哦!</p> <ul id="louis"> <li>首先把JQ导入.</li> <li>然后开始写函数了。$(document).ready(function(){});</li> <li>获取标签能直接 $("标签")。给标签注册onclick事件直接可以 click.</li> <li>核心代码: $(p).click(function(){$("#louis").addClass("c_red");});</li> <li>功能:通过单击p的元素改变id为louis元素的样式.</li> <li>知识点:addClass()添加样式 </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

Demo_3：Show(显示) and Hide(隐藏)[如无法运行请多刷新几次或保存到本地运行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Show() and Hide()[显示与隐藏]</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(p).show(); $("a").click(function(){ $(this).hide("slow"); return false; }); }); </script> </head> <body> <a href="http://leotheme.cn"> 我是一个超链接，点击我我就会慢慢的消失。 </a> “return false"表示保留默认行为，因此页面不会跳转。 <hr/> <p style="display: none;">我也是一个段落文本,但我本来是隐藏的。是"$(p).show()"让我显示出来的</p> </body> </html>

提示：你可以先修改部分代码再运行。

这一节先讲到这吧！明天继续！

jQuery WP相关前端交互

simaopig
2009/04/29

嘿嘿，在GOOGLE上面搜一下。居然找到你的文章了。。嘎嘎。。
另外问一下，你这个“运行”用的是啥东西啊？插件吗？

回复
- 等待
  2009/04/29
  
  我BLOG的访问大都是来自搜索。是一个叫runcode的插件
免费二级域名
2008/09/11

(*^__^*) 嘻嘻……，过来看看，支持下，我打酱油去咯

回复

等待-放飞梦想