一、jQuery框架

1、Query概念

jQuery类库就是一个.js文件，在三大框架（Vue、react、angular）出现之前，最火

2、jQuery类库

（1）版本

1.xxx兼容老IE的同时。做了向上兼容，新的API都可以使用
2.xxx以后的版本都不支持老IE

（2）目的

简化核心DOM
简化绑定事件
简化ajax

3、jQuery的组成

jQuery.js：简化js开发
jQuery.mobile.js：简化移动开发
jQuery.ui.js:专门针对UI开发
Quint:专门用于测试人员测试js的软件

3、jQuery的使用

（1）使用步骤

在HTML页面中引入jQuery文件
使用jQuery提供的选择器去获取元素
使用jQuery提供的API去操作元素

（2）jQuery提供的工厂函数

语法

$()/jQuery();

作用

查找元素： $(""jquery选择器)；

一切的CSS选择器都可以使用，提供了比CSS更丰富的选择器

转换

DOM 转为jQuery 语法：$(DOM对象)；,因为this和target会自动成为一个DOM对象
jQuery转为DOM 语法：$(jQuery对象[下标])；

jQuery特性

隐式迭代：自带循环，不用下标
链式操作，找到一个元素后可以不断的连续的进行操作

4、通过关系找元素

父元素：$("xx").parent();
子元素：$("xx").children();
前一个兄弟元素：$("xx").prev();
后一个兄弟元素：$("xx").next();
其他兄弟元素：$("xx").siblings();

5、jQuery如何操作元素

（1）内容

$("xx").html();类似于innerHTML
$("xx").text();类似于innerText
$("xx").val();类似于value

（2）属性

获取$("xx").attr("属性名");
设置$("xx").attr("属性名"，"属性值");
删除$("xx").removeAttr("属性名");

（4）样式

单独操作class属性来控制样式

追加class：$("xx").addClass("class名")；追加不是替换
删除class：$("xx")removeAttr("属性名")；传参删除指定的class，不传参删除所有
切换class：$("XX").taggleClass("class名")在有没有之间切换，不影响其它class

直接操作样式

获取:$("xx").css("css属性名")只管生效的样式
设置：$("xx").css({"css属性名"："css属性值"，...})

5、jQuery创建、删除元素及渲染页面

（1）创建元素

$("<标签名属性名='属性值'></标签名>")

（2）删除元素

$("xx").remove();

（3）渲染页面

$("父元素").append(新元素)放在最后一个 $("父元素").prepend(新元素)放在第一个 $("兄弟元素").after(新元素)后一个兄弟 $("兄弟元素").before(新元素)前一个兄弟

6、克隆元素

创建的元素相当于复制元素

#("xx").clone(true);true是为了赋予js生命

7、工厂函数的底层原理

重载：arguments，根据传入的实参进行判断，从而执行不同的操作

二、jQuery事件

1、绑定事件

（1）语法

$("xx").band("事件名"，callback)；

（2）简写

$("xx").事件名(callback)；

2、原生jswindow.onload和jQuery中$(document).ready(callback)的区别

window.onload;需要等所有资源都加载完毕后才会执行，最后执行，且一个页面只能用一次
$(document).ready(callback);:只需要等DOM树加载完毕就会执行，效率更高，且一个页面可以使用多个

简写： $(document).ready(callback);
$().ready(callback);
$(callback);

3、新事件

（1）滚动监听事件

作用

作出更多特效
滚动加载新内容(滚动监听事件+ajax)

如何使用

$(window/document).scroll(()=>{
    //z获取滚动条当前滚动位置
    $(window).scrollTop();
    //想知道xx在什么位置
    $"xx").offset().top/left;
})

（2）键盘事件

keydown:按下和按住都会触发，任何键都能用
keypress：按下和按住都会触发，只有数字、字母、下划线、空格、回车可用，其余不行
keyup:松开才会触发，任何键都能使用，手速游戏

4、jQuery预定义动画和自定义动画

（1）预定义动画

隐藏、显示效果

隐藏：$("xx").hide(time,callback)
显示：$("xx").show(time,callback)

特殊

如果没有传递任何实参，不具有动画，瞬间完成
如果传递了实参，具有动画，宽、高、透明度会同时变化
回调函数：动画执行完成才会执行
自动判断：$("xx").toggle(time,callback)==hide+show

上下滑动效果

隐藏：$("xx").slideUp(time,callback)
显示：$("xx").slideDown(time,callback)

