【JS】jQuery+Ajax从放弃到知根知底，笔记
初识jQuery
html 代码
原生 JS找 DOM元素
原生 JS更改背景颜色
div1.style.backgroundColor="red";
JQuery 找 DOM元素
$(document).ready(function(){
var d1 = $("div");
var d2 = $(".box1");
var d3 = $("#box2");
})
JQuery 更改背景颜色，
通过与原生JS对比，发现JQuery 更简单，JQ可以将其它样式一并加进来
d2.css({
"background-color": "blue",
"width": "200px"
});
jQuery本质是一个立即执行的匿名函数 jQuery()，
代码来自 jquery-v1.12.4.js:
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
选择版本
jquery-1.11.2.min.js 压缩版本，用于上线，提升运行速度
jquery-1.11.2.js 未压缩版本，用于开发，开发时可以查看函数的实现过程
jquery1 ,jquery2 ,jquery3 的区别，jquery1支持IE567，其它不支持
用什么版本可参考大厂，他们选择可能不是最新的，但一定是考虑最全面的。
JQuery的使用
压缩与未压缩版本，
压缩版本去掉了注释、换行、简化的函数变量参数，一般正式项目使用，未压缩版本有注释，有换行，有空格，利用阅读，一般项目开发使用。
引入压缩和未压缩 JQuery
jquery和原生 JS加载模式
html代码
一、
通过原生 JS入口函数可以拿到 DOM元素 和元素的宽高
window.function (ev) { //入口函数
var img = document.getElementsByTagName("img")[0]
var width = window.getComputedStyle(img).width
console.log(img); //
console.log(width) //562px
}
通过JQuery入口函数可以拿到DOM元素，但拿不到元素的宽高
$(document).ready(function(){ //入口函数
var $img = $("img")[0]
var $width = $img.width();
console.log($img) //
console.log($width) //$img.width is not a function
});
原生 JS 和JQuery入口函数加载模式不同点：
一、
原生 JS 会等到 DOM元素加载完毕，图片也加载完毕才执行
JQuery 会等到 DOM元素加载完毕，但不等图片加载完毕就会执行
二、
原生 JS如果编写了多个入口函数，后面的函数会 覆盖前面编写的
window.onload = function (ev) {
console.log("1")
}
window.onload = function (ev) {
console.log("2")
}
输出: 2
JQuery如果编写多个入口函数，后写的不会覆盖先写的，都会执行
$(document).ready(function(){
console.log(3)
})
$(document).ready(function(){
console.log(4)
})
输出：3, 4
为什么使用 $ 就能访问 jquery $= ?
element = document.querySelector(selectors);
JQuery入口函数的其它写法
第一种写法
jQuery(document).ready(function(){ })
第二种写法
jQuery(function(){ })
第三种写法
$(document).ready(function() { })
第四种写法
$(function(){ })
以上四种写法除了写法不同，作用完全一样
jQuery的冲突问题
当前引入的jquery.js和引入的其它js文件函数冲突了，假如$符号被重写了，那么应该如何处理呢?
方法一，使得jQuery代替 $ （小写j，大写Q，小写uery）
jQuery(function() {
})
var img = jQuery("img")[0];
方法二，释放$，把 $赋值给其它变量，用其它名字代替 $
var abc = jQuery.noConflict();
abc(function(){
})
console.log( abc("img")[0]); //
jQuery核心函数 $();
“$()” 代表调用jQuery的核心函数
//1.接收一个函数
$(function(){
//2.接收一个字符串，也是返回一个 jQuery对象
$str = $("abc")
//2.1接收一个字符串选择器
//返回一个jQuery对象 ，对象中保存找到的DOM元素
var $box1 = $(".box1")
var $box2 = $("#box2")
//2.2接收一个字符串代码片段
var $p = $("段落1
")
$box1.append($p)
$box1.append($p)
//3接收一个DOM元素
var span = document.getElementsByTagName("span")[0]
var s = $(span);
console.log(s); //把一个原生dom元素传给jQuery的核心函数，jq会把原生js函数包装成一个jQuery对象返回
})
jQuery对象
什么是jQuery对象 ？
jQuery对象是一个伪数组
什么是伪数组？
有0到 length-1的属性，并且有 length 这个属性
打印结果验证是否对象
var $div =$("div")
console.log($div)
12
静态方法和实例方法
直接添加到类上面的就是静态方法
添加到类的原型上面的就是实例方法
1.定义 一个类
function Aclass(){
}
2.给这个类添加一个静态方法
Aclass.staticMethod = function(){
console.log("static method")
}
Aclass.staticMethod(); // 静态方法通过类名调用 ，输出 static method
3.给这个实例类添加一个实例方法
Aclass.prototype.instanceMethod = function(){
console.log("instanceMethod")
}
//创建一个实例 （对象）
var a = new Aclass();
a.instanceMethod();// 实例方法通过类的实例调用 ，输出 instance method
静态方法不能用实例方法调用 ，例如 a.staticMethod(); 会报 Uncaught TypeError:错误
jQuery-each方法
数组和伪数组
var arr = [2,4,6,8,10]; // 数组
var obj = {0:2,1:4,2:6,3:8,4:10,length:5} //伪数组
原生 JS 遍历数组和伪数组（对象）
//遍历数组
arr.forEach(function(value, index){
console.log(index,value); //ok
})
遍历伪数组
obj.forEach(function(value, index){
console.log(index,value); //Uncaught TypeError: obj.forEach is not a function
})
jQuery遍历数组和伪数组（对象）
$.each(arr,function(index,value){
console.log(index,value)
}) //ok
$.each(obj,function(index,value){
console.log(index,value)
}) //ok
总结： 原生js能遍历数组，但不能遍历伪数组，而jQuery可以遍历数组和伪数组
jQuery-map方法
map方法与each方法一样，原生JS可以遍历数组，不能遍历伪数组，jQuery可以遍历数组和伪数组
那map与each有什么不同？
一、map返回一个空数组，each返回原数组
var obj = {0:10,1:20,2:30,length:3}
var each = $.each(obj,function(){})
var map = $.map(obj,function(){})
console.log(each) // {0: 10, 1: 20, 2: 30, length: 3}
console.log(map) //[]
二、map静态方法在回调函数中可以通过return 对遍历的数组进行处理生成一个新数组，而each不支持处理
var $map = $.map(arr, function(value,index){
console.log(index,value)
return index + value
})
console.log($map)
jQuery的其它静态方法
trim去除字符串两端的空格
var res = $.trim(string);
判断类型 ,
isWindow是否window对象， isArray() 是否数组，isFunction 是否函数 ，返回值 true false;
var r = $.isArray( [1, 3, 6, 7] ); // true
var w = $.isWindow( window ); // true
var f = $.isFunction( jQuery ); //true , $ 也是函数 isFunction($) 返回 true
静态方法 holdReady
$(function).ready(function(){ }) 默认是DOM元素加载完成就会执行，但是实际开发中，我们要加载其它插件，加载图片等，holdReady的是暂停 ready 执行，参数 true暂停，false恢复。
使用方法，把$.holdRead(true); 写ready前面，在插件和图片加载完后点击执行
$.holdReady(true);
$(function(){
})
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
$.holdRead(false);
}
内容选择器
empty 没有子元素也没有文本内容 ，paretn 有子元素或有文本内容，contains() 找到包括指定内容的元素，has() 找到某元素下面的元素
var $div = $("div:empty") // 找到 1
var $div = $("div:parent") // 2345
var $div = $("div:contains('价格')") //34
var $div = $("div:has('span')") //5
console.log($div)
html
1 价格 价格
a
其它选择器，跳转万能的CSS选择器
在每个 ul 中查找第一个 li，在每个 ul 查找第 2 个li，查找所有不是/非p的标签
查找input标签的name属性，查找所有文本框，查找所有复选框，
$("ul li:first-child")
$("ul li:nth-child(2)")
$(":not(p)")
$("input[name='newsletter']")
$(":text")
$(":checkbox")
属性和属性节点
任何对象都有属性，但只有DOM才有属性节点，什么是属性节点？在 dom标签中添加的属性就是属性节点
原生 JS 设置属性节点 ，添加 name属性，获取 name属性
var span = document.getElementsByTagName("span")[0]
span.setAttribute("name","price")
console.log( span.getAttribute("name"))
attr
获取，一个参数，即使匹配的元素有很多，也只会获取第一个元素
设置，两个参数，所有满足条件的都会设置，如果设置的属性节点不存在，attr会自动新增此节点
var div = $("div").attr("class")
$("div").attr("class","price")
$("div:nth-child(2)").attr("class","a") // 设置第2个div
$("div").eq(3).attr("class","b") // 设置第3个div
$("div").attr({"class": "price", 'id': 'div2'}) //传入对象
removeAttr
会删除所有匹配的属性节点，删除多个属性节点用空格隔开
$("div").removeAttr("class")
$("div").removeAttr("class nam e")
prop方法
prop在1.6版本后新加的，功能上与attr一样，区别是attr返回字符串，prop返回布尔值，
prop适用于结果是true或者false的属性节点 ，如disabled="disabled，checked=“checked”，checked=“”，selected，这种属性值混乱的场景
var check1 = $("input").prop("checked") // true
var check2 = $("input").attr("checked") // checked
$("input").prop("checked",false) // 设置成不选中
removeProp
删除属性节点
$("input").removeProp("checked")
html
练习，使用 attr更改属性值
把图片链接更改为输入框内的链接，第一步获取点击事情，第二步获得输入框内的值，第三步替换img的链接
jQuery
$(function(){
$("button")[0].function(){
var input = $("input").val();
$("img").attr("src",input)
}
})
html
类 class 相关操作 addClass 、removeClass 、toggleClass
点击添加为div添加指定类名，点击删除即把div的指定类名删除，点击切换即指定的类在删除和添加中切换，添加多个类以空格隔开
toggleClass 假如DIV有三个类 c1 c2 c3，而企业操作只需要切换 c2 c3，那么就是 toggleClass(“c2 c3”)，点击后，c2和c3会同时添加或删除，c1不变。
js
$("button")[0].onclick = function(){
$("div").addClass("class1 class2")
}
$("button")[1].onclick = function(){
$("div").removeClass("class1")
}
$("button")[2].onclick = function(){
$("div").toggleClass("class1 class2")
}
html
文本值相关操作
html 只展示内容，text 展示标签和内容，val() 设置属性节点的值value=""
获取内容的写法一样，只是括号内留空
设置html内容，获取html内容 同时获取标签和内容。设置text内容，获取text内容 同时获取把标签和内容，val设置内容，val获取内容 用于input text 类型时，直接输入内容不需要标签
$("div").html("段落一
")
var div = $("div").html()
$("div").text("段落二
")
var div2 = $("div").text()
$("input").val("请输内容，不需要加标签 ")
var in = $("input").val()
jQuery操作样式方法(掌握)
设置CSS样式
单个设置，链式设置，批量设置在css()内传入一个对象
$("div").css("background","red")
$("div").css("background","red").css("width","100px").css("height","100px")
$("div").css({
"width":"150px",
"height":"150px",
"border": "1px solid red"
})
获取css样式
$("div").css("width")
$("div").css("background")
..
jQuery尺寸和位置操作(掌握)
width()获取宽度，offset 获取当前div距离窗口的距离 ，position 获取当前div距离定位元素的距离
var width = $("div").width()
$("div").offset().top
$("div").position().top
设置宽度，offset设置当前div距离窗口的距离 ，position方法不能设置只能获取，可以用css()或width设置
$("div").width("150")
$("div").offset({
width: 100,
})
jQuery的scrollTop方法(掌握)
获取元素的滚动的偏移位（滚动条向下滚动了多少像素）
设置元素的滚动偏移位，设置滚动到 100px 的位置
$("button")[0].onclick = function(){
var top =$("div").scrollTop();
console.log(top)
}
$("button")[1].onclick = function(){
$("div").scrollTop(100)
}
html
设置多行内容，直到出现滚动条，设置style overflow: auto;
获取页面的偏移位，为什么要html + body，因为 body在ie是正常的在 chrome中永远是0，而 html在 ie中永远是0，在chrome中是正常的
//获取
$("button")[0].onclick = function(){
var top =$("html").scrollTop() + $("body").scrollTop();
console.log(top)
}
//设置
$("button")[1].onclick = function(){
$("html,body").scrollTop(100)
}
jQuery事件
事件绑定(掌握)
两种方式，推荐第一种 click，第一种是专用的用于点击事件，第二种 on 是多用的可以用于其它事件
添加多个相同和不相同的事件例如 .click，mouseenter，mouseout，都会执行不会覆盖 ，
//1.1
$("button").click(function(){
console.log("111")
})
1.2
var test = function(){
console.log("000")
}
$("button").click(test)
//2
$("button").on("click",function(){
console.log("222")
})
事件解绑(掌握)
不传参，会解绑所有绑定事件
传一个参数，会解绑所有此类型的绑定事件，示例传 click，解绑所有的 click事件
传多个参数，会解绑指定的多个绑定事件 ，示例传 click, mouseenter，会解绑所有这两种绑定事件，多个参数用空格分隔
$("button").off()
$("button").off(”click“)
$("button").off("mouseenter click")
事件冒泡和默认行为(掌握)
什么是冒泡事件？ 在嵌套的dom元素中，点击子元素，会触发父元素的点击事件，叫事件冒泡。
处理方式，方法一在子元素点击事件中加return false，方法二 传入event对象，使用它的 stopPropagation()方法
$(".father").click(function(){
console.log("111")
})
$(".son").click(function(event){
console.log("222")
// event.stopPropagation();
return false
})
// html
默认行为，点击a链接会打开页面，点击form表单提交按钮会提交表单，这些不是绑定事件而是 dom元素的默认行为。
更改a 链接的默认事件，方法一加 return false，方法二 传入 event 对象，使用它的 event.preventDefault() 方法
$("a").click(function(){
alert("请勾选条款后提交")
return false;
})
事件自动触发(掌握)
trigger 、triggerHandler 自动触发函数
两个函数的的区别：
trigger 在不阻止冒泡时，trigger会触发冒泡事件，有默认行为时，也会触发默认行为（a 标签需要加子元素，并要触发子元素才会有a 的默认事件，如加 span标签 ）
triggerHandler 默认只触发当前dom的事件，不会触发冒泡事件，也不会触发默认行为
$("span").trigger("click")
$(".son").triggerHandler("click")
点击跳转
自定义事件 on(掌握)
on + trigger 自定义事件
示例使用 on 函数绑定 abc事件，再使用 trigger 或 triggerHandler 触发 on 绑定的事件。
$("a").on("abc", function(){
console.log("自定义事件1")
})
$("a").on("abc.ccc", function(){
alert("ccc自定义事件")
})
$("a").trigger("abc") // 触发所有 abc事件
// $("a").trigger("abc.ccc") // 只触发第二个 ccc事件
事件命名空间(掌握)
对事件重命名，当一个按钮绑定多个点击事件，只想触发其中一个 的话使用命名空间对其区分，$v.on(“click.n”, function(){})
必要条件 ： 一必须用 on() 绑定，必须加 trigger 触发
$("a").on("z.aaa", function(){
console.log("aaa点击事件")
})
$("a").on("z.ccc", function(){
alert("ccc点击事件")
})
$("a").trigger("z.aaa")
事件命名空间面试题(理解)
$(".son").trigger(“click”) 触发所有带命名空间和不带命名空间的事件
$(".son").trigger(“click.ls”) 当子元素和父元素使用相同命名空间，两个都触发
事件委托(掌握)
动态增加的内容不响应事件，
点击 li 会输出 li 的内容，点击 button会新增一个 li，但是点击新增的 li 不会输出内容，原因入口函数是在DOM元素加载完毕后执行，新增的 li 是后来添加，所以前面案例监听不到。
$("button").click(function(){
$("ul").append("新增一个li ")
})
$("ul>li").click(function(){
console.log($(this).html())
})
事件委托？ 自己做不到的事件，委托给其他人做，做完返回结果。
delegate() 把 li 的 click 事件委托 ul 监听。
li并没有点击事件，为什么 ul 能输出 li 的内容，因为事件冒泡向上传递，li 没有点击事件，但点击对象 向上传递后 ul有点击事件，所以ul 输出 li的内容
最终响应事件的是 ul，ul 在入口函数执行就已经存在了，所以 ul 可以监听点击事件。
$("ul").delegate("li","click", function(){
console.log($(this).html())
})
html
- 新增元素的点击事件1
事件委托练习(理解)
为弹出的登陆页添加关闭事件 案例八： 对新窗口加点击事件
找一个在入口函数执行之前就被加载出来的元素用作事件委托，
比如让 body 委托，span的点击事件
$('body').delegate('.login>span', 'click', function(){
$mask.remove();
})
移入移出事件(掌握)
mouseover移入，mouseout移出，当父元素内有子元素时，从父元素移到子元素也会触发事件，被当成移出
$(".father").mouseover(function(){
console.log($(this).text())
})
$(".father").mouseout(function(){
console.log($(this).text())
})
父元素和子元素嵌套时，移动到子元素不会触发事件， mouseenter移入，mouseleave移出，开发中推荐这一种
$(".father").mouseenter(function(){
})
$(".father").mouseleave(function(){
})
第三种，使用 hover ，同时监听两个事件，hover可填两个参数，当只写一个，那么移入和移出都执行这一个方法，hover移出子元素不会触发
$("").hover( in , out)
$(".father").hover(function(){
console.log("移入")
},function(){
console.log("移出")
})
html
fatherson
电影排行榜上(理解)
电影排行榜下(理解)
移动到电影名时，展示海报和简介 ，查看 案例1
Tab选项卡上(理解)
Tab选项卡下(理解)
已知代码中有两个ul，第一个 ul是标题，第二个是内容，通过标题选项卡的索引号 $(this).index()，展示对应内容选项卡的内容
$(".nav>li").hover(function(){
$(".content>li").eq($(this).index()).addClass("show")
},function(){
$(".content>li").eq($(this).index()).removeClass("show")
})
Tab选项卡终极(掌握)
更简便周全的方法，siblings() 获取不等于当前标签的所有同级标签，不等于当前标签的 不展示即可
$(".nav>li").hover(function(){
var index = $(this).index();
$(".content>li").eq(index).addClass("show")
$(".content>li").eq(index).siblings().removeClass("show")
})
jQuery 基础动画
jQuery显示隐藏动画(掌握)
jquery基本动画，设置显示隐藏的时间，达到动画的效果
使用 $("").css(“display”,“block”) 可以显示和隐藏，但是display速度很快没有过渡。
show() 和 hide() 和 toggle() 可让显示和隐藏有一个动画过渡，接受两个参数，第一个完成动画的时间，第二个展示完毕之后做什么
$("button").eq(0).click(function(){
$("div").show(1000,function(){
console.log("显示完毕")
})
})
$("button").eq(1).click(function(){
$("div").hide(1000)
})
$("button").eq(2).click(function(){
$("div").toggle(1000)
})
html
对联广告(掌握)
功能，滚动条下拉到指定位置时，展示两侧的对联广告，查看案例2
scroll() 获得网页滚动的位置，scrollTop()距离顶部的位置
$(window).scroll(function(){
var offset = $("html,body").scrollTop()
console.log(offset)
})
jQuery展开和收起动画(掌握)
让图片像画卷一样展示，收起。slideDown接收2个参数，展开时间和展示完成后的动作
$("button").eq(0).click(function(){
$("div").slideDown(1000,function(){
console.log("展示完毕")
})
})
$("button").eq(1).click(function(){
$("div").slideUp(1000,function(){
console.log("收起完毕")
})
})
$("button").eq(2).click(function(){
$("div").slideToggle(1000)
})
html
折叠菜单上(理解)
折叠菜单下(掌握) slideDown
查看示例 折叠菜单
//监听一级菜单 点击事件
$(".nav>li").click(function(){
// 拿到二级菜单
var $sub = $(this).children(".sub")
$sub.slideDown()
//拿到非当前的二级菜单 ，让非当前的二级菜单收起
var otherSub = $(this).siblings().children(".sub")
otherSub.slideUp()
//让箭头90度旋转
$(this).addClass("current")
$(this).siblings().removeClass("current")
})
下拉菜单(掌握) mouseenter
动画前，先调用stop()方法停止还未走完的动画，再执行。
当鼠标在多个一级菜单快速移动，出现了移动结束但动画还在执行，原因是快速移动产生了多个移入移出事件，多个事件处理不过来后产生队列，可使用 stop() 结束尚未执行的事件。
查看 下拉菜单
//监听一级菜单的移入事件
$(".nav>li").mouseenter(function(){
var $current = $(this).children(".current");
//让当前正在运行的动画停止，
$current.stop()
//展示二级菜单
$current.slideDown()
})
$(".nav>li").mouseleave(function(){
var $current = $(this).children(".current");
$current.stop()
$current.slideUp()
})
jQuery淡入淡出动画(掌握) fadeIn
fadeIn() 淡入， fadeOut() 淡出，fadeToggle()淡入淡出切换，fateTo()淡入到百分比
$("button").eq(0).click(function(){
$("div").fadeIn(1000,function(){
console.log("淡入完毕")
})
})
$("button").eq(1).click(function(){
$("div").fadeOut(1000)
})
$("button").eq(2).click(function(){
$("div").fadeToggle(1000)
})
$("button").eq(3).click(function(){
$("div").fadeTo(1000,0.5)
})
html
222888000
弹窗广告(掌握) slideDown
让右下角的广告升起、消失，再展示，stop()停止其它动画再执行 弹窗广告
$(".div").stop().slideDown(1000).fadeOut(1000).fadeIn(2000)
jQuery自定义动画 animate
animate接收四个参数，参数一对象 可以修改属性，参数二动画时长，参数三动画节奏，默认swing，参数四动画执行完毕的回调，查看 自定义动画
$("button").eq(0).click(function(){
$(".one").animate({
width:50
},2000,function(){
});
jQuery的stop和delay方法(掌握)
delay 指定延迟时间 ， stop(true) 停止当前和后续的所有动画， stop() 停止当前动作，后续动画继续执行
$("button").eq(0).click(function(){
$(".one").animate({ width:500,}, 1000).delay(2000)
$(".one").animate({ height:500,}, 1000)
})
$("button").eq(1).click(function(){
$(".one").stop(true)
})
html
图标特效(理解)
鼠标悬停，图标向上移动，再从下面移回原位
无限循环滚动上(理解)
无限循环滚动下(理解)
案例七： 无限循环滚动
jQuery添加节点相关方法(掌握)
append 会把新增的元素添加到 li 的最后
$("button").click(function(){
var $li = $('新增加的节点 ')
$("ul").append($li);
})
prepend 把新增的元素添加到 li 的最前面
$("ul").prepend($li);
alter 添加到 ul的后面，与 ul同级
$("ul").after($li);
before 添加到 ul 的前面，与 ul同级
$("ul").before($li);
html
- 我是第1个节点
- 我是第2个节点
- 我是第3个节点
jQuery删除节点相关方法(掌握)
remove 找到谁就删谁，示例删除所有 div 标签
$("button").click(function(){
$("div").remove();
$("li").remove(".item") // li 下类名等于 item的节点
})
empty 删子元素，并清空当前节点所有内容，
$("li").empty()
jQuery替换节点相关方法(掌握)
replaceWith 替换所有匹配的元素
$("button").click(function(){
var $h= $('替换节点
')
$("h6").replaceWith($h);
})
我是第1个节点
replaceAll 替换所有，与replaceWith功能一样，但要替换元素的位置不同
$h.replaceAll("h6")
jQuery复制节点相关方法(掌握)
clone 深复制、浅复制 ，区分：参数 true 和 false
浅复制 clone(false) ，复制元素，不复制事件
$("button").click(function(){
var $li = $("li:first").clone(false)
$("ul").append($li)
})
深复制 clone(true) 复制元素，同时复制事件，示例点击append生成的 li 也会打印
$("button").click(function(){
var $li = $("li:first").clone(true)
$("ul").append($li)
})
$("li").click(function(){
console.log($(this).html())
})
html
- 去是第1个节点
- 去是第2个节点
- 去是第3个节点
新浪微博上(理解)
新浪微博中(理解)
新浪微博下(掌握)
事件委托，实时监听 input 输入框，输入框有文字，提交按钮才可用
$("body").delegate("input[type=text]",'propertrychange input',function(){
if($(this).val().length > 1){
$("input[type=button]").prop("disabled",false)
}
})
事件委托，实时监听 textarea输入框
$("body").delegate("textarea",'propertrychange input',function(){
console.log($(this).val())
})
on绑定文本框 textarea
$(document).on('onpropertychange input','textarea',function(){
console.log($(this).val())
})
狂拍灰太狼首页布局(理解)
狂拍灰太狼其它界面布局(理解)
狂拍灰太狼界面显示隐藏(理解)
狂拍灰太狼随机位置和图片(理解)
狂拍灰太狼动画实现(理解)
狂拍灰太狼游戏逻辑(理解)
QQ音乐播放器顶部布局(理解)
QQ音乐播放器内容工具条布局(理解)
QQ音乐播放器列表布局(理解)
QQ音乐播放列表完善(理解)
QQ音乐播放列表自定义滚动条(理解)
QQ音乐歌曲信息(理解)
QQ音乐底部基本结构(理解)
QQ音乐底部进度条(理解)
QQ音乐底部完善(理解)
QQ音乐高斯模糊背景(理解)
QQ音乐加载歌曲(理解)
QQ音乐加载歌曲完善(理解)
QQ音乐播放图标切换(理解)
QQ音乐播放状态切换(理解)
QQ音乐序号动画(理解)
QQ音乐播放工具类封装(理解)
QQ音乐音乐播放暂停(理解)
QQ音乐底部音乐控制(理解)
QQ音乐删除音乐(理解)
QQ音乐切换歌曲信息(理解)
QQ音乐进度条点击(理解)
QQ音乐进度条拖拽(理解)
QQ音乐时间同步(理解)
QQ音乐进度条同步(理解)
QQ音乐歌曲同步(理解)
QQ音乐声音控制(理解)
QQ音乐歌词解析(理解)
QQ音乐歌词同步(理解)
QQ音乐完结(理解)
jQuery基本结构(掌握)
jQuery入口函数测试(理解)
jQuery入口函数-代码片段实现(理解)
jQuery入口函数-工具方法抽取(理解)
jQuery入口函数-代码片段优化(理解)
jQuery入口函数-真伪数组转换(理解)
jQuery入口函数-选择器处理(理解)
jQuery入口函数-数组处理(理解)
jQuery入口函数-其它类型处理(理解)
jQuery入口函数-extend方法(理解)
jQuery入口函数-函数处理(理解)
jQuery原型上的属性(理解)
jQuery原型上的方法-toArray和get(理解)
jQuery原型上的方法-eq和first-last(理解)
jQuery原型上的方法-each方法(理解)
jQuery原型上的方法-each方法细节处理(理解)
jQuery原型上的方法-map方法(理解)
jQueryDOM操作相关方法-empty方法(理解)
清空所有相关元素的内容
var btn = $("button")[0]
btn. function(){
$("p").empty()
}
jQueryDOM操作相关方法-remove方法(理解)
jQueryDOM操作相关方法-html方法(理解)
jQueryDOM操作相关方法-text方法(理解)
jQueryDOM操作相关方法-appendTo方法上(理解)
jQueryDOM操作相关方法-appendTo方法下(理解)
jQueryDOM操作相关方法-prependTo方法(理解)
jQueryDOM操作相关方法-append方法(理解)
jQueryDOM操作相关方法-prepend方法(理解)
jQueryDOM操作相关方法-insertBefore方法(理解)
jQueryDOM操作相关方法-replaceAll方法(理解)
jQuery属性操作相关方法-attr方法(理解)
jQuery属性操作相关方法-prop方法(理解)
jQuery属性操作相关方法-css方法(理解)
jQuery属性操作相关方法-val方法(理解)
jQuery属性操作相关方法-hasClass方法(理解)
jQuery属性操作相关方法-addClass方法(理解)
jQuery属性操作相关方法-removeClass方法(理解)
jQuery属性操作相关方法-toggleClass方法(理解)
jQuery事件操作相关方法-on方法上(理解)
jQuery事件操作相关方法-on方法中(理解)
jQuery事件操作相关方法-on方法下(理解)
jQuery事件操作相关方法-off方法(理解)
jQueryDOM操作相关方法-clone方法(理解)
Ajax-服务器软件安装(理解)
PHP基础语法(理解)
get请求处理(理解)
post请求处理(理解)
get-post异同(理解)
post-文件上传(理解)
文件上传必须要加enctype属性，并且值为"multipart/form-data"
php代码
$f = $_FILES["upFile"];
if (move_uploaded_file($f["tmp_name"], "./img/".$f["name"]) ==1 ){
echo "上传成功";
}
html代码
post-大文件上传(理解)
文件上传大小与最大时间在web服务器中配置
Ajax-GET基本使用(掌握)
是与服务器交换数据，在不重新加载整个页面的情况下，更新页面的数据
ajax五个步骤，
1。创建一个异步对象
var xhr = new XMLHttpRequest();
2。设置请求方式、请求地址
xhr.open("get","ajax.php",true);
3。发送请求
xhr.send();
4。监听状态的变化
xhr.onreadystatechange = function(en2){
5。。。
}
5。处理返回的结果
readyState 等于4说明整个请求已完成，status是http状态码等于200表示请求成功，responseText 服务器返回的数据
if (xhr.readyState ==4 ){
if(xhr.status == 200) {
console.log("发送成功")
console.log(xhr.responseText);
}else{
console.log(xhr.status)
}
}
Ajax-GET-IE兼容(掌握)
1、在IE5，6版本中使用ajax，要在url中加不同的参数 ?x=xxx，让每次请求的url都不相同。这是IE浏览器认为同一个页面只有一个结果
2、为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Ajax-GET封装(掌握)
手动封装ajax函数
function ajax(url , success, error){
var xhr = new XMLHttpRequest();
xhr.open("get",url,true)
xhr.send()
xhr.onreadystatechange = function(en2){
if (xhr.readyState ==4 ){
if (xhr.status ==200){
success(xhr);
}else{
error(xhr)
}
}
}
}
调用ajax
$("button").click(function(){
a("./ajax.php",function(xhr){
console.log("成功")
console.log(xhr.responseText)
},function(xhr){
console.log("失败")
console.log(xhr.responseText);
})
})
Ajax-GET封装中(掌握)
Ajax-GET封装下(掌握)
Ajax-POST基本使用(掌握)
ajax post方法封装
function ajax(url , success, error){
var xhr = new XMLHttpRequest();
xhr.open("post",url,true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fuser=Bill&lnuser=Gates");
xhr.onreadystatechange = function(en2){
if (xhr.readyState ==4 ){
if (xhr.status ==200){
success(xhr);
}else{
error(xhr)
}
}
}
}
调用
$("button").click(function(){
ajax("./ajax.php",function(xhr){
console.log("成功")
console.log(xhr.responseText)
},function(xhr){
console.log("失败")
console.log(xhr.status);
console.log(xhr.responseText);
})
})
Ajax-POST封装(掌握)
Ajax-jQuery封装(掌握)
ajax-jQuery调用
$.ajax({
type: "POST",
url: "ajax.php",
data: "fuser=Bill&lnuser=Gates",
success:function(msg){
console.log(msg)
},
error:function(xhr){
console.log(xhr.status)
}
})
Ajax-练习(理解)
Ajax-XML(掌握)
Ajax-XML-练习(理解)
Ajax-JSON(掌握)
使用JSON.parse() 方法 json转对象，在IE8之前的低版本中不可以使用JSON.parse()方法，需要下载json2js框架进行转换
$.ajax({
type: "POST",
url: "ajax.php",
data: "fuser=Bill&luser=Gates",
success:function(msg){
var data = JSON.parse(msg);
console.log(data)
}
})