js收藏

苏醄 — Fri, 09 Nov 2007 07:56:00 GMT

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

可用于Table 2. 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. IE地址栏前换成自己的图标 6. 可以在收藏夹中显示出你的图标 7. 关闭输入法 8. 永远都会带着框架 9. 防止被人frame 10. 网页将不能被另存为 [-NextPage-] 11. 12.删除时确认删除 13. 取得控件的绝对位置 //javascript //VBScript 14. 光标是停在文本框文字的最后 15. 判断上一页的来源 javascript: document.referrer 16. 最小化、最大化、关闭窗口本例适用于IE 17.屏蔽功能键Shift,Alt,Ctrl 18. 网页不会被缓存或者 19.怎样让表单没有凹凸感？或 20.

&的区别？

(division)用来定义大段的页面元素，会产生转行用来定义同一行内的元素，跟

的唯一区别是不产生转行是ns的标记，ie不支持，相当于

[-NextPage-] 21.让弹出窗口总是在最上面: 22.不要滚动条? 让竖条没有: 让横条没有: 两个都去掉？更简单了 23.怎样去掉图片链接点击后，图片周围的虚线？ 24.电子邮件处理提交表单 25.在打开的子窗口刷新父窗口的代码里如何写？ window.opener.location.reload() 26.如何设定打开页面的大小打开页面的位置 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 28. 检查一段字符串是否全由数字组成 29. 获得一个窗口的大小 document.body.clientWidth; document.body.clientHeight 30. 怎么判断是否是字符 if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"; else alert("全是字符"; [-NextPage-] 31.TEXTAREA自适应文字行数的多少 32. 日期减去天数等于第二个日期 33. 选择了哪一个Radio style Barcode 34.脚本永不出错 35.ENTER键可以让光标移到下一个输入框 36. 检测某个网站的链接速度：把如下代码加入区域中: 37. 各种样式的光标 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：?帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize 38.页面进入和退出的特效进入页面推出页面这个是页面被载入和调出时的一些特效。Duration表示特效的持续时间，以秒为单位。Transition表示使用哪种特效，取值为1-23: 　　0 矩形缩小　　1 矩形扩大　　2 圆形缩小　　3 圆形扩大　　4 下到上刷新　　5 上到下刷新　　6 左到右刷新　　7 右到左刷新　　8 竖百叶窗　　9 横百叶窗　　10 错位横百叶窗　　11 错位竖百叶窗　　12 点扩散　　13 左右到中间刷新　　14 中间到左右刷新　　15 中间到上下　　16 上下到中间　　17 右下到左上　　18 右上到左下　　19 左上到右下　　20 左下到右上　　21 横条　　22 竖条　　23 以上22种随机选择一种 39.在规定时间内跳转 40.网页是否被检索　　其中属性值有以下一些: 　　属性值为"all": 文件将被检索，且页上链接可被查询；　　属性值为"none": 文件不被检索，而且不查询页上的链接；　　属性值为"index": 文件将被检索；　　属性值为"follow": 查询页上的链接；　　属性值为"noindex": 文件不检索，但可被查询链接；　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。 [-NextPage-] 41.变换网页的鼠标光标 42.怎样实现在任务栏显示小图标的效果？ (要使用绝对地址) 有些站点，访问时会在地址栏地址前显出小图标，添加到收藏夹后也在收藏栏中显示图标，这样很好的与其它站点有了区别。要达到这个效果，先需做出这个图标文件，图像为16*16像素，不要超过16色。文件格式为ico，然后上传至你的网站。然后，在需要的页面中，加上以下html语句到文件的和之间（假设以上ico文件的地址http://happyisland.126.com/icon.ico）。 _fcksavedurl=""http:///happyisland.126.com/icon.ico";>" 如果访问者的浏览器是IE5.0，就不需加任何代码，只要将图标文件上传到网站的根目录下即可。 1,META标签里的代码是什么意思？是放于与之间的标记.以下是我总结它在网页中最常见的几种。该网页的关键字，作用于搜索引擎的登录，事实上它在现在的网站中并没什么用。设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。这只表示该网页由什么编辑器写的。这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。 2，怎么改变滚动条的颜色，只有ie5.5版本以上才能支持。这是使用CSS语言，在次说明一下，它和我的浏览器版本有一定的关系。 scrollbar-arrow-color：上下按钮上三角箭头的颜色。 scrollbar-base-color：滚动条的基本颜色。 scrollbar-dark-shadow-color：立体滚动条强阴影的颜色 scrollbar-face-color：立体滚动条凸出部分的颜色 scrollbar-highlight-color：滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色。 scrollbar-track-color:#99CC33; scrollbar-3dlight-color:#A8CBF1; 代码如下：在这我补充几点： 1.让浏览器窗口永远都不出现滚动条。或或 2，没有水平滚动条 3，没有垂直滚动条 3,如何给图片抖动怎做的. 4，在DW如何给水平线加颜色。在DW中没有此项设置，你只能在HTML中加入代码：

按F12的预览在能看到。由于在NC中不支持

