[JavaScript知识库]js04--jQuery

目录

1.jQurey. 2

1.1jQurey历史... 2

1.2使用jQuery. 2

1.3体会jQuery. 2

2.常用方法... 4

2.1size() ：length属性。... 4

2.2显隐方法: show()和hide(), 6

2.3下拉与上滑: slideDown()和slideUp() 8

2.4 html( ):与attr( ): 8

3.节点操作... 8

3.1选择对象... 8

3.2序号问题... 9

3.3 animate动画... 9

3.4 回调函数... 10

3.5延迟与终止... 11

3.5.1delay: 11

3.6.2stop: 11

3.6动画累积... 12

4.大数据可视化-highchar. 13

4.1Highcharts. 13

4.2大数据可视化-highchar. 13

5. 代码规范... 13

1.jQurey

1.1jQurey历史

官网: www.jquery.com

看见logo和slogan (口号) :写更少的代码，做更多的事情。

官网的自我介绍: jQuery is a fast, small, and feature- rich JavaScript library. (jQuery是一个快速、 小巧的、特点众多的JavaScript库。) It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. (它用自 己非常方便的跨浏览器API,使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变得更简单。) With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (通过把多用途和高拓展性结合起来，jQuery改变了无数程序员书写JavaScript程序的方式。)

jQuery的版本问题:

jQuery的最 新版本是3.2.1,不兼容IE6、7、 8的。

学习的是jQuery1.12.3，兼容IE6、7、8的，更符合中国的实际情况。

jQuery3和jQuery1.12.3的API完全一样。

1.2使用jQuery

jQuery的哲学是什么:简化DOM开发, 为兼容而生!

jQuery简化了我们对DOM的开发，所以我们就有更多的精力，着眼于业务的书写。所以，从jQuery开始，我们需要练习写业务!写可靠的业务!代码量就要多起来了!

jquery引包

jquery是 javascript的一个实用库，如果想要使用该文件，必须引入jquery才能使用里面各种各样的方法,引入jquery的时候需要注意，引入jquery的script标签要写在最前面

1.3体会jQuery

简化获取元素的方式

简化元素的运动

jquery操作都是匹配的，不管是更改样式还是添加事件。以后几乎不会用到for循环

都是兼容IE的不用再进行能力检测了。并且都是得到的是计算后的样式。

jquery简化了DOM操作，比如添加，删除，更改节点。

1.4$()

jquery是一个js语言书写一个js库。 全局只向外暴露了一个$()函数。 接收的是css选择器的参数。 返回的是一个jquery对象。jquery对象具有很多jquery对象的方法。

谁的方法谁调用:

js对象→jquery对象直接加$()

jquery对象→js对象直接书写索引值

???????//jq对象转成js对象

????????//jq对象是类数组对象，通过下标可以获取js对象

????????div[0].innerHTML?=?'abc';

????????console.log(div[0]);//<div>abc</div>

选择器

$()中接收css选择器。接收的是字符串建议写双引号。

Css的选择器怎么书写，参数 就怎么书写。

支持css2.1选择器:

支持css3选择器:

eq()还可以提取出一种方法.eq()

jQuery函数: jQuery文件全局其实是向外暴露的是jQuery函数，只是人们觉得书写jQuery () 函数比较复杂,后来改为$()

现在仍然保留着jQuery ()

????????//jquery支持css2.1选择器,支持css3选择器

????????console.log($('div'));//[div,?div#app,?div]

????????console.log($('#app'));//?[div#app]

????????console.log($('.demo'));//[p.demo,?h2.demo]

????????//组合形式

????????console.log($('h2.demo'));//h2.demo

????????console.log($('[color=red]'));//div

????????console.log($('p:first'));//p

????????console.log($('p:last'));//?p.demo

????????//从?0?开始计数

????????console.log($('p:even'));//[p,?p]

????????console.log($('p:nth-child(2)'));//[p]

????????//二次筛选eq();从0开始计数

????????console.log(22,?$('div').eq(2));//[div#app]

????????console.log(22,?jQuery('div').eq(2));//[div#app]

