CINXE.COM

<!DOCTYPE HTML> <html> <head> <meta charset="gbk" /> <title>介绍一个javascript库－－jquery</title> <meta name="description" content="8月26日，jquery发布了1.0版。jquery是一个轻便的，精简的&#106avascript库，可以通过非常方便的代码实现强大的功能。jquery支持各种浏览器：Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+. j......T086.com"> <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.t086.com/article/3448" > <link href="/css/hx.css" rel="stylesheet" type="text/css"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6954704791417392" crossorigin="anonymous"></script> </head> <body> <div id="wrap"> <div id="top_bar"> <a href="/" target="_blank">T086学习网</a> | <a href="/article/">站长学院</a> | <a href="http://www.t086.com/code/" target="_blank">技术文档</a> | <a href="http://chengyu.t086.com/" target="_blank">成语</a> | <a href="http://xhy.t086.com/" target="_blank">歇后语</a>  | <a href="https://ip.t086.com/" target="_blank">IP地址查询</a> | <a href="https://shengri.t086.com/" target="_blank">生日密码</a> | <a href='https://shengri.t086.com/flower/' target="_blank">生日花语</a> | <a href="/tools/csstidy/" target="_blank">CSS压缩</a> | <a href="/zidian/" target="_blank">在线字典</a>  </div> <div class="menuskin" id="popmenu" onmouseover="clearhidemenu()" style="Z-INDEX: 100" onmouseout="dynamichide(event)"></div> <div class="menu_title"> <a href="/">首页</a> | <a href="/article/">文章首页</a> | <a href="/class/it" onmouseover="showmenu(event,'','menu1')">IT资讯</a> | <a href="/class/wangzhan_yunying" onmouseover="showmenu(event,'','menu5')">网站运营</a> | <a href="/class/webdesign" onmouseover="showmenu(event,'','menu2')">网站制作</a> | <a href="/class/program" onmouseover="showmenu(event,'','menu3')">网络编程</a> | <a href="/class/study" onmouseover="showmenu(event,'','menu4')">学习认证</a> | <a href="/class/good">精彩好文</a> | <a href="/class/game">游戏攻略</a> | <a href="/class/others">其它精选</a> | <a href="/article/new">最新文章</a> | <a href="/article/hot">热门文章</a> | <a href="/article/elite">推荐文章</a> | <a href="/zidian/">汉语字典</a> </div> <div id="a1"> </div> <script src="/js/common.js"></script> <script src="/js/main.js"></script> <div id="place"> <div id="place1">您的位置：<a href="/">IT学习者</a> > <a href='/article/'>文章大全</a> > <a href="/class/program">网络编程</a> > <a href="/class/ajax">ajax</a> > <a href="/article/3448">介绍一个javascript库－－jquery</a></div> <div id="place2"><form action="/so.php" target="_blank"> <input type="text" name="q" value="" maxlength="50" size="18" class="so_q"> <input name="cl" value="2" type="hidden"> <input type="submit" name="Submit" value="站内搜索"></form></div> </div> <div id="main"> <div id="con"> <div id="show"> <h1>介绍一个javascript库－－jquery</h1> <div id="articleinfo">【动易官方博客作者：壮志更新时间：2006-09-20 | 字体：<a href="javascript:ContentSize(16)">大</a> <a href="javascript:ContentSize(14)">中</a> <a href="javascript:ContentSize(12)">小</a>】</div> <div id="summary">[<strong>导读</strong>]8月26日，jquery发布了1.0版。jquery是一个轻便的，精简的&#106avascript库，可以通过非常方便的代码实现强大的功能。jquery支持各种浏览器：Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+. j...</div> <div class="c" style="clear:both;"> </div> <div id="articlecontent"> <P>8月26日，jquery发布了1.0版。<BR>jquery是一个轻便的，精简的&#106avascript库，可以通过非常方便的代码实现强大的功能。<BR>jquery支持各种浏览器：Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+. </P> <P>jquery的官方主站：<A href="http://jquery.com/"><FONT color=#0000ff>http://jquery.com/</FONT></A><BR>jquery的文档资料：<A href="http://jquery.com/docs/"><FONT color=#0000ff>http://jquery.com/docs/</FONT></A><BR>jquery的下载地址：在官方主站首页就可以下载到，压缩后的大小为17.1k，确实小巧。</P> <P>下面是一些相当jquery的使用说明和功能介绍：</P> <P>如果你现在还没有建立起来一个基本的测试页面，那我建议你建立一个新的HTML页面，并加入下面的代码来作为练习的开始：</P> <P><html><BR><head><BR><script type="text/&#106avascript"<BR>xsrc="http://jquery.com/src/latest/" mce_src="http://jquery.com/src/latest/" ></script><BR><script type="text/&#106avascript"><BR>// Your code goes here<BR></script><BR></head><BR><body><BR><a xhref="http://jquery.com/" mce_href="http://jquery.com/" >jQuery</a><BR></body><BR></html></P> <P><STRONG>domcument准备完成时加载代码</STRONG></P> <P>很多&#106avascript的开发人员习惯性的把类似下面的代码作为他们程序代码的开始：<BR>window.onload = function(){ ... }<BR>在页面加载的时候立即运行{}中的代码。问题是：在页面中的所有的图片还没有下载完成的时候这些代码是不会运行的。而当你想让你代码第一时间运行的时候，选用window.onload的理由得归咎于html document还没有下载完成这个事实。为了巧妙的饶开上面的两个问题，你可以使用jQuery提供的一个很简单的语句：</P> <P>$(document).ready(function(){<BR>// Your code here<BR>});</P> <P>上面的代码将检查document并且一直等到domcument对象可以被操纵—这也正是我们所期望的！将上面代码复制到你html页面的js区域，写一些代码测试一下喔 ^_^</P> <P><STRONG>让一些事情发生在鼠标点击时</STRONG></P> <P>首先，我们看看在点击一个超链节发生了什么。添加下面的代码：</P> <P>$("a").click(function(){<BR>alert("Thanks for visiting!");<BR>});</P> <P>保存并重新加载你的html页面，点击页面上的超链节。在你离开本页面准备转到jQuery.org之前会弹出一个对话框。</P> <P><STRONG>添加一个Class </STRONG></P> <P>另外一个基本的任务就是为一个元素添加/移除一个Class。请看下面的例子：<BR>$("a").addClass("test");<BR>或者<BR>$("a").removeClass("test");</P> <P><STRONG>特效</STRONG></P> <P>在<A href="http://jquery.com/docs/fx/"><STRONG><FONT color=#116699>Basic Effects</FONT></STRONG></A> 部分，提供了几个经常使用的特殊效果，让你的网站更有吸引人魅力。我们来做一个小小的测试，修改之前添加的那个超链接的click方法：<BR>$("a").click(function(){<BR>$(this).hide("slow");<BR>return false;<BR>});</P> <P>现在你点击这个超链接，你将会发现这个它会慢慢的消失在你的视线中。可以在<A href="http://feedpile.com/"><STRONG><FONT color=#116699>Feed Pile.com</FONT></STRONG></A>找到更多的特效。</P> <P> </P> <P>另：还有一个15天学习jquery的教程（英文）<BR><A href="http://15daysofjquery.com/">http://15daysofjquery.com/</A></P> <div class="cutpage"></div> </div> <div id="share"> <div style="float:left;width:120px;"><wb:like type="number"></wb:like></div> <div class="share"> <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <span class="bds_more">分享到：</span> <a class="bds_qzone">QQ空间</a> <a class="bds_tsina">新浪微博</a> <a class="bds_tqq">腾讯微博</a> <a class="bds_renren">人人网</a> <a class="bds_baidu">百度搜藏</a> <a class="bds_tieba">贴吧</a> </div> </div> </div> <div id="articlereadme"> <ul> <li>转载请注明来源：<a href="http://www.t086.com/">IT学习网</a> 网址：http://www.t086.com/ <a href="javascript:RecToClipBoard()" title="点击复制本页地址到剪贴版，直接在MSN/QQ上粘贴即可" style="font-weight:bold;color:#F00;height:20px;line-height:20px;">向您的朋友推荐此文章</a> </li> <li>特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。</li> </ul> </div> <div id="comment"> </div> <div id="articleprenext"> <ul> <li>上一篇：<a href="/article/3447" target="_self" title="prototype.js　1.4版开发者手册">prototype.js　1.4版开发者手册</a></li><li>下一篇：<a href="/article/3449" target="_self" title="动易领军人物webboy印象">动易领军人物webboy印象</a></li><li><a href="/archive/200609">查看2006年09月的文章归档</a></li> </ul> </div> </div> <div class="main_t4"><a href="/article/3448/relate">相关文章</a> ( <a href="/tags/javascript">javascript</a>  <a href="/tags/jquery">jquery</a>  )</div> <div class="main_c4"><li><a href="/article/5121">译：45个实用的JavaScript技巧、窍门和最佳实践</a></li><li><a href="/article/4561">怎样成为优秀的前端工程师</a></li><li><a href="/article/4490">Javascript 最佳实践 – 14条最佳JS代码编写技巧</a></li><li><a href="/article/4313">Javascript的Defer属性</a></li><li><a href="/article/4301">javascript压缩和gzip压缩测试对比</a></li><li><a href="/article/4113">优化JavaScript脚本的性能</a></li><li><a href="/article/4003">JavaScript实现多维数组多键值排序方法</a></li><li><a href="/article/4002">Javascript数组sort方法的分析</a></li><li><a href="/article/4001">javascript 的几种排序方法</a></li><li><a href="/article/3926">在javascript嵌套时的执行顺序问题</a></li><li><a href="/article/3666">JavaScript的replace方法与正则表达式结合应用讲解</a></li><li>了解这些字：<a href="/zidian/介" target="_blank">介</a> <a href="/zidian/绍" target="_blank">绍</a> <a href="/zidian/一" target="_blank">一</a> <a href="/zidian/个" target="_blank">个</a> <a href="/zidian/库" target="_blank">库</a> </li></div> <div> </div> <div class="search" id="a2"></div> <div class="plus"> </div> </div> <div id="side"> <div class="left_box" style="border-top:0px"> <div class="left_title"><a href="/article/elite">最新推荐</a></div> <div class="left_main"><ul><li>·<a href="/article/5225">张小龙2016年领导力大会末内部分享：警惕KPI和流程</a></li><li>·<a href="/article/5206">caoz谈能力成长系列 - 取舍之道</a></li><li>·<a href="/article/5180">解读《百度网页质量白皮书》潜台词</a></li><li>·<a href="/article/5176">创业像开车，而不是发火箭</a></li><li>·<a href="/article/5161">雷霆战机装备搭配攻略_雷霆战机装备大全</a></li><li>·<a href="/article/5158">能花钱的，就不要花时间</a></li><li>·<a href="/article/5145">时间管理：吃掉三只青蛙吧！</a></li><li>·<a href="/article/5040">成语玩命猜ipad,iphone版全部答案</a></li><li>·<a href="/article/5035">疯狂猜图答案</a></li><li>·<a href="/article/5018">caoz:数据分析这点事</a></li></ul></div> </div> <div class="left_box"> <div class="left_title"><a href="/article/hot_month">本月热门</a></div> <div class="left_main"><ul><li>·<a href="/article/5051">苹果电脑MACbook Air快捷键大全</a></li><li>·<a href="/article/3723">成语中的颜色</a></li><li>·<a href="/article/5001">所有浏览器的userAgent为何都带Mozilla</a></li><li>·<a href="/article/4138">比YOUTUBE更好的五个国外视频分享网站</a></li><li>·<a href="/article/3582">Smarty程序应用范例：留言簿（Guestbook）</a></li><li>·<a href="/article/5138">nslookup命令详解</a></li><li>·<a href="/article/5090">如何判断IP地址是A类B类还是C类</a></li><li>·<a href="/article/4837">20款免费的在线PDF转换工具</a></li><li>·<a href="/article/2127">关于蛇的成语</a></li><li>·<a href="/article/1">Google搜索从入门到精通v4.0</a></li></ul></div> </div> <div class="left_box"> <div class="left_title"><a href="/article/hot_week">本周热门</a></div> <div class="left_main"><ul><li>·<a href="/article/5051">苹果电脑MACbook Air快捷键大全</a></li><li>·<a href="/article/3723">成语中的颜色</a></li><li>·<a href="/article/5001">所有浏览器的userAgent为何都带Mozilla</a></li><li>·<a href="/article/3582">Smarty程序应用范例：留言簿（Guestbook）</a></li><li>·<a href="/article/2126">关于马的成语</a></li><li>·<a href="/article/4110">php.ini 文件配置详解</a></li><li>·<a href="/article/4138">比YOUTUBE更好的五个国外视频分享网站</a></li><li>·<a href="/article/2516">什么是Web 2.0</a></li><li>·<a href="/article/4837">20款免费的在线PDF转换工具</a></li><li>·<a href="/article/5225">张小龙2016年领导力大会末内部分享：警惕KPI和流程</a></li></ul></div> </div> <div class="left_box"> <div class="left_title"><a href="/article/new">最新文章</a></div> <div class="left_main"><ul><li>·<a href="/article/5254">易方达基金经理张坤谈净利润到股东回报</a></li><li>·<a href="/article/5253">于洋对天弘甄选食品饮料2020四季度的投资策略和运作分析</a></li><li>·<a href="/article/5252">关于调整上证50、科创50等上证指数样本的公告</a></li><li>·<a href="/article/5251">上证50是哪些股票_上证50权重最新排名</a></li><li>·<a href="/article/5250">沪深300、上证50和中证500等指数2019年第二次定期调整样本股</a></li><li>·<a href="/article/5249">沪深300价值/成长指数编制方案调整，中国平安权重下降</a></li><li>·<a href="/article/5248">中证指数调整上证50等指数样本股</a></li><li>·<a href="/article/5247">中证指数调整中证红利指数样本股</a></li><li>·<a href="/article/5246">中证指数调整中证100指数样本股</a></li><li>·<a href="/article/5245">中证指数调整沪深300指数样本股</a></li></ul></div> </div> <div id="content_a"></div> </div> </div> <div class="clear"></div> <script type="text/javascript"> document.body.oncopy=function(){ event.returnValue=false; var t=document.selection.createRange().text; t += "\r\n本文转摘自『IT学习者』" + document.location.href; clipboardData.setData('Text',t); } </script> <script type="text/javascript" src="/js/show.js"></script> <div class="menu_popup" id="menu1"> <div class="menuitems"><a href="http://www.t086.com/class/it_news">IT业界资讯</a><br> <a href="http://www.t086.com/class/it_comment">IT业界评论</a><br> <a href="http://www.t086.com/class/it_career">IT人生</a><br> <a href="http://www.t086.com/class/it_elite">IT人物</a> </div></div> <div class="menu_popup" id="menu2"> <div class="menuitems"><a href="http://www.t086.com/class/web_news">网站制作相关</a><br> <a href="http://www.t086.com/class/html_css">HTML&CSS</a><br> <a href="http://www.t086.com/class/photoshop">Photoshop</a><br> <a href="http://www.t086.com/class/micromedia">网页三剑客</a><br> <a href="http://www.t086.com/class/server">服务器</a> </div></div> <div class="menu_popup" id="menu3"> <div class="menuitems"><a href="http://www.t086.com/class/asp">ASP技术</a><br> <a href="http://www.t086.com/class/php">PHP</a><br> <a href="http://www.t086.com/class/java">Java/JSP</a><br> <a href="http://www.t086.com/class/xml">XML学习</a><br> <a href="http://www.t086.com/class/asp.net">ASP.NET</a><br> <a href="http://www.t086.com/class/vb">VB学习</a><br> <a href="http://www.t086.com/class/database">数据库开发</a><br> <a href="http://www.t086.com/class/ajax">AJAX</a> </div></div> <div class="menu_popup" id="menu4"> <div class="menuitems"><a href="http://www.t086.com/class/computer">电脑教室</a><br> <a href="http://www.t086.com/class/network_security">网络安全</a><br> <a href="http://www.t086.com/class/office">办公一族</a><br> <a href="http://www.t086.com/class/jincheng">进程知识库</a><br> <a href="http://www.t086.com/class/job">求职招聘</a><br> <a href="http://www.t086.com/class/management">管理技巧</a><br> <a href="http://www.t086.com/class/meiguo-zhuji">美国主机</a><br> <a href="http://www.t086.com/class/english">英语学习</a> </div></div> <div class="menu_popup" id="menu5"> <div class="menuitems"><a href="http://www.t086.com/class/seo">搜索引擎优化</a><br> <a href="http://www.t086.com/class/zhanzhang_zhuanqian">站长赚钱</a><br> <a href="http://www.t086.com/class/tuiguang_chaozuo">推广炒作</a><br> <a href="http://www.t086.com/class/lianmeng">联盟动态</a> </div></div> <div id="bottom"> <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> <a class="bds_qzone"></a> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_renren"></a> <a class="bds_baidu"></a> <a class="bds_tieba"></a> <span class="bds_more">更多</span> </div> <div> <a href="http://www.9enjoy.com/guestbook.php" target="_blank">留言建议</a> | <a href="http://aspcheck.9enjoy.com/" target="_blank">ASP探针</a> | <a href="http://www.9enjoy.com/phpcheck/" target="_blank">PHP探针</a> | <a href="http://www.9enjoy.com" target="_blank">站长Enjoy的Blog</a> </div> <div>© 2017 <a href="http://www.t086.com/">T086学习网</a> - T086.com(原itlearner.com) <script id="bdshare_js" data="type=tools&uid=630456" ></script> <script id="bdshell_js"></script> <script>document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)</script> <script src="/js/tj.js"></script> </div> </div> </div></body> </html><div id="runtime">RunTime:9.49ms QueryTime:7</div>