认识jQuery的第一天

2017-10-23  本文已影响0人  银河战舰_cc3f

1、jQuery介绍

jQuery是一个JavaScript的程序库,它封装了许多 我们平时做项目需要用到的很多函数,我们在需要的时候只要调用就可以了,大大简化了我们做项目的步骤,节省了时间。它的官方定义是:Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、jQuery知识点介绍

1)、jQuery的引用
在使用jQuery之前我们都需要先引入jQuery文件,这样我们在后续的代码中使用,jQuery源码文件我们可以在jQuery官网中下载。引入代码如下:

<script src="js/jquery-3.2.1.js"></script>

2)、animate()方法
animate()是一个动画函数,在jQuery中所有物体对象的运动都会用到它,它必须传入的参数有两个,第一个是运动要到达的目标值,是一个json键值对的格式,第二个是运动的时间。他还有两个可选参数,一个是运动类型,另一个是回调函数。举例:

$("div").animate({"width" : 200},2000,function(){})

上面的代码就是让某一个div元素用2秒的时间到达200像素的位置。

3)、获取设置属性的css()方法
jQuery中css()方法的作用是设置和获取元素的属性,当只传入一个字符串参数时是获取属性,当传入json对象参数或者多个参数时是设置属性。

//获取div的宽
$("div").css("width");
//设置div的宽为100px;
$("div").css("width",100);
//设置div的多个属性值;
$("div").css({"width" : 100,"height" : 100});

4)、jQuery选择器
jQuery中提供了许多选择元素对象的选择器,让我们选择元素更加简单。常用的有标签选择器,类选择器,id选择器。

//id选择器
$("#id");
//类选择器
$(".class");
//标签选择器
$("tagName");

除了以上选择器,jQuery还提供了许多丰富的选择器,在这里就不一一介绍了。

上一篇下一篇

猜你喜欢

热点阅读