????????//获取将window转成jquery

????????//转成jquery后，就可以使用jQuery方法了

????????console.log($(window));

????????console.log($(document));

????????console.log($(function?()?{?}));

????????console.log($([]));

????????console.log($({}));

2.常用方法

2.1size() ：length属性。

通过$()函数获取到的jquery对象也具有length。表示对象中具有元素的个数。

size()和length都表示表示元素的个数。

????????div?{

????????????height:?50px;

????????????border-right:?10px?solid?red;

????????}

????????div:nth-child(1)?{

????????????border-right:?5px?solid?rgb(199,?175,?43);

????????}???

?<div>1</div>

????<div>2</div>

????<div>3</div>

<div>4</div>

?//获取元素

????????//注意：工作中，我们常常将jQuery获取的元素，存储在一个变量中

????????//让$方法执行一次就可以了，后面可以多次使用，提高效率

????????var?div?=?$('div');

????????console.log(div.length);//4//属性

????????console.log(div.size());//4//方法

css():???

得到的是元素对象计算后的样式。

读取:参数:css的属性名。(短横驼峰都可以)返回的是字符串类型的数据。如果想让得到后的值参与运算，需要转为number类型：parselnt()， parseFloat ()。

返回的是 第一个 元素的样式。

设置:可以只设置一个属性。还可以同时设置多个属性。建议驼峰式命名

?//设置样式

????????divs.css('font-size',?'39px')

????????divs.css('borderBottom',?'3px?green?solid')

????????//设置多个属性

????????divs.css({

????????????backgroundColor:?'pink',

????????????//注意，单位如果是像素可以省略

????????????width:?300,

????????????//?height:?100,

????????})

????????//获取样式

????????//兼容ie678

????????//注意：获取的是?第一个元素?的样式

????????//10px?solid?rgb(255,?0,?0)

????????//5px?solid?rgb(199,?175,?43)

????????console.log(divs.css('border-right'));

????????console.log(divs.css('borderRight'));

????????//想运算，需要转成数字

????????console.log(parseInt(divs.css('height'))?+?90);

小结：

jQuery中的一些方法，可以获取数据，也可以设置数据（函数重载）

jquery绑定事件

?on方法或者直接事件名称定义回调函数。

???????//绑定事件

????????//?on(属性名，回调函数)

????????divs.on('click',?function?()?{

????????????//this指向当前元素

????????????console.log(this);

????????????//this是js的dom对象，因此要使用原生的方式操作

????????????//?this.style.backgroundColor?=?'skyblue';

????????????//如果想使用jQuery方法，需要转换成jQuery对象

????????????//工作中，建议转成jQuery对象，兼任性极佳

????????????$(this).css('background-color',?'yellowgreen')

????????})

????????//事件的究极简写.

????????//给函数传递的方法叫回调

????????divs.click(function?()?{

????????????//与on方法一样，会对?所有获取的元素?绑定事件

????????????console.log(this);

????????})

2.2显隐方法: show()和hide(),

show()出现：终点状态display:block

hide()消失：终点状态display:none

????????//淡入，淡出，淡切换动画

????????????box.fadeIn();

????????????box.fadeOut();

????????????box.fadeToggle();

参数:

不书写参数，表示干嘣效果。还可以书写参数，表示动画完成的时间。单位ms省略不写单位。

toggle():切换显隐

????<script?src="../jquery02.js"></script>

????<script>

????????//获取元素

????????var?btns?=?$('button');

????????var?box?=?$('.box');//此处根据类型来获取

????????//获取特定元素：

????????//通过索引值获取?//获取的是原生的dom对象

????????//?console.log(btns[0],?btns.eq(0));

????????//通过eq方法获取?//获取的是仍然是jQuery对象

????????//eq方法?返回jQuery对象，因此可以?连续打点调用?方法

????????btns.eq(0).click(function?()?{

????????????//show方法

????????????box.show(1000);//参数，表示动画完成的时间。ms

????????});

????????btns.eq(1).click(function?()?{

????????????//hide方法

????????????box.hide(0000);

????????});

