开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery一点一滴系列教程(第一点)

简介:
+关注继续查看

jQuery一点一滴系列教程(第一点)

[唠叨] 

知道jquery(简称jQ)还是08年那会儿,不过只是学习,很少用到项目中,现在jq已经1.4版了,所以有必要做个系列,也算是温习下,jq的口号就是write less,do more,只需简单的几行代码,就能完成你以前需要一堆js代码所实现的功能,由于起简单而强大,很受大家的喜爱,同时基于它的插件也是铺天盖地。而且熟悉css的朋友,看到jq的选择器,一定不会陌生,相比以前一堆getElementById还是getElementsByTagName等方便的多,很轻松的选择所要操作的元素。

更多的见官方网站啦,www.jquery.com

[正文]

既然要使用jquery,首先是下载了,下载完后,我这里放到了js/里,并且改了名字jquery.js.

首页使用前,需要在你的页面上,引入js文件

<script type="text/javascript" src="js/jquery.js"></script>

测试下是否引入了:

 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>jQuery一点一滴系列教程(第一点)</title> 
  6. <script type="text/javascript" src="js/jquery.js"></script> 
  7. <script type="text/javascript"> 
  8. jQuery(function(){ 
  9.     jQuery("#link1").click(function(event){ 
  10.         alert("不会打开jq网站!"); 
  11.         event.preventDefault(); 
  12.     });              
  13. }); 
  14. </script> 
  15. </head> 
  16.  
  17. <body> 
  18. <a id="link1" href="http://www.jquery.com">jquery方式 jQuery官方网站</a> <br /> 
  19. <a href="http://www.jquery.com" onclick="return confirm('是否打开jquery网站?');">传统方式 jQuery官方网站</a> 
  20. </body> 
  21. </html> 

这里jQuery也可以使用那个别名$,改成如下:

 


  1. $(function(){ 
  2.     $("#link1").click(function(event){ 
  3.         alert("不会打开jq网站!"); 
  4.         event.preventDefault(); 
  5.     });              
  6. }); 

注意:$这个由于比较简单,很多js框架都使用它,这就需要注意当你的项目中使用了多个框架时的冲突问题;还有很多人自己只改一个getElementById等封成$,需要特别注意,自己写的简单代码还是不要使用$为好。

$(callback)或jQuery(callback)这种方式,其实等价于

$(document).ready(callback)

就是dom加载完毕后执行回调函数。

上面代码就是:

 


  1. $(document).ready(function(){ 
  2.     $("#link1").click(function(event){ 
  3.         alert("不会打开jq网站!"); 
  4.         event.preventDefault(); 
  5.     });              
  6. }); 

这里我们dom完毕后,我们给id为link1的链接元素单击事件绑定一个方法,直接传入一个function对象作为事件发生时的处理函数

event.preventDefault()不是jq独有的哦,如<a href="http://www.jquery.com" onclick="event.preventDefault();">jquery网站</a>

好了这节我们主要了解了,如果在项目中引入jquery框架。




 本文转自 xcf007 51CTO博客,原文链接http://blog.51cto.com/xcf007/355213:,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
动力节点jQuery学习教程,jQuery入门看这一篇就够了
jQuery 是一个“写得更少,但做得更多”的轻量级 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
75 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1059 0
精心挑选的12款优秀 jQuery 手风琴效果插件和教程
  当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球。
1132 0
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1097 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1070 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
795 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1004 0
推荐40个非常优秀的 jQuery 插件和教程【系列三】
  jQuery 在如今的 Web 开发项目中扮演着重要角色,jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。本文大家分享40个实用的 jQuery 插件,可以根据您的项目需要来选择使用。
1031 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
973 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载