Shell(也就是这篇文章的作者)也属于刚会用JQuery的类型。在学习的过程中,尤其是入门初期,会遇到很多问题。一直在准备写一些关于JQuery的文章,但是怕自己写作和表达能力有限,会‘误导孩子’。最后,我鼓起勇气。文章如有错误或理解不当,希望朋友们直接指出批评。
这篇文章的目的是授人以鱼不如授人以渔。我只说关键的部分,我也不可能把JQuery的每个函数都讲一遍,因为有很多函数外壳我都没有在实际应用中用过。但是我们已经可以钓鱼了,为什么还要担心鱼呢!
BTW: Shell假设你已经掌握了基本的JavaScript技能和基本的CSS知识。
JQuery是什么
JQuery只是一个JS文件
人们总是对新职业表示好奇和排斥,壳牌刚开始学的时候也是一样。想掌握,又怕自己学不会其实JQuery很简单.
010-5900JQuery实际上是一个工具包。很多常用的函数都被好心人打包了,我们真的需要直接调用(有点类似SDK)。我们现在不讨论具体的内部原理和实现。
记住JQuery很简单,很方便. 目前jQuery最新发布版本为1.32,官方下载地址为http://docs.jquery.com/Downloading_jQuery.
JQuery有两个版本:
一种是未压缩版本(uncompressed version),主要用于开发。
另一种是缩小版。当开发完成后,您可以使用这个版本。
两个版本的区别
文件大小不同,最终用户可以在浏览时减少下载JS的等待时间。
未压缩版本文件大小为118KB。
缩小版的文件大小为56KB。
本系列教程基于1.32版进行讲解.
010-59001站在巨人的肩膀上
别人发明了轮子,我们就不用自己再造一个了。
二、强大的BOM、DOM、CSS、事件操作能力
我最常用的是CSS和DOM,真的很方便。
第三,更简洁的代码
我自己的亲身经历,比如用JavaScript给两种颜色的表TR码编号,JQuery只需要两行。
第四,浏览器独立
做过JavaScript开发的人都知道,JavaScript有时候在不同的浏览器中表现不一样,我们要针对不同的浏览器编写相应的代码。JQuery已经在这个方法中被内部处理了,所以我们只是使用它。
五、良好的性能
我是有自知之明的,至少我的JavaScript代码没有JQuery的高效。
JQuery能带给我们什么
万年之始,难。第一次用JQuery的时候很害怕,不知道怎么用。其实很简单。我们用一个例子来说明。)
创建一个html文件,比如index.html,放在和JQuery库文件jquery-1.3.2.js相同的目录下(实际上可以放在那里)。
首先我们解决JQuery的引用。代码如下:
超文本标记语言
头
标题查询测试/标题
脚本语言=' JavaScript ' src=' jquery-1 . 3 . 2 . js '/script
/头
身体
/body
/thml
现在,让我们扩展一个函数,让index.html显示一个表格,表格中每一行的颜色都不一样,即奇数行是一种颜色,偶数行是另一种颜色。
Index.html代码结构:
htmlheadmeta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/title jquery test/title style type=' text/CSS '
/*table中的偶数行*/。tabbeven { background:# ff 0000;}
/*table中的奇数行*/。tab odd { background:# 00ff 00;} /style脚本语言=' JavaScript ' src=' jquery-1 . 3 . 2 . js '/script脚本语言=' JavaScript ' type=' text/JavaScript '/![CDATA[ $(文档)。ready(function(){ $(' # tab test tr:even ')。add class(' tab even ');$('#tabTest tr:odd ')。add class(' tab odd ');});//]]/script/head body table id=' tab test ' tbody trtd快购网_ 1/Td td1/Td/tr tr tr Td快购网_2/td td1/td /tr tr td快购网_3/td td1/td /tr tr td快购网_ 4/Td td1/Td/tr/tr Td快购Lizhong.com _ 5/tdtd D1/Td/tr/tbody/table/body/thml
效果如下:
代码解析:
$(文档)。ready(function(){ $(' # tab test tr:even ')。add class(' tab even ');$('#tabTest tr:odd ')。add class(' tab odd ');});
$(文档)的功能。ready很简单,就是等待内部加载完所有页面再执行JavaScript代码(别忘了JQuery也是Javascript代码)。几乎所有使用JQuery的代码都会用到这个函数。因为如果我们的JavaScript代码中存在DOM操作,那么在页面被完全读取之前,整个DOM框架还没有真正建立起来,在此之前的DOM操作是无效的。
$('#tabTest tr:even ')。add class(' tab even ');添加CSS样式$ ('# tabTesttr: odd ')。为id为tabtest的表的偶数行添加名为tabEven的class(' tab odd ');为id为tabTest的表的奇数行添加名为tabEven的CSS样式。
如何使用JQuery
红色的那一行代码就完成了JQuery的引用,简单吧!
作者:万思杰
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。