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:,如需转载请自行联系原作者

相关文章
|
1月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
19 0
|
4月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
20 0
|
4月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
28 0
ADI
|
XML JSON 前端开发
[记录] Jquery教程
[记录] Jquery教程
ADI
110 0
|
设计模式 Web App开发 JSON
动力节点jQuery学习教程,jQuery入门看这一篇就够了
jQuery 是一个“写得更少,但做得更多”的轻量级 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
121 0
|
JavaScript 前端开发 CDN
|
前端开发 JavaScript 索引
|
JavaScript 数据格式 JSON
Jquery 中each循环嵌套的使用示例教程
1、从MVC返回的Json数据如下: 2、下面是客户端实现的示例: $.post("/admin/GetPermissionsForRole", function (data,status) { if (status == "success") { var ghtml = ""; $.
1185 0
|
JavaScript .NET 测试技术
javascriptMVC教程 -- 14.FuncUnit实例:完成jquery焦点图插件的自动化功能测试
  FuncUnit相关的知识我在之前的博文已有简单介绍,大家可以自行阅读《javascriptMVC入门 -- 12.FuncUnit》。他提供了很多api方法,我的文章中没有涉及,大家可以去官网查看,地址:http://www.javascriptmvc.com/。
993 0
|
前端开发 JavaScript C#
15个jQuery导航制作教程
jQuery Tabbed Interface Sliding Jquery Menu CSS Sprites2 - It’s JavaScript Time Kwicks for jQuery jQuery File Tree Learning jQuery: Fad...
683 0

相关产品

  • 云迁移中心