????????btns.eq(2).click(function?()?{

????????????//toggle方法//切换显隐

????????????box.toggle(1000);

????????});

//用原生js实现

????????//获取元素

????????var?box?=?document.getElementsByTagName('div')[0];

????????var?btns?=?document.getElementsByTagName('button');

????????//显示与隐藏

????????//?绑定事件

????????btns[0].onclick?=?function?()?{

????????????//1秒钟显示，

????????????//最初的结果

????????????var?width?=?0,

????????????????height?=?0,

????????????????opacity?=?0;

????????????//次数

????????????num?=?parseInt(1000?/?33);

????????????//循环设置

????????????var?timeber?=?setInterval(function?()?{

????????????????//修改数值

????????????????width?+=?400?/?num;

????????????????height?+=?300?/?num;

????????????????opacity?+=?1?/?num;

????????????????box.style.width?=?width?+?'px';

????????????????box.style.height?=?height?+?'px';

????????????????box.style.opacity?=?opacity;

????????????????//当宽度?<=?0?的时候，要停止

????????????????if?(width?>=?400)?{

????????????????????//停止循环

????????????????????clearInterval(timeber)}},?33)}

????????btns[1].onclick?=?function?()?{

????????????//1秒钟隐藏

????????????//宽高从400，变成0，透明度?1到0?

????????????//记录当前?高度宽度?与?透明度

????????????var?width?=?400,

????????????????height?=?300,

????????????????opacity?=?1;

????????????//用了多少次

????????????num?=?parseInt(1000?/?33);

????????????var?timeber?=?setInterval(function?()?{

????????????????//修改数值

????????????????width?-=?400?/?num;

????????????????height?-=?300?/?num;

????????????????opacity?-=?1?/?num;

????????????????box.style.width?=?width?+?'px';

????????????????box.style.height?=?height?+?'px';

????????????????box.style.opacity?=?opacity;

????????????????//当宽度?<=?0?的时候，要停止

????????????????if?(width?<=?0)?{

????????????????????//停止循环

????????????????????clearInterval(timeber)

????????????????}},?33)}</script></body>

2.3下拉与上滑: slideDown()和slideUp()

slideDown():徐徐展开。

slideUp():慢慢合起。

参数:不写时间参数也表示动画，默认为400ms。还可以书写参数。

动画机理:

slideDown()是开始时，元素瞬间height为0，然后慢慢高度增加到css设置的数值。最终display:block;

slideUp（0）相反。

slideToggle()切换。

淡入淡出: fadeln()和fadeOut()

fadeln():淡入

fadeOut():淡出

参数：可以书写时间参数也可以省略

2.4 html( ):与attr( ):

html（）:

可以读取元素的内部文本。

还可以设置内部文本。参数:要设置的文字。还可以添加DOM节点。

原理就是为元素设置innerHTML属性

操作元素类:

addClass()和removeClass()和toggleClass()和hasClass（判断类是否存在）

attr():

该方法用于设置元素的原有属性

使用方式: $(dom).attr(key, value)

key:原有的属性名

value:属性值

当传递一个参数的时候，可以读取元素的原有属性。

3.节点操作

3.1选择对象

$(this):

?在事件回调函数中，获取当前元素对应的jQ对象。

$(this)jquery对象

表示触发事件的对象。

parent():

是一个方法，有小括号。父节点(只能选中元素的父亲节点,不能选中爷爷或者曾爷爷)

children():

子节点。小括号中可以书写参数,表示指定的某个儿子。

siblings()

亲兄弟。只能选中同一个父节点的亲兄弟。

其它节点方法:

next:选中下一个兄弟节点

nextAll:会选中后面所有的兄弟节点

prev:选中上一个兄弟节点

prevAll:会选中前面所有的兄弟节点

parents:会选中祖先节点

find:会选中后代节点

?????? 注意：

.end方法可以中断查找，返回上一个对象

???? ??? ??.end，放在哪后面，则从那往上返回一级

连续打点:节点操作可以连续打点。

3.2序号问题

eq():

