JQuery框架
重点：jq自带循环，如需找到所有的元素做相同的操作，用each函数。用法同foeEach
常识题：
jQuery有的人称呼叫做js库，而有的人称呼叫做js框架
那些称呼jQuery是一个库的人都是不够了解：jQuery由4个方面组成
1、jquery.js - 库：简化了js，大部分人只知道这一部分
2、jQuery.ui - 提供了页面的组件（组成页面一部分的部件） - 过时（效果有点老，以后也有更棒，网上一大把）
3、jQuery.mobile - 移动端开发，不会学习，现在更流行uniapp
4、Qunit - 测试人员（不需要会代码，英语好）用于测试javascript的工具
jquery.js
一、概念
是一个js类型，就是一个js文件很小，是别人提供的对象（属性和方法）；有压缩版和未压缩版本；目的是为了简化js的DOM/BOM中的绑定事件/ajax
版本：
1.11.3 - 2.xx版本以上就不再支持老IE，做了向上兼容，1.11.3版本也能使用到最新的特性
2.xx
3.xx
曾经jQuery是全球最火的一个js库 现在三大框架：vue、react、angluar
二、jquery使用步骤
1、引入jQuery.js文件
2、使用jQuery的API去获取元素
3、使用jQuery的API去操作元素
三、获取元素
*工厂函数：因为这个工厂可以做很多操作
$(); 或者 jQuery();
作用：
1、查找元素
语法：var 元素=$("jQuery选择器") - jQuery选择器是基于css选择器，但是比css选择器更加的强大
jQuery选择器不需要任何记忆：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
返回值：使用jQuery的工厂函数找到的元素，是一个jQuery对象集合，意味着不能使用以前的DOM方法去操作
1、jq找到的元素的特点：
1、隐式迭代 - 不用循环，直接做操作
2、具有链式操作 - 可以不断的使用.一步接一步的做下去
3、jq元素 和 dom元素 两者方法不换乱用，只能自己用自己的
转换：
jq -> dom：$("选择器")[i] - 只要加上下标就会变为DOM元素
绝对不要这么用，不希望把简单的变得麻烦
提出一点：千万不要对jq加下标，更不要循环
2、将dom -> jq：$(dom元素) - 有用：e.srcElement得到的都是一个dom元素，要转为jQuery元素才能使用对应的方法
为什么一个方法可以实现多个操作
function $(){
arguments - 重载：判断传入的实参的不同执行不同的操作
}
通过 节点之间的 关系
1、父：$("xx").parent()
2、子：$("xx").children()
3、前一个兄弟：$("xx").prev();
4、后一个兄弟：$("xx").next();
5、*除了自己的其他兄弟：$("xx").siblings();
jQuery查找元素，返回值：jquery集合，可以直接做操作，切忌不要循环
四、操作元素
（一）、内容
html() - 底层就是dom的innerHTML - 能够识别标签
获取：$("xx").html();
设置：$("xx").html("新内容");
text() - 底层就是dom的innerText - 只能书写纯文本
获取：$("xx").text();
设置：$("xx").text("新内容");
val() - 底层就是dom的value - 单标签input、select&option
获取：$("xx").val();
设置：$("xx").val("新内容");
（二）、属性
attr() - 底层就是dom的getAttribute/setAttribute - 自定义属性也可以操作
获取：$("xx").attr("属性名")
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名")
（三）、样式
1、单独操作class属性来控制样式
追加class：$("xx").addClass("class名");//追加并不是替换
删除class：$("xx").removeClass();//特殊：传参：会删除指定的class
不传参：清空所有的class
切换class：$("xx").toggleClass("class名");//在有此class和没有此class之间进行切换，不会影响到其他的class
2、直接操作样式：
获取：$("xx").css("css属性名");//牛逼：不管你是内联还是内部还是外部样式，只管当前生效的样式
设置：$("xx").css({//设置的是内联样式
"css属性名":"css属性值",
...
});
一次方法可以修改多个样式
（四）、*创建元素&渲染页面&删除元素
创建元素：工厂函数第三个功能：$(`<标签 属性名="${变量}">${内容}</标签>`)
渲染页面：
*$("爸爸").append(新);//里面，当最后一个儿子
$("爸爸").prepend(新);//里面，当第一个儿子
$("爸爸").after(新);//外面，当后一个兄弟
$("爸爸").before(新);//外面，当前一个兄弟
删除元素：$("xx").remove();
（五）、克隆元素
创建元素理解为复制元素
$("xx").clone(true); - 加true的意思是为了赋予js生命
（六）、绑定事件
$("xx").bind("事件名",callback);
简写：$("xx").事件名(callback);
面试题：原生JS中window.onload 和 jQuery中的$(document).ready(callback) 的区别
1、window.onload：这里面的内容需要等待所有资源（图片、css、js、视频、音频、小图标、DOM树）加载完毕，才会执行，最后才执行，一个页面只能用一次
2、$(document).ready(callback)：这里面的内容只需要等待DOM树加载完毕就会执行，效率更高，一个页面可以使用多个
简写：1、$(document).ready(callback)
2、$().ready(callback)
3、$(()=>{});//工厂函数的第四个功能
为什么我们需要知道：
1、面试题
2、有可能别人的代码会这么写
但是我们绝对不会使用，因为我们的js代码放在最后
（七）、滚动监听事件
作用：可以做更多的特效
滚动加载新内容（滚动监听事件+ajax实现）
语法：
$(window).scroll((){
$(window),scrollTop();//获取滚动条到当前滚动的位置
$("xxx").offset().top/left;//想要知道xx在什么位置；
})
案例 二阶段作业week6-3
<script src="../js/jquery-1.11.3.js"></script>
<script>
$(window).scroll(()=>{
// console.log($(window).scrollTop())
if($(window).scrollTop()>=100){//导航条部分
$("nav").css({
"position":"fixed",
"top":"0",
"left":"0"
})
}else{
$("nav").css({
"position":"static",
"top":"0",
"left":"0"
})
}
if($(window).scrollTop()>$(".Img").offset().top-innerHeight/1.3){
$(".Img").css({
"opacity":"1",
"top":"0"
})
}
})
</script>
（八）、键盘事件
keydown/keypress/keyup：
keydown：按下和按住都会触发，而且任何按键都可以用 - 最推荐的做游戏的事件
keypress：按下和按住都会触发，但是只有部分按键可用(数字，字母，回车，空格可用，其余不行)
keyup：松开会触发，而且任何按键都可以用 - 比手速的游戏
所学事件总结
click、dblclick、mouseover/mouseenter（移入，不会触发冒泡）、mouseout/mouseleave（移出，不会触发冒泡）、mousemove、change、blur、focus、submit、input（只要用户输入就会触发）、
contextmenu、resize、keydown
mousedown(鼠标按下)、mouseup(鼠标松开)
keydown、keypress、keyup - 键盘事件：
$(window).键盘事件(callback);
keydown：按下和按住都会触发，任何按键都支持 - 最适合用于做（游戏开发）
keypress：按下和按住都会触发，支持数字+字母+回车+空格
keyup：松开时才触发，任何按键都支持 - 劲舞、炫舞、QQ音速，比手速
event事件对象：jQuery没有任何的简化操作
键盘键码：e.keyCode;
***scroll - 滚动监听事件：
绑定事件：$(window).scroll(()=>{
1、$(window).scrollTop();//获取当前滚动条距离页面顶部有多远
2、$("xx").offset().top;//获取某个元素距离页面顶部有多远
3、越往下滚，出现数据越多
})
*总结：工厂函数：目前可以做的功能
1、查找元素
2、dom转换jq
3、创建元素
4、原生JS中window.onload 和 jQuery中的$(document).ready(callback) 的区别
5、封装ajax
工厂函数的底层原理：重载：arguments，根据传入的实参的不同可以进行判断执行不同的操作
JQ提供了预定义动画和自定义动画的API
预定义动画：3组9个
1、隐藏和显示：
隐藏：$("xx").hide(time,callback)
显示：$("xx").show(time,callback)
特殊：1、如果没有传递任何实参时，是不具有动画的，瞬间的显示和隐藏，以后不用自己在写display:none/block;
2、如果传递了实参，具有动画：宽度高度透明度都会同时变化
3、回调函数：而是动画执行完毕后才会执行的操作 - 以后你动画完毕了还想干什么
4、如果你希望一会儿显示，一会儿隐藏，根本不用自己做判断：$("xx").toggle(time,callback) == show+hide;
2、上下滑动效果：
隐藏：$("xx").slideUp(time,callback)
显示：$("xx").slideDown(time,callback)
特殊：1、如果没有传递任何实参时，也具有动画的，速度非常快
2、如果传递了实参，具有动画：高度都会同时变化
3、回调函数：而是动画执行完毕后才会执行的操作 - 以后你动画完毕了还想干什么
4、如果你希望一会儿显示，一会儿隐藏，根本不用自己做判断：$("xx").slideToggle(time,callback) == show+hide;
3、淡入淡出效果：
隐藏：$("xx").fadeOut(time,callback)
显示：$("xx").fadeIn(time,callback)
特殊：1、如果没有传递任何实参时，也具有动画的，速度非常快
2、如果传递了实参，具有动画：透明度都会同时变化
3、回调函数：而是动画执行完毕后才会执行的操作 - 以后你动画完毕了还想干什么
4、如果你希望一会儿显示，一会儿隐藏，根本不用自己做判断：$("xx").fadeToggle(time,callback) == show+hide;
自定义动画
1、并发动画：所有动画一起执行
$("xx").animate({
"css属性名":"值",
...
},time,callback)
2、排队动画：一个动画做完在做下一个动画
$("xx").animate({
"css属性名":"值",
},time,callback).animate({
"css属性名":"值",
},time,callback).animate({
"css属性名":"值",
},time,callback).animate({
"css属性名":"值",
},time,callback).animate({
"css属性名":"值",
},time,callback)
自定义动画和预定义动画都有的特殊点
特殊： 1、animate方法不支持颜色相关和transform转换相关的操作
2、只要是动画就一定会有排队的可能，有的情况要记得停止动画：
$("xx").stop().animate();
解决特殊1：
1、不用animate方法，用css方法，记得自己添加过渡
2、等我们学习了jQueryUI，jQueryUI增强了animate方法
无缝轮播案例扩展
1、判断某某动画执行完毕后才允许再次点击（如何判断某个元素的有没有动画）
if(!$("xx").is(":animated")){
//xx没有动画时才可以执行
}
2、判断img是没有隐藏的状态才可以执行
if(!$("xx").is(":hidden")){
//没有隐藏的xx才可以执行
}
jQueryUI
基于Jquery的开源网页用户界面代码库 - 提供HTML、CSS、JS的一个插件库
组件库：组件：组成网站一部分的部件，代码重用，一般不具备JS功能
插件库：跟组件差不多，只不过带有JS功能
如何使用jQueryUI：
1、下载jQueryUI/xxxx - 不需要你做
2、*在页面上引入： - js顺序千万不能乱，因为jQueryUI是基于jQuery
<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.0.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.0.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.0.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
3、挑选出你需要的/喜欢的插件，直接梭到你的项目中
4、根据设计提供给你的设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
5、利用ajax去获取数据库中的数据，进行页面的渲染
6、千万别忘了调用jQueryUI提供的xx方法实现效果
比较推荐的JQUI的插件：
1、选项卡/标签页
2、菜单
3、折叠面板/手风琴
4、自动完成/模糊查询
5、特效还不错：爆炸效果：增强了原来toggle("特效名称",time,callback)=show+hide
6、增强了animate：现在支持颜色操作了，但是依然不支持转换
日期选择器：简单，漂亮：
1、wdatepick.js插件：简单，但是并不漂亮，太老了
1、先引入wdatepick.js
2、使用：$("input").focus(function(){
WdatePicker({
el: this,//渲染某个元素
lang: "zh-cn",//中国、en、zh-TW
skin: "green",//皮肤，可以去下载
dateFmt: "yyyy年MM月dd日",//设置日期的格式化
isShowToday: false,
isShowClear: false,
isShowOK: false,//如果这三个按钮同时隐藏，旁边的快速选择也会消失
readOnly: true,//只读，用户只能选择，不能输入
maxDate: "%y-%M-{%d+7}",//最大7天以内
minDate: "%y-%M-{%d-7}",//最小7天以内
isShowOthers: false,//只会显示当前月份的日期
});
})
2、layDate.js：简单，漂亮：唯一的缺点：下架了
学会看文档
万能的插件库：jQuery插件库 - 无敌了，渲染才是真正的重点
1、百度搜索jQuery插件库
使用：
0、注册、登录
1、挑选你需要的插件，下载
2、梭该梭的，根据设计图修改一下样式，数据渲染
3、一个账号一天只能下载2次，换号！
有了插件最大的问题就是：引入的东西越来越多，引入的越多，网站效率会越低，以后我们会学习gulp进行打包，解决此问题
bootshrap
1】、CSS能做的绝对不用JS完成：
1、css更简单
2、seo更友好：百度排名，百度小蜘蛛去爬我们的代码，小蜘蛛不认识JS
3、只要hover能做的就不用mouseover|enter/mouseout|leave
2】、滚动监听搭配ajax
获取当前页面的完整高度：$("body").height();
【 **********SQL语句：
获取最新的两条数据（倒着拿）：
SELECT name,content FROM 表名 ORDER BY id DESC LIMIT 开始位置,2;
从头获取第几条数据：
select * from 表名 where 1=1 limit 10;
】
3】、学习bootstrap：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单 - 类似于jQueryUI，提供了HTML/CSS/JS的一个组件/插件库\
比jQueryUI更好看，而且适合做【响应式】网页
使用步骤：
1、入门 - 下载
2、引入：
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
3、去挑选你喜欢的东西，然后梭
4】、BS - 梭梭梭
1、根据设计图修改样式
2、数据渲染
5】、BS布局方式：
1、DIV + CSS：学起来有点难
2、TABLE表格布局：语义性极差，可读性几乎没有
3、*******【**栅格式布局**】：bootstrap的作者，觉得这个方法既简单又好读
如何使用：固定步骤
1、最外层容器：<div class="container/container-fluid"></div> - container有点牛逼，在不同的屏幕下大小也是不一样的
2、里面必须放入行：<div class="row"></div>
3、行里面必须放入列：<div class="col-屏幕-*"></div>
4、bootstrap，将我们的屏幕分为了4类：lg(大于等于1200)>md(大于等于992)>sm(大于等于768)>xs(小于768)
5、bootstrap，将屏幕等分为了12分：col-屏幕-1~12
6、正是因为我们class支持写多个，所以我们可以写不同屏幕，占比不同
7、更小屏幕列宽，可以管住更大的屏幕，如果自己有一定用自己的，自己没有用离自己近的
col-lg-* LG屏幕生效
col-md-* MD/LG屏幕生效
col-sm-* SM/MD/LG屏幕生效
col-xs-* 所有的
8、可以单独设置某个列，在某个屏幕下隐藏起来
hidden-屏幕; - 只管当前屏幕，不影响其他屏幕
9、设置偏移：向左顶出了几份距离
col-lg-offset-* LG屏幕生效
col-md-offset-* MD/LG屏幕生效
col-sm-offset-* SM/MD/LG屏幕生效
col-xs-offset-* 所有的
10、bootstrap的栅格式布局，是怪异盒模型（content+margin）
标准盒模型（content+padding+border+margin）
想要设置间距记得使用border
11、理论上来说，列中可以继续放入行，但是不推荐，流行扁平化
个人建议：只有在响应式网页可用：不是任何网页都可以做成响应式网站：电商类绝对不合适（内容量过多）
其实有了bootstrap确实轻松了一点，但是有的东西还是需要自己做：
1、元标签：viewport
2、媒体查询
3、相对单位不用绝对单位：rem %
4、响应式图片：max-width: 100%;
6】、定制Bootstrap：
想要去修改bootstrap的样式：
1、去修改bootstrap.css - 在6800行代码中找到自己需要修改的部分
2、写自己的css去覆盖掉bootstrap的 - 多余的css没有用上
3、bootstrap的两位工程师建议你直接修改源代码 - 代老湿不建议
4、两位工程师觉得，确实私人订制有点麻烦，提供了在线版私人订制 - 代老湿也不建议
5、代老师推荐写自己的css去覆盖掉bootstrap的，并且删掉你覆盖的部分的代码
scss和less
静态样式语言：css，作为一门的语言，并不称职，语言必须具备的基础概念：变量、运算、循环、分支、函数...等等都是没有的，
所以导致我们在开发和维护大型项目中极其不变
根本就不是人写的：
1、真不是人写的，是编译的
2、真不是人写的，写起来麻烦
1、动态样式语言：scss、less：在css的基础上，添加了新特性，目的：简化css开发：
常见的动态样式语言：
1、sass、scss
2、less
3、stylus - 和css语法差别较大
scss和less，只要你会css基本就会了，学习他的新特性
2、编译：浏览器只认识css，不认识其他的动态样式语言，动态样式语言=(编译)=>自动得到一个css，网页真正引入的是css，但是我们开发用的scss/less
如何编译：
1、vscode：安装一个插件：easy sass，编写你的sass/scss只要一保存，就会自动编译生成一个css
2、HBuilder：安装一个插件
3、网上一大堆这种编译工具
3、学习：Scss新特性：
1、*变量：
创建：$变量名: 值;
特殊：1、使用时，$不能省略
2、不区分中划线和下划线
3、依然具有js的作用域：全局变量和局部变量，如果某个变量在选择器内创建，则说明此变量是一个局部变量，只能在这个选择器中使用
2、*****嵌套：选择器可以嵌套
语法：.d1{
...
.d2{
...
.d4{
...
}
}
.d3{
...
&:hover{...}
}
}
编译后：
.d1{...}
.d1 .d2{...}
.d1 .d3{...}
.d1 .d2 .d4{...}
.d1 .d3:hover{...}
特殊：
1、层级选择器，由你自己决定，你可以在选择器前面加符号>空格+~，不加任何符号，默认为空格
2、&关键字：类似于js中this，&包裹在那个{}中那他指的就是那个选择器
3、*引入：
一阶段，孙老师说不要用这个操作@import，确实是，因为JS获取不到样式
有了动态样式语言，这句话就有用了，可以将多个scss整合为一个css，并且JS也能获取到css里面所有的样式
@import "文件路径";
4、注释：只能书写多行注释，css本来就不支持单行注释
5、*****混合器：类似于js中函数：
1、创建混合器：
@mixin 混合器名($形参名:默认值,...){
css属性名:css属性值;
...
}
2、调用混合器：
@include 混合器名($形参名:实参值);
特殊：
1、使用时，关键字别掉了
2、传参的顺序可以随意了，但是一定要写出键
3、碰到重复的代码了，在提取出来封装为一个混合器
6、继承：垃圾
7、运算：尤其是颜色值运算：支持+ - * /，越往0靠近数字越小，就越暗淡，越往f数字越大靠近就越鲜亮
8、分支循环：但是有了还不如没有，我们要得是简化css开发
4、Less和Scss的区别：
1、Less创建变量@变量名: 值;并且区分中划线和下划线
2、Less的混合器更简单：
创建：
.混合器名(@形参名:默认值,...){
css属性名:css属性值;
...
}
调用：
.混合器名(想要传入的东西);
混合器案例：
@mixin whb($w:100px,$h:100px,$b:transparent){
width: $w;
height: $h;
background: $b;
}
div{
@include whb($b:red,$h:500px);
}
h1{
@include whb(200px,200px,green);
}
p{
@include whb(300px,300px,blue);
}
span{
display: inline-block;
@include whb(400px,400px,pink);
}
