这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
Jquery快速入门(一):精选小案例(highsea的学习笔记)01
2013年04月18日 JavaScript ⁄ 共 1695字 等你评论
Jquery学习笔记

锋利的Jquery

如果你也是像我这样的菜鸟级前端开发工程师,如果你也还算精通Html、Div+Css,如果你的Javascript水平也是刚刚入门,如果你也想精通一种前端开发的框架,甚至以后开发出像腾讯的JX淘宝的Kissy百度的七巧板Qwrap康尚实验室那么NB的前端框架(这5个是如今国内最火的HTML5前端开发框架)。

腊么请留意下highsea小站接下来的jquery学习笔记吧!一起分享~

高手们请自觉离开,该吃吃、该睡睡哈。当然先留下您的建议,然后一边儿欢乐去吧!

Jquery:write less,do more !是的,写更少的代码做更多的事情。

一般凡是程序的开始都离不开 Hello World !这次楼主就反其道而行之。

小案例:hide

  1. <!DOCTYPE html>   
  2. <head>   
  3.     <meta charset="utf-8"/>   
  4.     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script>   
  5.     <!--<script src="jquery.js"></script>-->   
  6. <script>   
  7.     $(document).ready(function(){   
  8.         $("p").click(function(){   
  9.             $(this).hide(2000);   
  10.         });   
  11.     });   
  12. </script>   
  13. <style>   
  14. *{margin: 0;border: 0;padding: 0;text-aligncenter;font12px;color#010101;line-height20px;}   
  15. p{border1px dashed #444;width500px;margin10px auto;}   
  16. a{color#08B6E8;cursorpointer;}   
  17. a:hover{color:#9F637E;}   
  18. </style>   
  19. </head>   
  20. <body>   
  21. <p>从这个小案例开始,你将踏上学习jquery的路程,为自己加油!   
  22. <br>   
  23. 有困难吗,真的有<b>困难</b>?那就请<a>猛击这里</a>   
  24. </p>   
  25. </body>   
  26. </html>  

请点击此处演示

1、安装Jquery:请登录官网:http://jquery.com/ 现在13-4-18的最新版的v1.9.1

安装调用请下载压缩版本1.9.1.min.js:下载

二次开发,编译请下载开发版1.9.1.js:下载

2、是否本地调用的问题,一般建议远程调用Google 或 Microsoft 的 CDN jQuery 核心文件。因为现在Jquery的普遍流行,大都数网站都在引用着,这样访客浏览器记录里面就会存在这个文件当调用相同文件时候浏览器会从缓存中获取此文件而使得加载时间变得更快。当然小巧的Jquery本身也只有90多kb本地加载也没啥事儿。

google的远程调用是:【由于谷歌被tian朝间歇性的“墙”,建议调用Microsoft 的CDN】

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs  
  2. /jquery/1.9.1/jquery.min.js"></script>  

Microsoft的远程调用是:



  1. <script type=“text/javascript” src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js”></script>  

小结:

什么,点击了案例后,页面空白了?

那是,那是,

因为“困难”不见了嘛

 

友荐云推荐
×