表示选中元素大队列的排名，与亲兄弟没有直接的关系。

选中元素的不同，序号也是不相同的

index():

表示选中元素亲兄弟的排名，只要是同一个父节点都是亲兄弟。

它的值非常的稳定，无视选择器的选择

返回值就是索引值

each():用于遍历、循环所匹配到的每一个元素， 接收一个参数是函数，函数中也有this, 表示遍历到的该对象

方法会遍历每一个所匹配到的元素。

以后只要看到每一个元素要做的事情，首先要想要each方法

方法中的函数里面有一个参数 ?i ，表示遍历到该对象的序号

3.3 animate动画

animate函数接收两个参数

第一个参数: CSS样式对象

能够参与动画的属性:所有数值型的属性都可以参与动画

如:

width, height, border ....

第二个参数: time (完成动画的时间) 单位ms

animate函数基于终点的动画

执行顺序: [ ]

同一元素的不同animate,会按照顺序执行

不同元素的animate，会同时执行

css和animate:

animate需要花费时间（动态），css会瞬间完成（静态）

????????$('.btn').click(function?()?{

????????????//?//更改位置???//静态样式

????????????//?$('.box1').css({

????????????//?????left:?1000,

????????????//?????top:?400

????????????//?})

????????????//动态效果

????????????//?$('.box1').animate({

????????????//?????left:?1000,

????????????//?????top:?400

????????????//?},?2000)

????????????//同一个元素添加?2?个动画

????????????//是按顺序执行

????????????//不同元素添加的动画是同时执行

????????????$('.box1').animate({

????????????????left:?1000

????????????},?2000)

????????????$('.box2').animate({

????????????????left:?1000

????????????},?2000)

????????})

3.4 回调函数

异步语句:

类似于animate这种需要花费时间的语句，如果后面还有其它的js语句，这些语句不会等着animate执行完毕之后再去执行，而是会立即执行。

回调函数:

异步语句一般都有一个回调函数，当异步语句执行之后要做的事件就是写在回调函数中的

比如: animate()、 show(100)、 hide(1 00)、slideDown()、 slideUp()、 fadeln()、 fadeOut()

例如:我们要做一次肉菜，第一步是先将肉从冰箱中取出，将肉放入微波炉中解冻，解冻需要花费5min,在这期间我们还能烧水、洗菜、摘菜,等到微波炉叮一声之后(叮一声之后要做的事情就是写在回调函数中) ,将肉取出，开始做肉菜，做肉菜的行为就是写在回调函数中。

实际上animate函数可以接收三个参数:

animate(json, time, callBack)

json:样式对象

time:完成动画的时间

callBack:回调函数

3.5延迟与终止

3.5.1delay:

表示延迟，只能够书写在动画之前，参数就是要延迟的时间

动画方法

如: animate()、 show(100)、 hide(100)、 slideDown()、 slideUp()、 fadeln()、 fadeOut()

可以利用delay控制元素的入场顺序

????????$('.btn').click(function?()?{

????????????//直接书写动画?会立即执行

????????????//?$('.box1').animate({?left:?1000?},?2000);

??????//1秒后再?执行，delay?,?直接写在后面，没有效果//写在最前面

????????????$('.box1').delay(1000).animate({?left:?1000?},?2000);

????????})

????????$('.btn').click(function?()?{

????????????//按照顺序，每隔?1s?执行一个

????????????$('.box1').each(function?(index,?item)?{

????????????????//获取元素$(this),$(item)

????????????????$(item).delay(index?*?1000).animate({

????????????????????left:?450

????????????????},?1000)

????????????})

?})

3.6.2stop:

该方法用于让运动的元素立即停止动画，接收两个参数,都是布尔值，默认是false

第一个参数表示是否清空当前动画队列

第二个参数表示是否立即完成当前动画

stop(false, false):等价于stop() 立即进入下一个动画，立即停止动画