特殊

如果没有传递任何实参,具有很快的动画
如果传递了实参，高会同时变化
回调函数：动画执行完成才会执行
自动判断：$("xx").slideToggle(time,callback)==hide+show#### 隐藏、显示效果

淡入淡出

隐藏：$("xx").fadeOut(time,callback)
显示：$("xx").fadeIn(time,callback)

特殊

如果没有传递任何实参，具有很快的动画
如果传递了实参，透明度会同时变化
回调函数：动画执行完成才会执行
自动判断：$("xx").fadeToggle(time,callback)==hide+show

（2）自定义动画

并发动画，所有动画同时执行

$("xx").animate({
    "css属性名":"值"
    ，...
    },time,callback)

排队动画，一个动画完成后才会做下一个

$("xx").animate({"css属性名":"值"},time,callback)
    .animate({"css属性名":"值"},time,callback)
    ...

特殊

animate方法不支持颜色相关和transform转换相关操作

解决

不用animate方法，用css方法，但需要添加过渡
只要是动画就可能排队，又得情况需要停止动画$("xx").stop().animate();

三、jQuery封装了ajax：

切记先引入jQuery.js

1、第一层：最麻烦，最复杂，最无敌

$.ajax({//解构赋值，暂时理解为，我们传入一个对象是一个配置信息
		"url":"xx.php",//要连接的服务器的路径，必写参数
		"type":"GET/POST",//请求的类型，可以省略不写，默认为GET
		"data":"key=value&key=value",//要向服务器发送请求消息
		"dataType":"HTML/XML/JSON/JSONP",//服务器端响应的消息要解析为什么数据格式，默认值为HTML
		"jsonp":"通行令名字",//默认为callback
		"success":(data)=>{//ajax成功的时候执行：形参data自动保存住服务器端响应的消息，必写参数
			要干啥看你自己
		}
	})

2、第二层：再次简化：3个：唯一的缺点，不能做跨域

	1、$("xx").load("url","data",callback); - 垃圾
		缺点:1、数据会直接放在xx元素上
		     2、无法设置GET/POST，只能默认为GET
		     3、无法去掉字符串的引号

	2、$.get("url","data",callback,"JSON")

	3、$.post("url","data",callback,"JSON")

3、第三层： - 特殊用法：合作开发

同源策略：浏览器的保护机制，要求协议、域名、端口都要相同，只要有一个不同则会触发同源策略的保护
跨域：跨过同源策略：能够访问别人电脑上的数据库
前端：ajax，jQuery封装的ajax里面，自带一个jsonp的技术：帮助我们跨域

$.getJSON("url?key=?","data",callback)
注意：1、?是固定写法，jQuery中jsonp会自动将他赋值为一个通行令函数
后端：需要接收住前端传来的通行令函数，并且调用此函数放行
echo $_GET["key"]."(".JSON_encode($arr).")";

四、git工具

分布式版本管理控制工具，分布式：人人都是客户端，人人都是服务器端（云端）

1、目的

就算我们在家里/多方合作开发也可以一起开发代码

2、使用

先安装：Git-2.18.0-64-bit.exe - 命令行方式
再安装：TortoiseGit-2.6.0.0-64bit.msi - 小乌龟（简化版傻瓜式操作，但是我们git多半都是使用命令行方式，提供了提示图标） - 记得重启电脑
项目经理/组长：打开www.gitee.com网站

注册/登录
创建项目仓库
把仓库地址发给对应的开发人员
开发成员：

拿着项目经理给你的仓库地址，把仓库拉取到本地，任意位置右键git bash here git clone 仓库地址
关闭掉git bash here，在文件中再次重新打开git bash here
在里面做你的开发/工作
下班之前，提交到云端gitee：

git add . - 文件提交到了本地
git commit -m"必须日志" - 文件提交到了git服务器
git push origin master - 推到云端，只有主分支master可以推到云端

第二天上班之前，更新一下： git pull origin master - 更新特殊：拉仓库和更新的区别：拉仓库全部都拉一边，更新只会拉取修改过的文件 6、git分支：

		创建分支：git branch 分支名
		查看分支：git branch
		切换分支：git checkout 分支名
		合并分支：git merge 分支名
		删除分支：git branch -d 分支名

svn工具（1-）：集中式版本管理控制工具，集中式：服务器只有一台（坏了，就卵了），一般一些老公司，或者非常注重安全性的公司会用

JavaScript入门学习第六周