目录
2.3下拉与上滑: slideDown()和slideUp() 8
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在同一列
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