的COLOR属性，所以在DW中没有此项设置。　　　 5，如何在网页中实现flash的全屏播放？只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100％即可，当然也可以在Flash导出HTML文件的设置中进行设置，方法是：打开File菜单；选Publish Settings弹出导出设置对话框；在HTML标签下的Dimensions选项,下拉后选中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。 6,为什么我在DW中插入的Flash动画缺看不找！如果你没有正确地安装Dreamweaver和Flash，那么在你预览的时候，Dreamweaver会提示你缺少播放的插件，请你按装InstallAXFlash.exe 并从新启动计算机。现在IE6已经捆绑这个程序。 7，在Flash中，如果屏蔽鼠标右键?FS命令都是什么意思? fscommand ("fullscreen", "true/false";（全屏设置，TRUE开，FALSE关） fscommand ("showmenu", "true/false";（右键菜单设置，TRUE显示，FALSE不显示） fscommand ("allowscale", "true/false";（缩放设置，TRUE自由缩放，FALSE调整画面不影响影片本身的尺寸） fscommand ("trapallkeys", "true/false";（快捷键设置，TRUE快捷键开，FALSE快捷键关） fscommand ("exec";（EXE程序调用） fscommand ("quit";（退出关闭窗口） 8，Flash中什么是隐形按钮。利用button中的hit帧来制作只有感应区域而完全透明的按钮。 9，如何给Flash动画做链接。 Dreamweaver是不能给Flash制作链接的，只能在Flash中用geturl()加链接，然后再插入Dreamweaver中。 10，DW中的层的技巧。层是可以嵌套的，我个人给大家一个技巧，在层面板中按住CTRL再拖放层到你想去成为其子层的地方就行了，我认为这是最简单直观的方法了。 11，如何改变鼠标的形状？在Dreamweaver4中CSS样式面板：按CTR +SHIFT+E--出现样式表对话框,点击NEW，出现编辑对话框,在左边最后一项extensions-cursor 选择你要改的指针形式就可以了，然后把你要想改变的地方运用样式表，如果整页都有在中加入就行了。 [-NextPage-] 13，经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，怎么做呢！这javascript代码即可实现，摘录蓝色论坛。【1、最基本的弹出窗口代码】其实代码非常简单：因为着是一段javascripts代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。 window.open (`page.html`) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，和之间可以，间也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。参数解释： js脚本结束【3、用函数控制弹出窗口】下面是一个完整的代码。 …任意的页面内容… 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？方法一：浏览器读页面时弹出窗口；方法二：浏览器离开页面时弹出窗口；方法三：用一个连接调用：打开一个窗口注意：使用的“#”是虚连接。方法四：用一个按钮调用： 14，没有用表格写的，让大家随便看看，没什么。江南荷花扇面

盛夏　　　　　　尚　涛　

一夜露痕黄粉香　袁运甫

瑶池昨夜新凉　　王金岭

一朵白莲随意开　吴冠南

新雨迎秋欲满塘　齐辛民

十里荷香　　　　齐辛民

濯清莲而不妖　　卢世曙

15,IE6已支持自定义cursor! 语法格式 cursor:url(图标) //cur或是ani文件. cur就是WINDOWS中的光标(cursor)文件，光标文件与图标（ICON)文件除了文件头有一个位置的值不同外，实际是一样的。 ani是WINDOWS中的动画光标（图标）文件。 16,用marquee做的滚动字幕.这也我刚看到论坛的朋友在问。语法： align=# | top | middle| bottom //对齐方式) BEHAVIOR=AlterNATE | SCROLL | SLIDE //移动的方式 BGCOLOR=color//底色区域颜色 DIRECTION=DOWN | LEFT | RIGHT | UP //移动的方向 Loop=n //循环次数（默认是循环不止） Scrolldelay=milliseconds//延时 height=# width=# //区域面积 hspace=# vspace=# //空白区域 scrollamount=# //移动的速度 17，在FLASH5中也存在一些字体，打散后变成一团的事是为什么？有解决的办法吗。这是大家很常见的问题！可能是对字库支持的不好！我个是做成透明的gif图片格式，然后倒入。 18，flash的网页里“加入收藏夹”功能怎么实现？在as中加getUrl("java script:window.external.addFavorite(http://skydesigner.51.net`,`我的工作室`)" 19，在Flash中，文本的动态属性和输入属性的区别。 input text在运行时可被用户或程序改变其值。 ynamic text仅允许被程序修改。 20,怎样在IE中调用Dreamweaver进行编辑. 相信很多在使用WinME或Window2000的朋友，会遇见是个问题。很简单，把我们笔记本程序打开，保存为一个 *.reg 文件。双击它将信息添加到注册表即可。 REGEDIT4 [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver] [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell] [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit] [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command] @="\"c:\\Program Files\\Macromedia\\Dreamweaver 4\\dreamweaver.exe\" \"%1\"" 21，设置表格虚线。方法一：作一个1X2的图。半黑半白，再利用表格作成线。方法二：在css里面设，要IE5。5才支持这种效果。 style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED" 22,看看在网页中调用HHCtrl控件效果。代码如下： < script>HHC.TextPopup("哈哈,大家好,我是闪梦!","",50,5,128255,346751);< /script> 22，如何让一张图片有浅到深的渐变。 23,双击鼠标左键来滚动背景，单击停止。 24,如何在同一页面设置不同文字链接效果的样式. 代码如下：如何在同一页面设置不同文字链接效果的样式下划线链接 _fcksavedurl=""#">下划线链接"

双下划线链接补充说明： a:hover 表示鼠标划过时的样式. a:link 表示链接的样式. a:active 表示当前活动连接的样式. a:visited 表示已经访问过的连接的样式. 25, 用CSS给文字加入阴影效果和文字描边效果。 .glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)} //文字描边效果 .shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: "宋体"} //加入阴影效果补充说明：　　这两种滤镜要想实现效果，必须加在如：

xxxxxxxxx

上，并且要留有足够的空间能够显示阴影或描边，否则会出现半截的阴影或描边现象。 [-NextPage-] 26,如何给做带颜色的下拉菜单。 27,关于DW4的表格中的亮边框和暗边框问题。在DW4的表格面板中并没有亮边框和暗边框的属性设置，因为NC不支持,只有你在代码中添加了。 bordercolorlight="#999999" bordercolordark="#000000" 　　你也可以用Css定义一个class。例如：　　然后在要加效果的表格里加上 28,自动显示主页最后更新日期. 29,如何让滚动条出现在左边？我想居然在论坛中有人发表了这段代码，很有意思，它的确照顾一些左撇子，呵呵！

是不是你的滚动条在左边啊

30,如何加入网址前面的小图标？　　首先,您必须了解所谓的图标（Icon）是一种特殊的图形文件格式，它是以 .ico 作为扩展名。你可用在网上找一个制作图标软件，它具有特有的规格：图标的大小为 16 * 16（以像素为单位）；颜色不得超过 16 色。在该网页文件的 HEAD 部分加入下面的内容：,并放在该网页的根目录下。 31,在800*600显示器中，如何不让网页水平出现滚动条！设至，网页中的表格宽度为778。 32,关于的说明解释。在网页中，经常会看到〈!DOCTYPE HTML PUBLIC`-//W3C//DTD HTML 4.01//EN`>，是声明HTML文件的版本信息。 33, 用图片来关闭窗体. 补充说明：如何使用了ACTIVEX！,不再警告窗口？关闭窗口无提示 34,禁止鼠标右键查看网页源代码。补充说明：鼠标完全被封锁,可以屏蔽鼠标右键和网页文字。 < body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"> 35,通过按钮来查看网页源代码。 36,怎么用文字联结实现按钮的SUBMIT功能？ OK 这段文字要放在form里。formname是这里要写在form中的name,

那么就应该是form111.submit() 37,如何做一个空链接？加# 38,利用来给网页中插入网页。　　经常我看到很多网页中又有一个网页，还以为是用了框架，其实不然，是用了,它只适用于IE，NS可是不支持< IFRAME>的，但围着的字句只有在浏览器不支援 iframe 标记时才会显示，如一样，可以放些提醒字句之类的话。你注意啊！下面请和我学习它的用法。分析代码： </iframe> 　　src="iframe.html" 　　用来显示中的网页来源，必要加上相对或绝对路径。　　name="test" 　　这是连结标记的 target 参数所需要的。　　align="MIDDLE" 　　可选值为 left, right, top, middle, bottom，作用不大。　　width="300" height="100" 　　框窗的宽及长，以 pixels 为单位。　　marginwidth="1" marginheight="1" 　　该插入的文件与框边所保留的空间。　　frameborder="1" 　　使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）　　scrolling="Yes" 　　使用 Yes 表示容许卷动（内定）， No 则不容许卷动。 39,请问＜tbody＞的用法？ tbody用法据说是加强对表格的控制能力的.例如：　<table><tbody>……..</tbody></table> 　　tbody代码如果不是你用手写的话,只有在你用IE5打开一个网页的时候，把它另存为一下，你的另存为的文件在表格中就会生成tbody代码。(即便你的表格根本就没有 tbody代码，IE5另存为的时候也会给你生成)。 40,Alt和Title都是提示性语言标签，请注意它们之间的区别。　　在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。 alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。用法如下：　　　<p Title="给链接文字提示">文字</p> 　　　<a href="#" Title="给链接文字提示">文字</a> 　　　补充知识：<TITLE><ALT>里面如何多行换行？在源代码里Enter回车。 <a href="#" Title="个人简历姓名：张培网名：我是闪梦性别：男的，不是女的。爱好：网页制作，软件开发">个人简历</a> 例如：个人简历 41, 用javascript代码来实现闪烁按钮。 <body> <form method="POST" action="--WEBBOT-SELF--"> <input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;BACKGROUND-COLOR: #FFFFFF" /> </form> <script> if (document.all&&document.all.flashit) { var flashelement=document.all.flashit if (flashelement.length==null) flashelement[0]=document.all.flashit function changecolor(which) { if (flashelement[which].style.color==`#800000`) flashelement[which].style.color="#0063A4" else flashelement[which].style.color="#800000" } if (flashelement.length==null) setInterval("changecolor(0)",1000) else for (i=0;i<flashelement.length;i++) { var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)` eval(tempvariable) } } </script> </body> 42,CSS给图片定义颜色边框。 img { border: 1px solid red} 43,在DW中如何使插入的FLASH透明。方法一：选中swf,打开原代码窗口，在</object>前输入:<param name="wmode" value="transparent" /> 方法二：在Flash中的Flie→Publist Settings→HTML→Window Mode选择transparent 44,在DW编辑文本中，如何输入一个空格呢？输入空格的问题，在DW似乎已成了一个老生常谈的问题。通过将输入法调整到全角模式就可以避免了。本以人工智能ABC为例.按Shift+Space切换到全角状态。 45,为何我的DW中图形显示不正常。第一种：可能是因为你定义并正在使用一个site，而你的HTML文件或者图片不在这个site包含的区域之内，因此dreamweaver使用file协议来描述图象的绝对路径，可惜IE不支持src中使用file协议，所以图象就显示不出来了。第二种：可能是放图片的文件夹或图片名为中文，也显示不到网页中去。 46,如何在本地机器上测试flash影片的loading？我想这可能是很多人在问的题了，其实很简单，在Test时，选选View->Show Streaming就可以看到了。 47,在网页中做出一根竖的线有几种办法. 第一种方法：用一个像素图的办法！如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Image给你创建了一个缺省名为：spacer.gif的一个像素图文件。代码中： <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#FF0000" height="200" ></td> </tr> </table> 第二种方法：用表格填颜色的办法！把<td> </td>中的删掉 . <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#FF0000" height="200" width="1"></td> </tr> </table> 第三种方法：用水平条。 <hr color="red" width="1" size="100%" /> 48, 关于鼠标拖动,改变层大小。──看看微软的做法. <script> document.execCommand("2D-position",false,true); </script> <DIV contentEditable=true> <DIV style="WIDTH: 300px; POSITION: absolute; HEIGHT: 100px; BACKGROUND-COLOR: red">移动层</DIV> </DIV> <br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/sutao/" target="_blank">苏醄</a> 2007-11-09 15:56 <a href="http://www.blogjava.net/sutao/articles/159385.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> <h1>jQuery快速上手</h1> <p>苏醄 — Fri, 17 Aug 2007 07:41:00 GMT</p> <div style="margin-left: 15px; margin-top: 1px; color: #101fff;"> <h2><a href="http://hideto.javaeye.com/blog/62938" title="永久链接：jQuery快速上手"> jQuery快速上手</a> </h2> </div> <div style="margin-left: 15px; margin-top: 5px; color: #101fff;"> <strong>关键字:</strong>   jQuery     </div> <p style="color: #101fff;">这份指南是对jQeury库的介绍，它需要对JavaScript和文档对象模型(DOM)有基本的了解。它从零开始讲解并解释必要的细节。 <br>该指南讲到了一个简单的hello world例子，selector和event基础，AJAX，FX以及使用和创作plugins。 <br>这份指南不包含"click me"例子，只提供"copy me"代码的意图是激发你来自己尝试例子。Copy一个例子，看看它做什么，并修改它。</p> <p style="color: #101fff;"><strong>目录</strong> <br>1 Setup <br>2 Hello jQuery <br>3 Find me: 使用selectors和events <br>4 Rate me: 使用Ajax <br>5 Animate me: 使用Effects <br>6 Sort me: 使用tablesorter plugin <br>7 Plug me: 写你自己的plugins <br>8 Next steps</p> <p style="color: #101fff;"><strong>Setup</strong> <br>我们首先需要jQuery库的copy来开始。最新的版本可以在<a href="http://docs.jquery.com/Downloading_jQuery" target="blank">http://docs.jquery.com/Downloading_jQuery</a>找到，这份指南也提供一个基本包来下载。 <br><a href="http://docs.jquery.com/images/c/c7/Jquery-starterkit.zip" target="blank">jQuery Starterkit</a> <br>下载该文件并解压，用你最喜欢的编辑器打开starterkit.html和custom.js并用浏览器打开starterkit.html。 <br>现在我们准备好了开始著名的"Hello world"例子的任何事情。 <br>本节里有意思的链接: <br><a href="http://docs.jquery.com/images/c/c7/Jquery-starterkit.zip" target="blank">jQuery Starterkit</a> <br><a href="http://docs.jquery.com/Downloading_jQuery" target="blank">Downloading jQuery</a></p> <p style="color: #101fff;"><strong>Hello jQuery</strong> <br>当我们使用jQuery时所做的几乎任何事情都会读取或操作文档对象模型(DOM)，我们需要确认一旦DOM准备好了则我们开始添加events等东西。 <br>为了做这件事，我们为document注册一个ready事件。 <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    // do stuff when DOM is ready  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">在该方法里放入一个alert不会有多大意义，因为alert不需要DOM成功loaded。所以让我们尝试一些更复杂的东西:当点击该链接时显示一个alert。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a").click(function() {  </li> <li class="alt">        alert("Hello world!");  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这将在你点击该链接时显示alert。 </span><br style="color: #101fff;"><span style="color: #101fff;">让我们看看我们做了什么:$("a")是一个jQuery selector，在这里，它选择所有的</span><strong style="color: #101fff;">a</strong><span style="color: #101fff;">元素。$本身为jQuery"类"的别名，因此$()构建了一个jQuery对象。 </span><br style="color: #101fff;"><span style="color: #101fff;">我们下一步调用的click()方法为该jQuery对象的一个方法。它绑定了一个click事件到所有被选择的元素(在这里为一个单独的anchor元素)并当事件发生时执行 </span><br style="color: #101fff;"><span style="color: #101fff;">提供的方法。 </span><br style="color: #101fff;"><span style="color: #101fff;">这与下面的代码类似: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-xml" start="1"> <li class="alt"><a href="" onclick="alert('Hello world')">Link</a>  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">区别非常明显:我们不需要为每个单独的元素写一个onclick。对结构(HTML)和行为(JS)我们有一个清晰的分离，就像我们使用CSS来分离结构和呈现。 </span><br style="color: #101fff;"><span style="color: #101fff;">了解了这些，我们来对selectors和events做一些更多的东西。 </span><br style="color: #101fff;"><span style="color: #101fff;">本节里有意思的链接: </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Core" target="blank">jQuery Base</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing/Selectors" target="blank">jQuery Expressions</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Events" target="blank">jQuery Basic Events</a> <p style="color: #101fff;"><strong>Find me: 使用selectors和events</strong> <br>jQuery提供了两种方式来选择元素。第一种使用作为字符串传递给jQuery构造器的CSS和XPath选择器的联合(例如$("div > ul a"))。第二种使用jQuery对象的 <br>一些方法。两种方式可以联合。 <br>我们选择并修改我们的starterkit里的第一个排序列表来尝试一些选择器。 <br>我们以选择列表本身开始。列表有一个ID "orderedlist"。在传统的JavaScript里，你可以通过使用document.getElementById("orderedlist")来使用它。使用 <br>jQuery的话，我们像这样做: <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#orderedlist").addClass("red");  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">starterkit提供了一个带有一个class为"red"的简单的添加一个红色背景的stylesheet。因此，当你在浏览器里reload页面时，你应该看到第一个ordered list </span><br style="color: #101fff;"><span style="color: #101fff;">将拥有一个红色背景。第二个list则没变。 </span><br style="color: #101fff;"><span style="color: #101fff;">现在让我们添加一些classes到该list的子元素中。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#orderedlist > li").addClass("blue");  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这将选择id为orderedlist的元素的所有子li元素并为其添加class "blue"。 </span><br style="color: #101fff;"><span style="color: #101fff;">现在看看一个更复杂的:我们希望当用户hover到该list的最后一个li元素时添加和删除class。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#orderedlist li:last").hover(function() {  </li> <li class="alt">        $(this).addClass("green");  </li> <li class="">    },function() {  </li> <li class="alt">        $(this).removeClass("green");  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">有许多其他类似于</span><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing/Selectors#CSS" target="blank">CSS</a><span style="color: #101fff;">和</span><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing/Selectors#XPath" target="blank">XPath</a><span style="color: #101fff;">语法的选择器。更多的例子以及一个所有可得到的表达式的列表可以在</span><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing/Selectors" target="blank">这里</a><span style="color: #101fff;">找到。 </span><br style="color: #101fff;"><span style="color: #101fff;">对每个可得到的onxxx事件，像onclick，conchange，onsubmit，都有一个jQuery等价物。</span><a style="color: #101fff;" href="http://docs.jquery.com/Events" target="blank">一些其他的事件</a><span style="color: #101fff;">，像ready和hover，被提供来作为方法方便某些任务。 </span><br style="color: #101fff;"><span style="color: #101fff;">你可以在</span><a style="color: #101fff;" href="http://docs.jquery.com/Events" target="blank">jQuery Events Documentation</a><span style="color: #101fff;">里找到完整的事件列表。 </span><br style="color: #101fff;"><span style="color: #101fff;">使用这些selectors和events你已经可以做许多事情，但是这里还有一个。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#orderedlist").find("li").each(function(i) {  </li> <li class="alt">        $(this).append(" BAM! " + i);  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">find()允许你对已经选择的元素做更深的子搜索，因此$("#orderedlist").find("li")几乎和$("#orderedlist li")一样。 </span><br style="color: #101fff;"><span style="color: #101fff;">each()对每个元素迭代并允许更多的处理。大多数方法，像addClass()，自己使用each()。 </span><br style="color: #101fff;"><span style="color: #101fff;">在这个例子中，append()用来在每个元素的末尾添加一些文本。 </span><br style="color: #101fff;"><span style="color: #101fff;">另外一个你经常面对的任务是在jQuery没有cover的DOM元素上调用方法。考虑一个你想在通过AJAX成功提交后reset它的form。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    // use this to reset a single form  </li> <li class="alt">    $("#reset").click(function() {  </li> <li class="">        $("#form").reset();  </li> <li class="alt">    });  </li> <li class="">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这些代码选择ID为"form"的元素并对每个选择的元素调用reset()。当你有多于一个form时，你也可以这样做: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    // use this to reset several forms at once  </li> <li class="alt">    $("#reset").click(function() {  </li> <li class="">        $("form").reset();  </li> <li class="alt">    });  </li> <li class="">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这将在你的document里选择所有的forms，迭代它们并对每个调用reset()。 </span><br style="color: #101fff;"><span style="color: #101fff;">另一个你可能面临的问题是不选择某一个元素。jQuery为它提供filter()和not()。filter()通过满足该filter表达式来减少选择的元素，not()则相反删除掉 </span><br style="color: #101fff;"><span style="color: #101fff;">所有满足该表达式的元素。考虑一个unordered的list，你想选择所有没有ul子元素的li元素。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("li").not("[ul]").css("border", "1px solid black");  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这将选择所有的li元素并删除有ul子元素的元素。因此所有的li元素将有一个border，除了有ul子元素的。[expression]语法来自XPath并且可以用来被子元素 </span><br style="color: #101fff;"><span style="color: #101fff;">和属性filter。可能你想选择所有的有一个name属性的anchors: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a[@name]").background("#eee");  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这将对所有的有一个name属性的anchor元素添加一个background颜色。 </span><br style="color: #101fff;"><span style="color: #101fff;">比通过name选择anchors更常用的是，你可能需要通过它们的"href"属性选择anchors。由于浏览器的行为不一致这可能返回不同的"href"值(注意:这个问题最近 </span><br style="color: #101fff;"><span style="color: #101fff;">在jQuery中解决了，只要在1.1.1版本后都可以)。为了只匹配一部分值，我们可以使用包含选择"*="来代替等于"=": </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a[@href*=/content/gallery]").click(function() {  </li> <li class="alt">        // do something with all links that point somewhere to /content/gallery  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">到目前为止，所有的selectors用来选择子或filter当前选择。还有你需要选择前一个或下一个元素的情况，即所谓的siblings。考虑FAQ页面，所有的答案首先 </span><br style="color: #101fff;"><span style="color: #101fff;">隐藏，而当问题点击时显示。该jQuery代码为: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $('#faq').find('dd').hide().end().find('dt').click(function() {  </li> <li class="alt">        $(this).next().slideToggle();  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这里我们使用链来减少代码量并得到更好的性能，因为'#faq'只选择了一次。 </span><br style="color: #101fff;"><span style="color: #101fff;">通过使用end()，第一个find()不会结束，则我们可以对#faq元素继续搜索下一个find()，而不是对dd子元素操作。 </span><br style="color: #101fff;"><span style="color: #101fff;">在click处理器即传递给click()方法的function里，我们使用$(this).next()来从当前dt查找下一个sibling。这允许我们快速选择紧跟在点击的问题后的答案。 </span><br style="color: #101fff;"><span style="color: #101fff;">除了sibling，你也可以选择父元素(对属性XPath的人而言为所谓的ancestors)。你可能想对用户hover的链接的父paragraph高亮，试试这个: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a").hover(function() {  </li> <li class="alt">        $(this).parents("p").addClass("highlight");  </li> <li class="">    },function() {  </li> <li class="alt">        $(this).parents("p").removeClass("highlight");  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">对于所有hover的anchor元素，搜索它的父paragraph并添加和删除一个"highlight" class。 </span><br style="color: #101fff;"><span style="color: #101fff;">让我们继续之前了解一下:jQuery很多时候是让代码变得更短而更容易阅读和维护。以下是一个$(document).ready(callback)记号的捷径: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(function() {  </li> <li class="">    // code to execute when the DOM is ready  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">对于Hello world!例子，我们可以这样写: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(function() {  </li> <li class="">    $("a").click(function() {  </li> <li class="alt">        alert("Hello world!");  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">现在有了基本知识后，我们想explore一些其它方面，开始使用AJAX。 </span><br style="color: #101fff;"><span style="color: #101fff;">本节里有意思的链接: </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/API" target="blank">jQuery API documentation</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://visualjquery.com/" target="blank">Visual jQuery</a><span style="color: #101fff;"> - A catgorized browsable API documentation. </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing/Selectors" target="blank">jQuery Selectors</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Events" target="blank">jQuery Events</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/DOM/Traversing" target="blank">jQuery DOM Traversing</a> <p style="color: #101fff;"><strong>Rate me: 使用Ajax</strong> <br>在这个部分我们写一个小Ajax程序，它允许用户rate something，就像在youtube.com上做的一样。 <br>我们需要一些服务器端代码来完成这个。我的例子使用php文件来读"rating"参数并返回ratings的数量和平均的rating。看看<a href="http://jquery.bassistance.de/rate.phps" target="blank">rate.php</a>的服务器端代码。 <br>我们想让这个例子用Ajax来工作，因此我们用jQuery生成一些必要的东西并加到一个ID为"rating"的容器里 <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-xml" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    // generate markup  </li> <li class="alt">    $("#rating").append("Please rate: ");  </li> <li class="">  </li> <li class="alt">    for ( var i = 1; i <=5; i++ )  </li> <li class="">        $("#rating").append("<a href='#'>" + i + "</a>");  </li> <li class="alt">  </li> <li class="">    // add markup to container and applier click handlers to anchors  </li> <li class="alt">    $("$raing a ").click(function(e)   </li> <li class="">        // send request  </li> <li class="alt">        $.post("rate.php", {rating: $(this).html()}, function(xml) {  </li> <li class="">            // format and output result  </li> <li class="alt">            $("#rating").html(  </li> <li class="">                "Thanks for rating, current average: " +   </li> <li class="alt">                $("average", xml).text() +  </li> <li class="">                ", number of votes: " +  </li> <li class="alt">                $("count", xml).text()  </li> <li class="">            );  </li> <li class="alt">        });  </li> <li class="">  </li> <li class="alt">        // stop normal link click  </li> <li class="">        return false;  </li> <li class="alt">    });  </li> <li class="">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">这个代码片段生成5个anchor元素并把它们添加到id为"rating"的容器元素。最后，对容器里的每个anchor添加一个click处理器。当点击anchor时，一个以anchor </span><br style="color: #101fff;"><span style="color: #101fff;">的内容为参数的post请求发送到rate.php。结果作为一个XML返回，并添加到容器代替anchors。 </span><br style="color: #101fff;"><span style="color: #101fff;">如果你手头上没有一个安装的PHP服务器，你可以看看一个</span><a style="color: #101fff;" href="http://jquery.bassistance.de/example-rateme.html" target="blank">online example</a><span style="color: #101fff;">。对于一个非常好的甚至不用JavaScript工作的rating系统的例子，访问</span><a style="color: #101fff;" href="http://www.softonic.de/ie/51494" target="blank">softonic.de</a><span style="color: #101fff;">并 </span><br style="color: #101fff;"><span style="color: #101fff;">点击"Kurz bewerten!" </span><br style="color: #101fff;"><span style="color: #101fff;">jQuery的Ajax方法的更多的文档可以在</span><a style="color: #101fff;" href="http://docs.jquery.com/Ajax" target="blank">Ajax Documentation</a><span style="color: #101fff;">或者用Ajax开发的</span><a style="color: #101fff;" href="http://visualjquery.com/" target="blank">Visual jQuery</a><span style="color: #101fff;">上找到。 </span><br style="color: #101fff;"><span style="color: #101fff;">当通过Ajax载入内容时遇到的一个非常常见的问题是:当添加事件处理器到你的文档时，如果事件处理器也适合载入的内容，则你必须在内容载入之后也添加这些 </span><br style="color: #101fff;"><span style="color: #101fff;">处理器。为了防止代码重复，你可以写一个方法代理。例如: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">function addClickHandlers() {  </li> <li class="">    $("a.remote", this).click(function() {  </li> <li class="alt">        $("#target").load(this.href, addClickHandlers);  </li> <li class="">    });  </li> <li class="alt">}  </li> <li class="">$(document).ready(addClickHandlers);  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">现在一旦当DOM为ready以及每次当一个用户点击class为remote的链接并且内容完成载入后addClickHandlers都会被调用。 </span><br style="color: #101fff;"><span style="color: #101fff;">注意$("a.remote", this)查询，this传递过来作为一个context:对于document ready事件，this表示document，则它搜索整个document中class为remote的anchors </span><br style="color: #101fff;"><span style="color: #101fff;">当addClickHandlers用来作为load()的回调时，this表示另一个不同的元素:在这个例子中，表示id为target的元素。这防止了click事件一次又一次的赋给同一 </span><br style="color: #101fff;"><span style="color: #101fff;">链接，从而最终导致崩溃。 </span><br style="color: #101fff;"><span style="color: #101fff;">回调的另一个常见的问题是参数。你已经指定了你的回调但是需要传递一个额外的参数。达到次目标的最简单的方式是在另一个方法里包装回调: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">// get some data  </li> <li class="">var foobar = ...;  </li> <li class="alt">  </li> <li class="">// specify handler, it needs data as a parameter  </li> <li class="alt">function handler(data) {  </li> <li class="">    // ...  </li> <li class="alt">}  </li> <li class="">  </li> <li class="alt">// add click handler and pass foobar!  </li> <li class="">$('a').click(function() {  </li> <li class="alt">    handler(foobar);  </li> <li class="">});  </li> <li class="alt">  </li> <li class="">// if you need the context of the original handler, use apply:  </li> <li class="alt">$('a').click(function() {  </li> <li class="">    handler.apply(this, [foobar]);  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">使用Ajax我们可以cover许多"Web 2.0"。既然我们已经看了一些基本的Ajax，让我们添加一些简单的effects和animations到页面中。 </span><br style="color: #101fff;"><span style="color: #101fff;">本节有意思的链接: </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Ajax" target="blank">jQuery Ajax Documentation</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/API" target="blank">jQuery API</a><span style="color: #101fff;"> - 包含所有的jQuery方法的描述和例子 </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://jquery.com/demo/thickbox/" target="blank">Thick Box</a><span style="color: #101fff;"> - 一个使用jQuery来加强著名的lightbox的jQuery插件 </span> <p style="color: #101fff;"><strong>Animate me: 使用Effects</strong> <br>可以使用jQuery的show()和hide()构建的简单的animations。 <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a").toggle(function() {  </li> <li class="alt">        $(".stuff").hide('slow');  </li> <li class="">    },function() {  </li> <li class="alt">        $(".stuff").show('fast');  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">你可以使用animate()创建任何animations的联合。例如，一个具有fade的slide: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("a").toggle(function() {  </li> <li class="alt">        $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');  </li> <li class="">    },function() {  </li> <li class="alt">        $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');  </li> <li class="">    });  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">更炫的effects可以在</span><a style="color: #101fff;" href="http://interface.eyecon.ro/" target="blank">interface plugin collection</a><span style="color: #101fff;">找到。该站点提供demos和文档。虽然Interface在jQuery的插件列表的最前面，还有许多其他的插件。下一 </span><br style="color: #101fff;"><span style="color: #101fff;">部分显示了怎样使用tablesorter插件。 </span><br style="color: #101fff;"><span style="color: #101fff;">本节有意思的链接: </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Effects" target="blank">jQuery Effects Documentation</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://interface.eyecon.ro/" target="blank">Interface plugin</a> <p style="color: #101fff;"><strong>Sort me: 使用tablesorter plugin</strong> <br>tablesorter插件允许在客户端对表格排序。你只需引入jQuery和插件，并告诉插件哪个表格是你想排序的。 <br>添加以下内容到starterkit.html(下jquery引入的下面)来尝试该例子: <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-xml" start="1"> <li class="alt"><script src="lib/jquery.tablesorterjs"></script>  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">引入了该插件后，你可以像这样调用它: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#large").tableSorter();  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">试着点击table的头部并看看它怎样在第一次升序排序以及第二次降序排序。该表格可以使用一些行高亮，我们可以通过传递一些选项来添加这个: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(document).ready(function() {  </li> <li class="">    $("#large").tableSorter({  </li> <li class="alt">        // Class names for striping supplied as a array.  </li> <li class="">        stripingRowClass: ['odd', 'even'],  </li> <li class="alt">        // Stripe rows on tableSorter init  </li> <li class="">        stripeRowsOnStartUp: true  </li> <li class="alt">    });  </li> <li class="">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">在</span><a style="color: #101fff;" href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/" target="blank">tablesorter homepage</a><span style="color: #101fff;">有更多关于可得到的选项的例子和文档。 </span><br style="color: #101fff;"><span style="color: #101fff;">大多数插件可以像这样使用:引入插件文件并在某些元素上调用插件方法，传递一些选项设置来定制插件。 </span><br style="color: #101fff;"><span style="color: #101fff;">一个可得到的up-to-date插件列表可以在</span><a style="color: #101fff;" href="http://docs.jquery.com/Plugins" target="blank">jQuery Plugin site</a><span style="color: #101fff;">找到。 </span><br style="color: #101fff;"><span style="color: #101fff;">当你使用jQuery的越频繁，你可能发现把你自己的代码打包成一个插件非常有用，可以为你自己或者你的公司重用它，或者与社区分享。下一节讲述了怎样构建 </span><br style="color: #101fff;"><span style="color: #101fff;">一个插件。 </span><br style="color: #101fff;"><span style="color: #101fff;">本节有意思的链接: </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://docs.jquery.com/Plugins" target="blank">Plugins for jQuery</a><span style="color: #101fff;"> </span><br style="color: #101fff;"><a style="color: #101fff;" href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/" target="blank">Tablesorter Plugin</a> <p style="color: #101fff;"><strong>Plug me: 写你自己的plugins</strong> <br>为jQuery写你自己的插件非常简单。如果你遵循下面的规则，则其他人集成你的插件也非常简单。 <br><strong>插件命名</strong> <br>为你的插件找一个名字，让我们称我们的例子为"foobar"。创建一个名为jquery.[yourpluginname].js文件，例如，jquery.foobar.js。 <br><strong>添加一个自定义方法</strong> <br>通过扩展jQuery对象来创建一个或多个插件方法，例如: <br></p> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">jQuery.fn.foobar = function() {  </li> <li class="">    // do something  </li> <li class="alt">};  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">则通过执行下面代码就可以得到使用上面的插件: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(...).foobar();  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><strong style="color: #101fff;">默认设置:</strong><span style="color: #101fff;"> </span><br style="color: #101fff;"><span style="color: #101fff;">创建可以被用户更改的默认设置，例如: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">jQuery.fn.foobar = function(options) {  </li> <li class="">    var settings = jQuery.extend({  </li> <li class="alt">        value: 5, name: "pete", bar: 655  </li> <li class="">    }, options);  </li> <li class="alt">};  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">你可以调用该插件而不带选项，即使用默认配置: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$("...").foobar();  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">或者带一些选项: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$("...").foobar({ value: 123, bar: 9 });  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><strong style="color: #101fff;">文档</strong><span style="color: #101fff;"> </span><br style="color: #101fff;"><span style="color: #101fff;">如果你发表你的插件，你应该也提供一些例子和文档。有</span><a style="color: #101fff;" href="http://docs.jquery.com/Plugins" target="blank">许多插件</a><span style="color: #101fff;">可以作为很好的参考。 </span><br style="color: #101fff;"><span style="color: #101fff;">现在你应该具有了写插件的基本知识。让我们来写一个我们自己的插件。 </span><br style="color: #101fff;"><strong style="color: #101fff;">Checkbox插件</strong><span style="color: #101fff;"> </span><br style="color: #101fff;"><span style="color: #101fff;">很多人使用jQuery来处理表单时会问到radio buttons或checkboxes的checking和unchecking。他们常用这样的代码: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$("input[@type='checkbox']").each(function() {  </li> <li class="">    this.checked = true;  </li> <li class="alt">    this.checked = false; // or, to uncheck  </li> <li class="">    this.checked = !this.checked; // or, to toggle  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">无论何时你的代码里有一个each时，你可能想重写它为一个插件，非常直接: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">jQuery.fn.check = function() {  </li> <li class="">    return this.each(function() {  </li> <li class="alt">        this.checked = true;  </li> <li class="">    });  </li> <li class="alt">};  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">现在该插件可以使用了: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$("input[@type='checkbox']").check();  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">现在你也可以为uncheck()和toggleCheck()写插件了。但是我们通过扩展我们的插件来接收一些选项来替代。 </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">jQuery.fn.check = function(mode) {  </li> <li class="">    // if mode is undefined, use 'on' as default  </li> <li class="alt">    var mode = mode || 'on';  </li> <li class="">  </li> <li class="alt">    return this.each(function() {  </li> <li class="">        switch(mode) {  </li> <li class="alt">            case 'on':  </li> <li class="">                this.checked = true;  </li> <li class="alt">                break;  </li> <li class="">            case 'off':  </li> <li class="alt">                this.checked = false;  </li> <li class="">                break;  </li> <li class="alt">            case 'toggle':  </li> <li class="">                this.checked = !this.checked;  </li> <li class="alt">                break;  </li> <li class="">        }  </li> <li class="alt">    });  </li> <li class="">};  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">我们可以提供选项"on"，"off"和"toggle"或者默认无选项，例如: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$("input[@type='checkbox']").check();  </li> <li class="">$("input[@type='checkbox']").check('on');  </li> <li class="alt">$("input[@type='checkbox']").check('off');  </li> <li class="">$("input[@type='checkbox']").check('toggle');  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><strong style="color: #101fff;">可选设置</strong><span style="color: #101fff;"> </span><br style="color: #101fff;"><span style="color: #101fff;">写多于一个设置选项会变得复杂，因为如果用户想省略第一个参数而只使用第二个参数时他必须传递一个null值。 </span><br style="color: #101fff;"><span style="color: #101fff;">上一节中对tablesorter的使用证明了使用一个对象来解决这个问题。用户可以省略所有的参数或者为每个他想override的设置传递一个具有键/值对的对象。 </span><br style="color: #101fff;"><span style="color: #101fff;">出于练习，你可以尝试重写第4节的Voting代码为一个插件。插件骨架可能看起来像这样: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">jQuery.fn.rateMe = function(options) {  </li> <li class="">    // instead of slecting a static container with  </li> <li class="alt">    // $("#rating"), we now use the jQuery context  </li> <li class="">    var container = this;  </li> <li class="alt">  </li> <li class="">    var settings = jQuery.extend({  </li> <li class="alt">        url: "rate.php"  </li> <li class="">        // put more defaults here  </li> <li class="alt">    }, options);  </li> <li class="">  </li> <li class="alt">    // ... rest of the code ...  </li> <li class="">  </li> <li class="alt">    // if possible, return "this" to not break the chain  </li> <li class="">    return this;  </li> <li class="alt">});  </li> </ol> </div> </div> <script>render_code();</script> <br style="color: #101fff;"><span style="color: #101fff;">则可以允许你像这样允许该插件: </span><br style="color: #101fff;"> <div style="color: #101fff;" class="code_title">代码</div> <div style="color: #101fff;" class="code_div"> <div class="dp-highlighter"> <ol class="dp-j" start="1"> <li class="alt">$(...).rateMe({ url: "test.php" });  </li> </ol> </div> </div> <script>render_code();</script> <p style="color: #101fff;"><strong>Next steps</strong> <br>如果你计划开发更多的JavaScript，你应该考虑称为<a href="http://www.joehewitt.com/software/firebug/" target="blank">FireBug</a>的Firefox插件。它提供一个console(很好的替代alerts)，一个debugger和其他有用的stuff来为 <br>JavaScript开发。 <br>如果你有不能解决的问题、想分享的主意或者只是需要用jQuery表达你的看法，请自由舒畅的post给<a href="http://jquery.com/discuss/" target="blank">jQuery mailing list</a>。 <br>对于与本指南相关的任何东西请在我的<a href="http://bassistance.de/index.php/2006/09/12/jquery-getting-started-guide/" target="blank">blog</a>上post一个comment或者直接联系我。 <br><strong>Whats left...</strong>Thanks a lot to John Resig for this greate library! Thanks to the jQuery community for providing John with enough coffee <br>and everything else!</p> <br style="color: #101fff;"> <br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/sutao/" target="_blank">苏醄</a> 2007-08-17 15:41 <a href="http://www.blogjava.net/sutao/articles/137560.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

BlogJava-WOLF--执着-文章分类-AJAX-Js

js收藏