jQuery在刚学习的时候,以为是一门全新的语言,其实并不是的,它是一个JavaScript的函数库,它的许多方法非常的实用,减少了JavaScript的编写行数。在学习jQuery之前呢,最好先学习下:HTML,CSS,JS。
jQuery可以对html的各类元素标签进行操作(包括获取当前元素的value值,更改value值,对元素的css操作,点击事件,双击事件,鼠标的进入,鼠标的移出,添加元素,删除元素等等),还有一些对元素进行的一些动画特效,比如隐藏/显示,淡入/淡出,还有动画进场,退场等,可以遍历各种元素标签,某个元素的祖先元素,后代元素,或者同胞元素都是可以进行访问,筛选。
如果单单只是这些,还不能成为这么流行使用的一个函数库了,因为上述的功能,大部分使用DOM(Document Object Model 文档对象模型)都可以实现。
jQuery还提供了非常方便的AJAX的方法,只用简短的代码就能获取服务器里的数据,实现前端与后端的交互,像$.get(URL,callback);就是通过HTTP GET请求从服务器上请求数据,$.post(URL,data,callback);通过HTTP POST请求向服务器提交数据,它的强大以后慢慢诉说,我们先着眼于当下,一步步来。
首先要怎么使用jQuery呢,有两种方法:
一、下载jQuery
在官网https://jquery.com/download/进行下载
然后在HTML中使用<script>标签把下载 的js文件导入:
<script src="jquery-x.xx.x.min.js"></script>
要注意的是,jquery有两种形式的文件,一种后缀是.min.js,一种后缀是.js,那么这两种有什么不一样呢,.min.js是经过压缩的文件,相对于js文件体积更小,但是传输效率快,我们一般都使用的是.min.js的文件,因为它们的内容是完全一样的。
二、通过CDN使用jQuery
这种方法最不需要下载jQuery了,是通过CDN(Content Delivery Network ,内容分发网络)来引用它。CDN在国内有很多,我们一般使用的是国内的CDN,因为国外的CDN服务器不在国内,访问速度会很慢。国内的例如有百度的,新浪,又拍云等等。
在这里我们例举一个百度的存放有jQuery的CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
只需要这句代码就可以去使用jQuery了。
我们一般把jQuery的代码写在js文件里,但是如果你的html页面代码行数不多,也是可以把jQuery写在html文件里,不过要用<script type="text/javascript"></script>标签来说明这一段是js的代码。至于type="text/javascript",可写可不写,因为现在javascript已经是HTML5的默认脚本语言了。
那么第一步要怎么去编写代码呢?jQuery为了防止页面在未完全加载前,就运行了所编写的jQuery代码,导致一些报错或者操作失败,就创建了”就绪事件“,让页面加载完后才去加载jQuery的代码:
$(document).ready(function(){
//jQuery代码...
});
还有一种简写的方式,效果是相同的:
$(function(){
//jQuery代码...
});
我们现在来讲一下jQuery的基础语法,
$(selector).action()
$()其实就是jQuery(),只是为了简化书写,我们直接使用$来标示jQuery,然后selector是选择符,是用来对元素进行定位,可以填写标签例如div,p,span等,也可以填写class,或者id,这样子能找到使用了该class或者id的元素,可以对它们进行操作,action(),泛指所有的事件,例如hide()就是让选择符中的元素隐藏起来,就像是设置它的css(display:none;)一样的效果。
例如我现在有一个页面,里面有一个p标签:
<!-- html页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏p元素</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p>这是p标签</p>
<button>点我隐藏p标签</button>
</body>
</html>
注意test.js是我编写的jQuery代码,并且这两个文件是放在了同一个目录下。
//test.js
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
/*
简写:
$(function(){
$("button").click(function(){
$("p").hide();
});
});
*/
当点击button的时候,p标签就会在页面上消失,大家可以尝试下,源码上面都有。好了,安装jQuery和基本语法就讲到这里啦。
上一章:暂无 下一章:jQuery的学习笔记【二】