jQuery入门(一)
相信学js的人多多少少听过JQuery,JQuery对于前端开发人员来说是不可或缺的,他让开发变得更加简单。那到底什么是JQuery呢?用一句话来说,JQuery就是一个javascript的库。所谓的javascript库也就是一些封装好的常用的方法,我们把它封装到一个单独的js文件中,在要用的时候直接调用就好了。所以,我们学习jQuery就是学习他的方法。
我们可以在JQuery官网中直接下载JQuery,以下是他的官网下载网址:
到目前为止,JQuery有三个大版本,分别是JQuery1.X,JQuery2.X,JQuery3.X。JQuery1.X版本还有着对ie6,7,8的兼容。而在JQuery2.X版本中,他已经对ie8及以下的版本已经不支持了。所以我们在下载的时候要根据实际开发而定,而JQuery3.X版本跟JQuery2.X版本最主要的区别就是他有一个slim版本,他移除了effects ajax模块,让jquery更加的精简。在每个大版本中,又分两个小版本,分别是压缩版和未压缩版。其中压缩版将变量名尽可能的变为单个字母,把注释,换行和空格全部去掉,用以减小体积。而未压缩版则保留了全部注释,并且变量名尽可能的语义化。所以说,在选择JQuery版本的时候,我们就要看我们实际的需求了。一般来说,如果我们要兼容ie8及以下的版本,我们就会选择JQuery1.X,如果不需要兼容的话,我们可以在JQuery2.X或JQuery3.X中任选一个。在实际的开发中,我们会选择未压缩版本的,有助于我们在开发中遇到问题可以及时的查询。而在产品上线的时候,我们会选择吧JQuery换成压缩版本的来减小体积。
在下载好JQuery了之后,我们就要把JQuery引入我们的项目中了。一般来说,我们会把下载好的JQuery放到我们的js文件夹中。然后在页面中引入JQuery。这里,要注意把引入的JQuery放在最前面,否则在调用的时候会报错,因为浏览器是从上往下解析的。
在引入JQuery包之后,就可以正式开始写js代码了。我们在引入JQuery包的下面写一个script标签来写代码,首先我们要先写一个入口函数。因为在实际开发中,script标签基本上都是放在页面的head标签中的。所以说,我们要等页面加载完成后才能开始执行,否则就会获取不到页面中的元素。在原生的js代码中,我们通常使用的是
window.onload = function () { };
而在JQuery中,我们通常使用的是
$(document).ready(function () { });
或者是
$(function () { })
他们有什么区别呢。首先,JQuery跟原生js代码比,前者是在页面DOM树加载完成之后开始执行的,他不会等待图片等资源加载。后者则是等到页面上所有资源加载完成之后才开始执行的。而JQuery的两种写法功能都是相同的,后者只是前者的一种简写形式而已。
在这里,我们看到了有一个$的符号,他又是什么意思呢?在JQuery中,$本质上是一个函数,他根据所给的参数不同,所执行的功能也不同。
首先,如果我们给他传入字符串形式的css选择器的话,它的功能就是获取页面上的元素它的语法是$(selector)。selector指代的就是要获取的选择器。比如:
var $box = $("#box");
第二种用法就是传入一个DOM对象,他可以把DOM对象转成JQuery对象。它的语法是$(DOMobj)DOMobj只带的就是DOM对象。比如:
var cloth = document.getElementById("cloth"); var $cloth = $(cloth);
第三种用法则是传入一个function。也就是之前提到的入口函数的形式,它的功能就是入口函数。
$(function () { })
在JQuery中有JQuery对象,而在DOM中有DOM对象,他们有什么关系呢?首先,JQuery对象就是通过JQuery方法获取到的元素,也就是用$符号。而DOM对象则是通过js方法获取到的元素。并且,他们之间的方法不能相互使用。JQuery对象其实就是DOM对象的包装集,DOM对象以伪数组的形式存放在JQuery对象中。
当然,JQuery对象和DOM对象之间也能相互转换。如果我们想把JQuery对象转换成DOM对象,我们只需要在JQuery对象后面跟一个下标也就是jQueryObj[index]的形式,或者调用JQuery对象中的方法jQueryObj.get(index)这里的jQueryObj值的就是JQuery对象,而index指的则是DOM对象在JQuery对象中所对应的位置。而我们如果想把DOM对象转成JQuery对象就很简单了,我们只需要用$(domObj)的形式就可以了,这里的domObj指的就是DOM对象。
在JQuery中,他有很多的选择器,不过它使用的方式跟css选择器的方式很像。这里我就提部分的选择器来说。
首先来说说他的基本选择器,跟css中一样,他也有类选择器,id选择器。标签选择器,并集选择器和交集选择器。格式如下:
$(".className") 类选择器
$("#id") id选择器
$("tagName") 标签选择器
$("selector1,selector2") 并集选择器
$("selector1selector2") 交集选择器
除了基础选择器之外,他还有层级选择器,包括后代选择器和子代选择器。格式如下:
后代选择器 $("selector1 selector2")
子代选择器 $("selector1>selector2")
然后就是过滤选择器过滤选择器有很多它的格式是:$("selector:filter")。比如以下几个:
odd $("selector:odd") 奇数过滤选择器
even $("selector:even") 偶数过滤选择器
eq(index) $("selector:eq(index)") 序号过滤选择器
最后就是筛选选择器了,筛选选择器其实都是方法。比如:
children(selector)选择所有的子代
find(selector)选择所有的后代
next()选择下一个
siblings(selector)选择所有兄弟节点
parent()选择父辈节点
如果js基础扎实的话,学习JQuery是不难的。