2014年辛星web前端教程贺岁版第七本即jQuery教程

所需积分/C币:10 2014-10-22 10:37:14 1.52MB PDF
12
收藏 收藏
举报

这是辛星2014年web前端系列教程的第六本即css3教程,希望对您有所帮助。
;;☆;;;;☆;☆;;;;;;六;κ;;;;;;;;;κ;κ;;κ冫;冫;κκκ;;κ;κ;;;κ;;κ冫六 目录 前言 4 第一节: jQuery快速入 第二节:常用动画效果…… 10 第三节:操纵HTML元素…… 。番D。· 19 第四节:Ajax的使用……… 26 第五节:总结 附录:一起交流 32 次次次次次次次出次次次次次六出次次次六兴六次次次六出水次次次*次兴次出次次六兴次次次六出次次 3/32 前言 >>>>>3>> Javascript犀<<<<<<<<<<<<<<<<<<< 1.要说 Javascript庳大家喜欢哪一个,可能大家都有各自喜欢的类库, 但是要说哪一个 Javascript年流行最广,影响最大,可能还得属 Query 2.而且 jQuery也由于宅的易学易用和小巧,也是拥有了不少的粉丝, 当然,我就是其中之一。 3.读过不少介绍 jQuery的书,大部分都忘记名字了,印象深刻的 本叫做《峰利的 jQuery》,原因就是这个名字本身给我的卬象就很 深刻 4.市面上讲 jQuery的书肯定是很多的,因为这门技术实在是比较火 爆,可以说是绝大多数人都会去掌握的一门技术。 >>>>>>>>>> jQuery的历史<<<<<<<<<<<<<<<< IjQuery的第一个发行版是2006年8月,距今也有八年的历史了, 当前的最新版本是 jQuery2.1 2.在当今世界的前10000个访问最多的网站中,有超过百分之五十 五的网站使用了 jQuery o 3.而且 jQuery是开源、免费的,而且还有大量的插件供开发者选择。 4.2013年3月 jQuery.2.0Beta2发布,而且宅们不再支持E6、lE7、 lE8,同期的 jQuery1.9还是支持的 5.而且 jQuery的开发团队同肘开发 jQuery1X糸列和2.Ⅹ糸列,截 止今夭, jQuery1×的最新版是1.1.1, jQuery2.x的最新版是2.1.1 6.其实我们经常会见到两个两个糸列的版本同肘维护的情况,这样 做的主要原因就是这两个版本之间彼此不兼容,而且差别较大。 7.其实这样的例子有很多的,比如 python语言的2×糸到和3×糸 列就是同更新的,回到 jQuery,我们这里还是讲1.X糸到的。 4/32 >>>>>>>>>>>>下载与安裝<<<<<<<<<<<<<< jqUery的下载可以去http://jquery.com截图如下 e iquery Punt Curtriult Mnls Suppot c ery Fou'daim CjOs pe 在此处下载,其 由ma 实还是特别醒目 unload API Documentation Blog Plugins Browser Support searc a Download jQuery L1p21 适eon Lightweight csS3 Compliant Cr855-BI0W5B Hw ue Woka Footprint 2.点进去之后,选择合适的版本下载就可以了,截图: EDowmlosd QueryIjQu K + Jquery. com,/download! deveapment or debugging the compressed tile saves bandwan and mproves perormance in production You can als downnad a sprremap fle for use when debagging wh a compressed fie The map file is not required for iisersin nn Query, it just mproves the deve s debugger expenence. As of Query 1.11.021.0 the //s sourceHappingURL comment Is not inclued in the compressed fie To cay download thase files night cick the ink and select " Save 3s from the menu jQuery.x 我下载的是这个压缩过 in if you are upgrading from pre.19m间 fry ox need to usE p可s/小给。文件,它会更 Cuery 19 parade Guide and the puer Ig elease bing post for more fomat Downigad the compressed roducton iQuery 1111 Dowmigad the uncompressed development Quer 11 Downkad the mao fic for ucr 111.1 Query 1 111 reeasengles jQuery 2.x 3.下载下来之后,我们重命名为 jquery S,这样方便引用的肘候方 便书写。 5/32 第一节: jQuery快速入门 >>>>>>>>>>>第一个程序<<<<<<<<<<<<<<<<< 1.前面我们说过把下载的 jQuery代码重命名为 jquery s,那我们开 始写我们的第一个 jQuery程序。 2.我们书写代码如下: E DA Users\Administrator\ Desktop'\my html -Sublime Text 2 文编辑逝 导入我们的 jQuery文件 ①项E百选项N邦 my.html 1 <html> 2 head> <script src =jquery. js><script> 我们今后< script> 的大部分 代码也写 s( document). ready(function()f 在这里面 aert("辛星和您共同成长"); }) </script> </head> 18</htm1> alert-是js的内置函数,是产生—个弹 窗,括号巾的是显示文本 3.上面就是我们的第一个 jQuery程序了,下面我仔细说明一下。 4.第一二行和第九行、第十行都是htm内容,第三行导入了 jQuery 文件,第四行和第五行是我们写 Javascript的标记。 5.第五行中的S( document) ready0;是在html文档加载完毕之后执 行的内容,我们今后的 jQuery一般都是写到这里面,至于宅的语法 为什么这么写,学习完这一节大家就会明白了。 6.第六行的 alert(“辛星和共同成长”);就是 Javascript代码了, 由于 jQuery是一个 Javascrⅰpt库,因此在里面使用 Javascript代码 是理所当然的。 7.差点忘了,它的运行截图如下 6/32 虽然我们用纯 Javascrip饼并 不难做到,但是这是 tor/Desktop/my. htm 用 jQuery的方式去做这件事 ascript提醒 辛星和您共同成长 确定 >>>>>>>>>>> jQuery的语法<<<<<<<<<<<<<<< IjQuery的语法非霈一致,为什么这么说咒,我们先看一个例子。 2.代码实倒: mmy.html 1 <html 2 head> 3? <script src =jquery. js></script 48<script> s(document). ready (function oi 6 $("p").c1ick( function(){aert("我被点击")}); </script> 9 </head> 叉是这个$难道它有什么 10 <body> 特殊的魔力? 11<p>辛星 JQuery,值得关注</p> 12 </body> 我们写的一段文本 13</htm1 3.它的运行效果: 7/32 □ my.html 就会出现这个 +ce/D/ Users/Administrator/Desktop/my. html弹窗 辛星 uery,值得关注 Javascript提醒 我被点击 每次我们点击这个文本 确定 4.这里我们每次点击郡个文本,宅就会出现这个弹窗。 5这里的S(“p”)表示我们选中了p标签,后面的;lick表示当发生 点击事件的时候,乞的参数是一个函数,也就是我们的 function() { alert(“我被点击”);}. 6.其实我们的大多教 jQuery语句都是采用这样的书写方式,先用$0 这种写法选择相应的HTML元素,然后写对于该HTML元素的操作, 这些操作可能是响应鼠标点击等事件,具体我们后面再介绍。 >>>>>>>>>>>>>选择器<<<<<<<<<<<<<<<<<< 1.那么我们怎么样来获取选择器呢? jQuery给我们提供了几种方式, 下面我们一一说明。 2.可以使用元素选择器,比如我们上面的S(“p”)就获取了页面中 所有的P标签表示的元素。 3.可以使用i选择器,比如我们用S(“#demo”)会获取i为demo 的这个元素。 4.还可以使用 class选择器,比如我们用S“demo”)会获取所有 clas属性为demo的元素。 5.其中S(“”)是获取所有元素,相当于一个全局的设定。 6.其中S(“this”)是选取当前元素。 7.当然还有一些并不是太常用的,这个就需要大家去查手册了。 8/32 >>>>>>>>>>>>.事件<<<<<<<<<<<<<<<<<<< 1.不知道大家的基础怎么样,因此还是先简单介绍下。 2.我们在看网页的肘候,难免会有各种各样的標作,这些操作会被 浏览器记录,然后以“事件”的形式发送给我们的 Javascript,我们 只需要对捕获到的事件进行处理就可以了。 3这些事件在 Javascript中通常是用On打头的,但是 jQuery本着 精简的原则,是把On去掉了的,比如我们前面提到的 click,是没 有 On的 4.我们上面用到的S( document). ready0;就是文档就绪事件,它就是 在文档被全部加栽之后就开始运行的 jQuery代码。 5给个定义,事件就是访问者对页面的操作 >>>>>.常用事件<<<<<<<<<<<<<<<<< 1.那么常用事件有哪些呢? 2.看下面截图: 义需出逻系因VM篇言心直山山仃獷件凹窗山 回m.tx 1鼠标喜件:cL讠ck(被单方) dbc lick(被击) 2 mouseenter(鼠标进入 3 mouseLeave(标移出) 4文档節口享件: resize(调整大小) 5 scroLl(滚动) 6表单件: submit(提交表学) change(修改数据) focus(获取信点)b(关去焦点) 8键盘事件: keypress(按鍵享件) keydown(被按下) keyup(被松开) 9/32 第二节:常用动画效果 >>>>>>>>>>>动画效果<<<<<<<<<<<<<<<<<<< 1.动画效果的优点之一就是感觉更加平滑流畅。 2.本小节我们介绍几个比较常见的动画效果。 >>>>>>>>>>显示和隐藏<<<<<<<<<<<<<<<<< 1.我们可以用hide和show来动态的设置HTML元素的呈示和隐藏。 2.此外还有一个 toggle方法,乞是用来切换hide和show方法,即 显示被隐蒇的元素,隐藏以显示的元素。 3.这三个函数的参数都一样,都可以接受连个可选的参教,第一个 是 speed,即显示和隐澈的速度参教,如果使用数字,则单位为毫 秒,还可以用soW或者fas这两个字符串,第二个参数是 callback, 乞是执行完一次之后所需要执行的函数名称。 >>>>>>>>>>>>实战演示<<<<<<<<<<<<<<< 1.看如下代码 my rtrl 1 chtml> 2 <head> <script src= jquery.js ></script> <script> 5 s(document). ready (functionAl 6 $(#control").click(function(t $("#demo").tgg1e(186); 8 }〕; 18 11 </script> 点击上面的畏落,下面的段落会不断的 12 </head> 昂示和隐藏 13 <body> 14 <pid=" contro1">点击我</p 15 <pid="demo">辛星 ] Query,期待您的关注</p> 16 </body> 17</htm1> 效果截图 0/32

...展开详情
试读 32P 2014年辛星web前端教程贺岁版第七本即jQuery教程
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
2014年辛星web前端教程贺岁版第七本即jQuery教程 10积分/C币 立即下载
1/32
2014年辛星web前端教程贺岁版第七本即jQuery教程第1页
2014年辛星web前端教程贺岁版第七本即jQuery教程第2页
2014年辛星web前端教程贺岁版第七本即jQuery教程第3页
2014年辛星web前端教程贺岁版第七本即jQuery教程第4页
2014年辛星web前端教程贺岁版第七本即jQuery教程第5页
2014年辛星web前端教程贺岁版第七本即jQuery教程第6页
2014年辛星web前端教程贺岁版第七本即jQuery教程第7页

试读结束, 可继续读3页

10积分/C币 立即下载