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

最新推荐文章于 2024-07-08 16:22:29 发布

weixin_34380948

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量48

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/425340

版权

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文件

测试下是否引入了:

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

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

$(function(){
$("#link1").click(function(event){
alert("不会打开jq网站!");
event.preventDefault();
});
});

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

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

$(document).ready(callback)

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

上面代码就是:

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

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

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

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

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

weixin_34380948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery一点一滴系列教程(第一点)

jQuery一点一滴系列教程(第一点)[唠叨]知道jquery（简称jQ)还是08年那会儿，不过只是学习，很少用到项目中，现在jq已经1.4版了，所以有必要做个系列，也算是温习下，jq的口号就是write less,do more,只需简单的几行代码，就能完成你以前需要一堆js代码所实现的功能，由于起简单而强大，很受大家的喜爱，同时基于它的插件也是...
复制链接

扫一扫