补充

2.28
jq的效果
1.fadeOut()由可见过渡到隐藏
$(selector).fadeOut(speed,easing,callback)
Speed--毫秒代表过渡期
Easing--过渡效果...linear匀速过渡
Callback()--回调函数
2.fadeIn()由隐藏过渡到可见
$(selector).fadeIn(speed,easing,callback)
3.fadeTo()逐渐改变被选元素的不透明度为指定的值（褪色效果）
$(selector).fadeTo(speed,opacity,easing,callback)
参数 描述
speed 必需。规定褪色效果的速度。
可能的值：
毫秒
"slow"
"fast"
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。
可能的值：
"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动
提示：扩展插件中提供更多可用的 easing 函数。
callback 可选。fadeTo() 方法执行完之后，要执行的函数。
前两个必选
4.fadeToggle()--是fadeOut()和fadeIn()之间来回切换
$(selector).fadeToggle(speed,easing,callback)
5.hide()隐藏被选元素
6.show()显示被选元素
7.Toggle()hide和show来回切换
8.slideDown()通过调整高度来滑动显示被选元素
9.slideUp()通过调整高度来滑动隐藏被选元素
10.slideToggle()--slideDown()和slideUp()的来回切换
11.animate()给元素添加动画，根据css的属性值来添加，但是css属性值
(selector).animate({styles},speed,easing,callback)

jq的事件
1.click()：jq的点击事件
$(selecter).click(function(){})
事件方法中this指向，当前绑定的元素对象不能使用this，要用$(this)
2.bind()和on()都是给元素添加事件
3.hover(fn,fn)鼠标悬浮
4.
jq的HTML和css
1.addclass()给被选元素添加一个类
2.removeclass()移除被选元素的类名
3.after()在被选元素的后面插入内容
4.before()在被选元素的前面插入内容
5.append()在被选元素的结尾处插入内容
5-1.appendTo()与append功能一样，但写法不一样
6.prepend()在被选元素的开头处插入内容
prependTo()与prepend功能一样，但写法不一样
7.attr()设置或返回被选元素的属性。。有四种写法
7-1.prop()设置或返回被选元素的属性...有四种写法
8.css()给被选元素设置或返回一个或多个css样式属性...有四种写法
9.height()设置或返回被选元素的高度..三种写法
10.width()设置或返回被选元素的宽度..三种写法
11.html()设置或返回被选元素李的内容
11-1.text()只能插文本
12.insertBefore()在被选元素前面插入html标签
13.insertAfter()在被选元素后面插入html标签
14.scrollleft()
scrolltop()
15.val()设置或返回表单中的value值...针对表单

3.1
jq的遍历方法
jQuery获取的对象集合是一个伪数组。不能用[0]这种形式获取，必须用eq()
1.add()将元素添加到对象集合中
2.children()返回被选元素的所有直接子元素
$(selector).children(filter)
3.find()返回被选元素的后代元素,参数是filter是必填项
$(selector).find(filter)
4.next()返回被选元素的后一个同级元素
5.nextAll()返回被选元素后的所有同级元素
6.sibilings()返回被选元素的所有同级元素
7.parent()返回被选元素的直接父元素
8.parents()返回被选元素的所有祖先元素
9.prev()返回被选元素的前一个同级元素
10.prevAll()返回被选元素前得所有同级元素
11.eq()返回被选元素指定索引的元素
12.each()给获取的元素集合对象，每一个都添加执行函数
$(selector).each(function(index,element))
jq的杂项
实用工具
1.$.each()用于遍历指定的数组和对象
两个参数：（1）var arr=["zhang","li"]
$.each(arr,function(index,val){

})
（2)var obj={name:"zz",age:23}
$.each(obj,function(key,val){
console.log(key)
})
2.
$.fn.extend()为jquery扩展一个或多个属性和方法
$("p").methods()这是jq的使用方法
每个方法中的this都指向前面的对象集合
清徐浮动的一个方法
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
3.4 JQ版本的问题
Jq版本的分界线是2.0；2.0之前很多方法支持IE低版本，2.0之后就很多不支持了。。。
事件
event
target.事件源
event.target。。。是事件源
事件委托。就是利用这个原理
冒泡：
event.stopPropagation()
事件默认行为p;.
event.preventDafault()
备注：
字符串拼接的元素，如果添加事件，事件不起作用
使用delegate()
手机事件
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel

// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend

// 屏幕旋转事件
onorientationchange

// 检测触摸屏幕的手指何时改变方向
orientationchange

// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX　　　 // Relative to the screen
screenY 　　 // Relative to the screen
pageX　　 　　// Relative to the full page (includes scrolling)
pageY　　　　 // Relative to the full page (includes scrolling)
target　　　　 // Node the touch event originated from
identifier　　 // An identifying number, unique to each touch even

AJAX
打开终端的快捷键：window+R====>CMD===>ipconfig

动态页面：跟后台发生数据交互的页面
前后台数据交互依赖的一项技术叫AJAX
1.js的异步操作
（1）定时器
（2）事件
（3）回调
（4）AJAX
AJAX的优点---可以局部更新网页内容
2.AJAX的本质就是xmlHttpRequest对象
var ajax=new XMLHttpRequest();
console.log(ajax)
控制台出现三个属性----
readyState--请求的五个阶段0-1-2-3-4
responseText--返回的文件内容
status--状态码--返回的状态信息
在_proto_有三个方法
Open()
send()
onReadyStateChange()
了解
xml是一种数据存储模式。。抛弃了
json是一种数据存储格式。。。当前最流行的
3.status的状态码
200---成功了
3XXX---禁用
404代表文件没找到
5XXX代表服务器的问题

AJAX传参
客户端和服务器
1.请求request
2.响应response
AJAX的请求方式
get：
看得见，传送数据小，通过网络地址传
post：
看不见，传出数据大一些，通过http中的某个对象的一个body属性

jq提供了$.ajax({})
showapi.com易源

