补充

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动画
5.
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效果