认识jQuery的第一天

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还提供了许多丰富的选择器,在这里就不一一介绍了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,688评论 18 503
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,494评论 0 44
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 676评论 0 3
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,928评论 24 450
  • 上期我感觉文字太多了,可能会有让人看不下去的感觉,这期我只弄了三篇短文,看了也不会太累。 有人问我:你发这些善事的...
    钟予阅读 321评论 0 2