3.15
ajax的兼容性
var http;
if(window.XMLHttpRequest){
http=new XMLHttpRequest
}else{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
http.open();
http.send();
axios

fetch

这是当前流行的ajax轻量插件
3.11
1.跨域
不在同一服务器下，就是协议，域名，端口三者有一个不一样就是跨域
2.同源策略
请求的地址和浏览器的地址必须在同域下，就是说协议端口域名都一样
3.http://172.164.130.56:80
http是协议。 172-IP是地址 80是端口
互联网的协议有两种:http和HTTPS
4.解决跨域
靠标签上的src属性解决跨域问题，利用script标签的src属性去请求外部的数据
看网络地址，关键字cd和callback
服务器127.0.0.1:8088上的写法
1.<script>
function fn(data){
console.log(data)
}
</script>
<script src="http://127.0.0.1:8020/3.11/01.txt?__hbt=1552292240994"></script>
服务器127.0.0.1:8088上arr.js的写法
fn([
{"name":"zhudfha","age":23},
{"name":"zhudfha","age":23},
{"name":"zhudfha","age":23},
{"name":"zhudfha","age":23}
])
2.关键字cb和callback
<script>
function fn(data){
console.log(data)
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=26525_1457_21101_28607_28584_26350_28603_28625_27543&req=2&csor=1&cb=jQuery11020949313022271028_1552290622696&_=1552290622700"></script>
3.dom的形成
var script=document.createElement("script")
script.src="https://sp1.baidu.com/5b11fzupBgM187jm9iCKT-xh_/sensearch?wd=崔&cb=fn"
document.body.appendChild(script)
function fn(data){
console.log(data)
}

jq中的iframe
Load...将服务器中的数据加载到指定的元素中
案例：一个网站有许多页面，但是头部和尾部都一样，可以使用load
load传参：
load传参是以post方式发送的PHP后台用post接收或request接收
$("div").load("http://127.0.0.1:8020/3.11/load.php?__hbt=1552295319191",{txt:"cuicui"})
<?php
echo $_REQUEST['txt'];
?>
jq中的get
$(function(){
$.get("get.php",{name:"zhangsan"},function(data){
console.log(data)
})

jq中的post
$(function(){
$.post("post.php",{name:"zhangsan"},function(data){
console.log(data)
jq中的ajax
$(function(){
$.ajax({
type:"post",
url:"post.php",
async:true,
data:{name:"list"}
success:function(data){
console.log(data)
}
})
})
jq中的ajax跨域问题
$(function(){
$.ajax({
type:"get",
url:"http://127.0.0.1:8020/3.11/01.txt?__hbt=1552292240994",
async:true,
data:{wd:"a"},
dataType:"jsonp",
jsonp:"cb",
jsonpCallback:"fn",
success:function(data){
console.log(data)
}
})
})

0.1txt
fn([12,24])
前端给后台提交数据的方式
1.Get
2.Post
3.option
4.head
5.put
6.delete
7.trace
8.connect
后台PHP为例
php有三个超全局变量$_GET ,$_POST,$_REQUEST
$_GET.用于存储前台get方法提交的数据，是一数组类型$_GET['name']
$_POST.用于存储前台post方法提交的数据，是一数组类型
$_REQUEST是get和post提交的都存..数组类型
PHP的数组有两种
1.普通数组$arr=[12,56,"fauhofija"]////$arr[0]
2.关联数组...$arr=array("name"=>"zhang","age"=>23)...$arr['name']
跨域
1.看数据

Underscore

underscore:主要围绕集合。数组。对象。以及提供了一些的使用工具。他的核心是数据（model）
jQuery意识JS封装的一个库，主要表现在视图层（view）

underscore主要封装了一个_对象。jQuery封装了 一个$函数对象，在jQuery中，如果遇见了其他也以$开头的框架，为了区分$，jQuery提供了noConflict()方法，将$转换为其他
var cc=$.onConflict()
//// 第一步 获取模板里的内容
// var html=$("#as").html()
//// 第二步将数据传进模板
// var st=_.template(html)
//// console.log(st)funtion
// var temp=st({arr:data})
// console.log(typeof temp)
//// 第三步添加到指定位置
// $(".content").html(temp)

PHP
php后台语言
php文件不能用浏览器打开
Apache是PHP的环境，JS的环境是node
我们用的PHPstudy这个集成环境，只需要把PHP文件放在Apache中的根目录中www文件中就行了。不能通过浏览器打开，通过网络地址打开

网页由上往下一一加载，一个dom一个dom的加载，要注意：link、script、img、iframe等带有href和src的属性的标签，这些属性相当于ajax，又去服务器寻找对应的资源


IDE开发集成环境。就是编辑器，phpstorm
语法：
1.php文件可以嵌套HTML标签，HTML文件里不能出现PHP写法
2.所有PHP都必须以<?php开头，以 ？>结尾
3.PHP中的美行代码写完之后一定要加“；”分号
4.PHP输出语句echo和print
5.PHP的注释//单行注释，.../**/单行注释
变量：
PHP中的变量$name...
命名规则跟js一样
驼峰命名法nameAge...匈牙利命名法.._name
PHP是弱类型语言
int a="12"；×
声明变量的时候不需要去指定变量的数据类型，有赋予它的值去决定他的类型
作用域
全局：函数外定义的变量
局部：函数内定义的变量
正常情况下，局部和全局的变量不能互相访问
函数内需要访问全局变量，需要变量加global关键字
$name="zhangsan"
function fn(){
global $name;
echo $name;
}
fn()
局部变量，随着函数调用结束，内存被销毁
如果需要保存局部变量的内存不被销毁，变量前面要加static关键字

function fn(){
static $age=12;
$age=$age+1;
echo $age;
}
fn();//13
fn();//14
fn();//15

数据类型
string（字符串） integer(整形） float（浮点型） boolean(布尔型) array(数组型)null、object
var_dump()返回变量的数据数组类型

3.14

1.渲染页面
1,渲染页面方法）
（1）字符串拼接--最常用的方法
优点：只进行一次dom回流，
缺点：原有dom回流事件都会消失
原因：就在与innerHTML这个属性，这个属性是返回或设置dom的内容，以字符串形式返回，拼接玩之后是string类型，而onmouse这些属性是dom元素对象身上的属性，
所以这些onmouse系列的属性就丢失了
（2）dom循环
dom回流：每当对dom元素进行增删查改的时候。浏览器会重新加载一个，把新的结果渲染出来
优点：原有dom身上的事件不会消失，不影响其他事件
缺点：dom回流次数过多，严重影响网页性能
（3）模板
模板的本质是字符串
（4）文档碎片
优点：既不影响原有dom的属性，只dom回流一次

无论上面的四种方法，新增的li也没有onmouseover事件，如果保证新增的li也拥有添加的事件，用dom遍历添加事件是不行的
用事件委托
事件委托：
利用的原理是事件冒泡原理，但并不是所有的事件都有事件冒泡机制，比如mouseenter，mouseleave；

XML
常见的数据存储格式有两种：一种是json-99.9%；另一种是XML
语法注意：
1.要有xml声明；
2.要有一个根节点；
3.xml必须是双标签
4.对大小写敏感
5.xml标签的属性值必须要加引号“”
6.xml中的内容不要使用特殊符号：<...>... &等
7.文档中的空格会被保留
注意事项：json ...里面用双引号，外面只能用单引号

ajax获取数据
json格式需要解析
string类型==>json类型用JSON.parse()，
json类型==>string类型用JSON.stringify(),

3.15
ajax的缓存
对于服务器来说，所有的请求都是第一次，没有记忆功能。这对服务器来说是好事，对于客户人员来说就是坏事。就把这种解决方式给了客户端（浏览器）
缓存的优势
第一次请求的结果会保存在缓存区，第二次相同的请求的时候，就直接在缓存区将数据返回给你，不会在向服务器请求了，增强页面的响应速度和用户体验
缓存的缺点
第二次请求的相似度过高，浏览器会认为是第一次的，就直接从缓存区拿数据，不向服务器请求，占内存
解决缓存
1、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
2、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);
3、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);
4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random();
5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

3.16
1.选择器：id 、class、子代、后代、交集、并集、属性、相邻（+）、兄弟（~）、标签，通配符（*）、伪类，结构
2.浏览器内核
谷歌的内核---Webkit
IE-----trident
火狐的内核---gecko
欧鹏---presto
国内浏览器的内核---webkit
3.css3针对同一样式在不同浏览器的兼容。需要在样式属性前加上内核代码
谷歌...-webkit-transition
opera...-o-transition
firefox...-moz-transition
ie...-ms-transition
4.css3 中的过渡属性transition
transition：width 2s linear 1s;
注意实践一定要加单位
css3动画

1. Animation

   1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. 1. div {
                                                                                 　　 100px;
                                                                                 　　height: 100px;
                                                                                 　　background: orange;
                                                                                 　　position: absolute;
                                                                                 　　left:0;
                                                                                 　　top:0;
                                                                                 　　animation: donghua 4000ms linear infinite;
                                                                                 　　/*animation: reverse;反向*/
                                                                                 　　/　　*animation-direction: alternate;循环*/
                                                                                 }
                                                                                 /*div:hover{*/
                                                                                 　　/*animation-play-state: paused;暂停*/
                                                                                 /*}*/
                                                                                 @-webkit-keyframes donghua{
                                                                                 　　0{
                                                                                 　　　　top:0;
                                                                                 　　　　left: 0px;
                                                                                 　　}
                                                                                 　　25%{
                                                                                 　　　　top:0;
                                                                                 　　　　left: 300px;
                                                                                 　　}

6.2d与3d
css3中的3d和2d 特效都是方法和函数
translate()平移...两个参数...mpx 和npx
rotate()旋转..参数是number beg
scale()缩放 大于1放大 小于一缩小
skew()拉伸 xdeg ，ydeg

3d
1.原理：近大远小...视距（perspective）
元素要有3d的效果，perspective视距给他的父级元素
transfrom-style：preserve-3d；以3d的内部子元素成 3d效果；
Transform-style：preserve-3d；3d的内部子元素成3d效果