jquery无废话系列教程(一)JQuery入门[推荐]

这篇文章的目的是，授人以鱼不如授人以渔。我只能说关键部分。我不可能讲JQuery的每一个函数，因为有很多函数外壳从来没有在实际应用中使用过。但是当我们可以钓鱼的时候，为什么要担心鱼呢？BTW: shell假设您已经掌握了使用JavaScript的基本能力和基本的CSS知识。什么是JQuery？JQuery只是一个JS文档。人们总是对新的事业表示好奇和排斥，贝壳刚开始学习的时候也是如此。如果你想掌握它，你害怕你不会学习它。事实上，JQuery非常简单。JQuery实际上是一个工具包。很多常用的函数已经被好心人打包了，所以我们真的需要直接调用它们(有点类似于SDK)。我们现在不讨论具体的内部原理和实现。请记住，JQuery既简单又方便。目前jQuery最新的Release版本是1.32。官方下载地址是：http://docs.jquery.com/Downloading_JQuery.本系列教程基于1.32版本。jQuery有两个版本：一个是未压缩版本，主要用于开发。另一个是迷你版。当开发缩小时，你可以用这个版本来代替。两个版本的区别在于文件大小不同，所以终端用户在浏览时可以减少下载JS时的等待时间。未压缩版本的文件大小为118kb，缩小版本的文件大小为56kb。jquery能给我们带来什么？第一，站在巨人的肩膀上，别人发明了轮子，所以我们不需要自己再造一个。二是强大的BOM、DOM、CSS和事件的操作能力。我用CSS和DOM最多，真的太方便了。第三，更简洁的代码，比如两种颜色的Table中的TR代码，如果用JavaScript来编号，需要几十行代码，JQuery只需要2行。第四，与浏览器无关。如果你做过JavaScript开发，你就会知道JavaScript有时候在不同的浏览器下表现不一样，所以我们要为不同的浏览器编写相应的代码。JQuery已经在这个方法中进行了内部处理，所以我们只需要使用它。5.我对良好的表现有自知之明。至少我写的JavaScript代码没有JQuery那么高效。万年之初很难使用JQuery。第一次用JQuery的时候很害怕。我不知道如何使用它。其实很简单。让我们用一个例子来说明创建一个html文件。例如，index.html被放在与JQuery库文件JQuery-1.3.2.js相同的目录中(事实上，你可以把它放在那里)。首先，我们解决jquery的引用问题。代码如下： html head title JQuery test/Script language=' JavaScript ' src=' http : jquery-1 . 3 . 2 . js '/Script/head body/thml，代码红线完成jquery的引用，简单！现在我们扩展一个函数，让index.html显示一个表格，表格中每一行的颜色都不一样。也就是说，奇数行是一种颜色，偶数行是另一种颜色。index.html的代码结构是： html heartheta http-equiv=' content-type ' content=' text/html；charset=utf-8 '/title jquery test/title style type=' text/CSS '/*表中的偶数行*/。tab even { background : # ff 0000；}/*表中的奇数行*/。tabodd { background: # 00ff00} /style脚本语言=' JavaScript ' src=' http : jquery-1 . 3 . 2 . js '/script脚本语言=' JavaScript ' type=' text/JavaScript '//！[CDATA[ $(文档)。ready(function(){ $(' # TabTest tr : even ')。addCLaSS(' TABeven ')；$('#tabTest tr:odd ')。addCLaSS(' TabOdd ')；});//]]/script/head dy table id=' tab test ' t body tr t quick buy受益网_ 1/TDT D1/TD/tr t quick buy受益网_ 2/TDT D1/TD/tr t quick buy受益网_ 3/TDT 1/TD/tr t quick buy受益网_ 4/TD td1/Td/tr t TD快速购买受益网_ 5/TDT D1/Td/tr/t body/table/body/thml影响如下3360 (9500.163

解析代码： $(文档)。ready(function(){ $(' # tab test tr : even ')。add class(' tab even ')；$('#tabTest tr:odd ')。addCLaSS(' TabOdd ')；});$(文档)的功能。ready非常简单，就是在执行JavaScript代码之前，等待所有页面在内部加载完毕(不要忘记JQuery也是Javascript代码)。几乎所有使用JQuery的代码都使用这个函数。因为如果我们的JavaScript代码中有DOM操作，那么在网页没有被完全读取的时候，整个DOM框架还没有真正建立起来，在此之前的所有DOM操作都是无效的。$ ('# tabtest tr:even ')。add class(' tab even ')；添加名为tabEven $ ('# tabTest tr:odd ')的CSS样式。向id为tabtest的表的偶数行添加class(' tab奇数')；向id为tabTest的表的奇数行添加名为tabEven的CSS样式。最后，初学者永远不要被奇怪的代码淹没。请记住，JQuery非常简单。作者信息为3.336亿四杰。