?????$('.btn').click(function?()?{

????????????//以下就构成?动画队列

????????????//动画1，向右移动1000

????????????$('.box2').animate({?left:?300?},?2000);

????????????//动画2，向下移动500

????????????$('.box2').animate({?top:?500?},?2000);

????????????//动画3，向左移动500

????????????$('.box2')

????????????????.stop()

????????????????//立即停止当前执行的动画（停止动画1），

????????????????//立即执行下一个动画（执行动画2）

????????????????.animate({?left:?100?},?2000)?})

stop(false,true):立即进入下一个动画，立即停止并完成当前动画

?$('.box2')

????????????????.stop(false,?true)

????????????????//立即停止当前执行的动画（停止动画1），

????????????????//第一次执行时，直接显示?动画1?的结果，并?

????????????????//立即执行动画直到完毕

????????????????.animate({?left:?100?},?2000)

stop(true, true):清空当前动画队列，立即停止并完成当前动画

$('.box2')

????????????????.stop(true,?true)//删除动画12，执行动画3，

????????????????//动画1?被立即执行完毕（直接显示结果画面），再执行?当前动画

????????????????.animate({?left:?100?},?2000)

stop(true, false):等价于stop(true) 清空当前动画队列，立即停止动画

??????$('.box2')

????????????????.stop(true)//删除动画12，直接从0执行到动画3，

????????????????.animate({?left:?100?},?2000)

3.6动画累积

一个元素身上可能存在多个动画，尤其在不经意间造成的动画积累，此时，就要进行防止(防流氓)

比如:

现在有一支队伍，接到命令去往广州，在中途又接到命了回北京

此时，该队伍有两个策略:

第一个策略:放弃原有任务，立即执行新的任务

直接利用stop(true)来实现

第二个策略:只有当元素不运动的时候，才接受新的任务

利用is():表示元素是否具备某种状态

?????????? console.log($('.box1').is(':animated'));//true

4.大数据可视化-highchar

4.1Highcharts

????????????? Highcharts是一款纯javascript编写的图表库 ，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达1 8种不同类型的图表,可以满足你对Web图表的任何需求!

??? ?? Highcharts 的运行需要两个JS文件，highchartsjs 及jQuery、MooTools、Prototype 、Highcharts Standalone Framework常用JS框架中的一个。

4.2大数据可视化-highchar

●Title: 图表标题，包含标题和副标题(subTitle) ，其中副标题是非必须的。

●Axis: 坐标轴，包含x轴(xAxis) 和y轴(yAxis)

●Series: 数据列。图表上一个或多个数据系列，比如曲线图中的一条曲线

●Tooltip: 数据提示框。当鼠标悬停在某点上时,以框的形式提示该点的数据

●Legend: 图例。用不同形状、颜色、文字等标示不同数据列，点击标示可以显隐该数据列。

●Credits:图表版权信息。

●Exporting: 导出功能按钮。须引入exporting.js.

●PlotLines: 标示线(或辅助线)。

●PlotBands: 标示区域(分辨带)。

5. 代码规范

1使用4个空格做为一-个缩进层级

2 switch下的case和default必须增加一个缩进层级。

3二元运算符两侧必须有一个空格， 一元运算符与操作对象之间不允许有空格。

4用作代码块起始的左花括号{前必须有一个空格。

5 if/ else / for / while / function / switch / do / try / catch / finally关键字后，必须有 一个空格。

6在对象创建时，属性中的:之后必须有空格，:之前不允许有空格。

7函数声明、匿名函数表达式、函数调用中，函数名和(之间不允许有空格。

8,和;前不允许有空格。不得省略语句结束的分号。

9在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch等语句中，单行声明的数组

与对象，如果包含元素，() 和[]内紧贴括号部分不允许有空格。

10每个独立语句结束后必须换行。

11在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在,或;前换行。

12不同行为或逻辑的语句集，使用空行隔开，更易阅读。

13在if/ else / for / do / while语句中，即使只有一-行， 也不得省略块{..}.

14函数定义结束不允许添加分号。IIFEI 必须在函数表达式外添加(，非IIFEI不得在函数表达式外添加(。

15页面中script标签与左侧缩进4个空格，script标签内部的代码不缩进，与script在同一列