jQuery初学者必看

最新推荐文章于 2024-10-12 10:19:22 发布

棋殇

最新推荐文章于 2024-10-12 10:19:22 发布

阅读量652

点赞数 2

文章标签： js 前端初学者 html jquery

本文链接：https://blog.csdn.net/javascriptyuge/article/details/46591889

版权

一、学习前准备

1.jQuery库文件(jQuery核心库)

目前官网里最新的版本是2.1.4，建议使用1.6以上版本，可以到http://jquery.com/下载。我今天用的是2.0.3版本的，可以到http://pan.baidu.com/s/1eQ0FT7O下载。（jQuery的j就是javascript的意思，query是查询的意思。结合起来就是，jQuery是一种用来查询dom的类库，其选择器与你们css选择器一致）.

2.jQuery API文档

API(application programming interface)应用程序接口，顾名思义，就是为我们提供了封装在jQuery对象里面的函数的具体用法（包括静态方法和动态方法），要想熟练的写出jQuery代码，必须要对jQuery的API掌握好。官网http://api.jquery.com/里面提供了英文的API。但是如果不喜欢看英文的也可以看中文版本的。我找到了一个1.8版本的中文API，百度网盘的下载地址是http://pan.baidu.com/s/1i3rMqkl，有需要的可以下载。提醒一下大家，平时在学习jQuery过程中，一定要多查api.

3.知道jQuery与$是同一回事

为了简便，在写代码时常常用$代替jQuery。源码中有下面一段代码，可见jQuery和$在某种程度上是等价的。(最起码他们的引用地址是一样的)

事实上我们还可以把它替换成其他的变量名，这里就不说了。总之，以后我们用jQuery写代码时，都是用$(selector)形式的，其中selector和css的选择器是一样的，比如，通过id查询是$(“#id”),通过类名查询是$(“.class”),通过标签名查询$(“tagName”)等。当然啦，后代选择器，子代选择器，伪类选择器等css3的选择器也是完全支持的。

4.推荐学习网址

http://www.w3school.com.cn/jquery/index.asp

二、开始jQuery之旅

1.在头部引入jQuery库文件

引入jQuery文件和引入你们自己写的js文件是一样的。所以这个很简单，这里就不详细说了。

2.核心函数ready（详细代码见index1.html）

ready相当于原生js的window.onload。但是，ready函数比onload要给力，因为，原生onload是等所有图片、css文件以及其他一些多媒体文件加载完成之后才会执行里面的代码的，于是就会造成一种假死状态。而jQuery的ready函数是dom文档加载完成后马上就执行的，响应速度比onload要快。另外，可以在同一个页面中无限次地使用$(document).ready()事件，而onload则不行，前面的注册事件会被后面的覆盖掉。ready的具体使用方法如下：

$(document).ready(function(){

//write your code here

});

很多时候，为了简便，可以把ready页面注册函数简写成：$(function(){});

三、jQuery特点

1.get和set操作是用一个函数进行处理的(代码见index2.html）

所谓get操作就是取值，set操作则是赋值，你们学过java应该知道的。主要是看是否传参或者所传参数的个数来判断是执行get操作还是set操作的。如：

var htmlText = $(“.test”).html();//不传参，get操作

$(“.test”).html(“首页”)//传参，set操作

再如：

var testColor = $(“.test”).css(“color”);//传一个参数，get操作

$(“.test”).css(“color”,”red”);//传两个参数，set操作

2.支持函数的连缀调用.（代码见index3.html）

如：

$(“.nav”).css(“color”,”blue”).html(“首页”);

这是因为每个方法执行之后都会返回jQuery对象

3.具有集合处理功能(代码见index4.html)

$(“.nav”).css(“color”,”blue”)//所有类名为nav的元素的

//颜色都会变成蓝色。如果用原生js的话则需要用循环遍历处理

4.用each函数遍历对象非常简单

如：$(“.nav”).each(function(){

alert(this.html());

});

5.css函数轻松修改或者获取元素的css样式

获取某个元素某个css属性：

$(“.test”).css(“color”);//传一个参数

//可以是任何的css属性

//比如backgroundColor,fontSize,width,heigth等等

//注意要用驼峰写法，如background-color则会报错。

修改某个元素的css属性：

$(“.test”).css(“color”,”red”)；//传进两个参数

还可以通过传进一个对象来修改css属性：

$(“.test”).css({color:”red”});

//注意：用对象的属性名不用引号扩起来，属性值就要！

6.强大的文档处理功能

提供了节点的内部插入，外部插入，复制，删除，替换等函数，见下图。大家可以自己查看文档写一些demo，这里我就不举例了。

7.事件处理机制

封装大量的事件函数，这里也不举例子了，可以自己去查看一下api文档。

8.强大的动画特效

比如：animate，slideDown,slideUp,fadeIn,fadeOut等等，如下图。具体用法可以自己去API看看

四、初学者易错点

1.容易把jQuery对象和原生dom对象混淆，jQuery对象和dom对象是不同的，前者是用jQuery类库的选择器获得的对象（或对象集合），而后者是我们用传统的方法(javascript)获得的对象。jQuery对象是无法调用原生dom对象的的属性和方法的，反之亦然。任何时候，函数所属者this或者事件执行者this都是dom对象，我们不能直接用jQuery的方法对它进行操作，而必须先把它转换成jQuery对象。下面我就来讲一下jQuery对象和原生dom对象的相互转换的方法：

jQuery对象转成dom对象

方法一：jQuery对象往往都是一个集合(数组)，因此，我们可以直接通过取下标的方式把jQuery对象转成dom对象。（有时候也会因为对某jQuery对象取下标之后，还继续对该元素用jQuery方法进行处理，结果会报错（因为得到的对象已经不是jQuery对象了），这点需要注意）。转换实例

如：

var lis = $(“li”);//这是一个数组来的

lis[0].style.color = “red”;//取第一个元素，用元素js使颜色变红

方法二：通过get(index)函数把特定索引的jQuery对象转成dom对象；

var lis = $(“li”);//这是一个数组来的

Lis.get(0).style.color = “red”;//取第一个元素，用原生js使颜色变红

dom对象转成jQuery对象

直接把dom对象当作参数传到jQuery函数里面即可。

如：

$(“.btn”).click(function(){