jQuery学习笔记 #Day1
- jQuery简介
- jQuery功能
- 网页中引入jQuery
- 安装下载jquery文件
- CDN直接引入（偏爱）
- jQuery语法
- jQuery选择器
- 元素选择器
- 类选择器
- id选择器
- 高级用法
- jQuery事件函数
- 事件分类
- 具体事件
- jQuery效果
- 隐藏和展示
- 淡入淡出
- 滑动
- 动画
- 设置动画
- 停止动画
- 链式结构
利用假期学（复）习了前端的一些基础知识，像是html、css，js这些。之前总是觉得学了忘，忘了学，学了还得忘，那没办法忘了还得学，后来想开了，有过哪怕一点点记忆也还是可以继续学一些东西的，做些实例的，总比一直复习基础知识强。
GIS方面呢，对自己后端的技术不是特别看好，但又想参加一些项目以及竞赛，把目标转向了webgis。之前看到小专栏的大佬讲webgis的入门有提到jquery这个js库，也有提到node.js，一个一个来吧。入门了这些js库后再去看openlayers或者是leaflet这些webgis的框架吧。
最近网课开始了，计划开始实行的较晚，每天给课外的时间可能并不多，每天的笔记内容也不会特别多，总之不管学的多少，希望可以坚持下去！
jQuery简介
jQuery是一种轻量级的js库，使得许多js语句实现起来更简洁易懂，jQuery是函数式的，基本上所有语句都类似函数的形式。
jQuery功能
jQuery具有以下功能：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画的实现
- HTML DOM模型的遍历和修改等操作
- AJAX
- Utilities
函数式的事件操作和元素属性的设置，实在不要太方便。
网页中引入jQuery
将jQuery引入网页才可以使用，有两种方式，但都要通过script标签引入。
安装下载jquery文件
jQuery官网上就可以找到，下载js文件后，要**将js文件放在网页相同的目录。**这种方法就不用一次次查CDN链接了。
CDN直接引入（偏爱）
通过CDN的链接可以直接引入，这种方法更方便，所以我更偏爱一些。
百度CDN的jquery链接：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
jQuery语法
jQuery通过美元符
$()
来选择HTML的标签，并以函数的形式根据指定事件进行指定操作。语法为
$(tag).action(){…}
jQuery选择器
jQuery的选择器基于CSS的选择器
元素选择器
选择p标签，实现点击“p”标签区域，可以进行指定操作
$(“p”).click(){…}
类选择器
选择所有class=“selected”的标签，实现点击这些区域，可以进行指定操作
$(.selected).click(){…}
id选择器
选择id=“selected”的标签，实现点击这些区域，可以进行指定操作
$(#selected).click(){…}
高级用法
标签元素存在着包含的关系，包含的关系下还有次序或是属性的分别，选择器可以有更多用法。（图片截自菜鸟教程）
jQuery事件函数
click（）用来处理点击后的一些列操作，它就属于事件函数。
事件分类
事件大概可以分为以下几种
- 鼠标
- 键盘
- 表单
- 文档/窗口
具体事件
（图片截自菜鸟教程）
事件函数是为了指定在对应的事件发生后进行什么样的操作，例如在点击button按钮后，将p标签内容隐藏
$(“button”).click(){
$(“p”).hide();
}
jQuery效果
在菜鸟教程中学习时看到了几个效果，应该不是全部的，不过还是整理下来。
隐藏和展示
将所选要素内容隐藏hide(),显示show():
$(tag).hide(speed,callback函数);
$(tag).show(speed,callback函数);
speed是效果完成所用的速度，有slow和fast可选，也可以填数字表示毫秒；callback函数则是在效果完全实现后进行的操作。这两个参数不是必须有的。以下都一样
toggle()函数可以实现两个效果的切换，被隐藏了下次操作就显示，显示出来下次就隐藏。
$(tag).toggle(speed,callback函数);
淡入淡出
将所选要素内容淡入fadeIn()，淡出fadeOut():
$(tag).fadeIn(speed,callback函数);
$(tag).fadeOut(speed,callback函数);
fadeToggle()函数可以实现两个效果的切换
$(tag).fadeToggle(speed,callback函数);
fadeTo()函数，可以设置变淡的程度
$(selector).fadeTo(speed,opacity,callback);
opacity表示变淡的程度，，介于0和1之间
滑动
将所选要素内容上滑slideUp()，下滑slideDown():
$(tag).slideUp(speed,callback函数);
$(tag).slideDown(speed,callback函数);
slideToggle()函数可以实现两个效果的切换
$(tag).slideToggle(speed,callback函数);
动画
设置动画
为所选要素设置动画animate():
$(tag).animate({动画内容},speed,callback函数);
{动画内容}内的动画内容是自定义的CSS样式，{属性名：定义的值}，可以控制多个属性，用逗号隔开
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
可以通过一系列animate()语句实现连续的一系列变化
var div=$(“div”);
div.animate({height:‘300px’,opacity:‘0.4’},“slow”);
div.animate({width:‘300px’,opacity:‘0.8’},“slow”);
div.animate({height:‘100px’,opacity:‘0.4’},“slow”);
div.animate({width:‘100px’,opacity:‘0.8’},“slow”);
停止动画
停止动画使用stop()函数：
$(tag).stop();
只停止当前未完成的动画，如果还有后续的动画则无法停止
面对这种情况，加入两个参数：
$(tag).stop(stopAll,goToEnd);
两个参数都是布尔型，默认均为false
- stopAll:若为true，将所有动画停止
- goToEnd:若为true，直接完成全部动画
链式结构
jQuery的特性，就如连续调用各种函数一样。
将id=“p1”的标签的CSS样式颜色设为红色，花费2000毫秒向上滑动，再花费2000毫秒向下滑动
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);
jQuery语法不要求严格的行与缩进，可以把代码写的更美观一些。
$("#p1").css(“color”,“red”)
.slideUp(2000)
.slideDown(2000);
此外可以看到，jQuery修改CSS样式很方便，通过函数调用的形式CSS(属性：属性值)
