【JS】jQuery+Ajax从放弃到知根知底，笔记

初识jQuery

html 代码

<div></div>
<div class="box1"></div>
<div id="box2"></div>

原生 JS找 DOM元素

<script>
window.onload = function(ev){
	var div1 = document.getElementsByTagName("div")[0];
	var div2 = document.getElementsByClassName("box1")[0];
	var div3 = document.getElementById("box2");
	console.log(div1,div2,div3);
}
</script>

原生 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

<script src="js/jquery-1.12.mini.js"></script>
<script src="js/jquery-1.12.js"></script>

jquery和原生 JS加载模式

html代码

<img src="img/2.jpg">

一、
通过原生 JS入口函数可以拿到 DOM元素 和元素的宽高

window.function (ev) { //入口函数
	var img = document.getElementsByTagName("img")[0]
	var width = window.getComputedStyle(img).width
	console.log(img);		 //<img src="img/2.jpg">
	console.log(width)		//562px
}

通过JQuery入口函数可以拿到DOM元素，但拿不到元素的宽高

$(document).ready(function(){ //入口函数
	var $img = $("img")[0] 
	var $width = $img.width();
	console.log($img) 		 // <img src="img/2.jpg">
	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]);  //<img src="img/dt.png">

jQuery核心函数 $();

“$()” 代表调用jQuery的核心函数

//1.接收一个函数
$(function(){

	//2.接收一个字符串，也是返回一个 jQuery对象
	$str = $("abc")
	//2.1接收一个字符串选择器
	//返回一个jQuery对象 ，对象中保存找到的DOM元素
	var $box1 = $(".box1")
	var $box2 = $("#box2")
	//2.2接收一个字符串代码片段
	var $p = $("<p>段落1</p>")
	$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) 
<div>1</div><div>2</div>

静态方法和实例方法

直接添加到类上面的就是静态方法
添加到类的原型上面的就是实例方法

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

<div></div>  <div>1</div>  <div>价格</div>  <div><p>价格</p></div>  
<div><span>a</span></div>

其它选择器，跳转万能的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"))
<span></span>

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

<input type="checkbox" name="" checked="checked">

练习，使用 attr更改属性值
把图片链接更改为输入框内的链接，第一步获取点击事情，第二步获得输入框内的值，第三步替换img的链接
jQuery

$(function(){
	$("button")[0].function(){
		var input  = $("input").val();
		$("img").attr("src",input)
	}
})

html

<input type="text" name="imgaddr" value="1">
<button> 切勿强连通图</button><br>	
<img src="https://www.jb51.net/images/logo.gif">

类 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

<style type="text/css">
	.class1 {border: 15px solid orange;}
	.class2 {width:50px;height: 150px;background-color: red;margin-top: 10px;}
</style>
<button>添加</button>
<button>删除</button>
<button>切换类</button>
<div></div>

文本值相关操作

html 只展示内容，text 展示标签和内容，val() 设置属性节点的值value=""
获取内容的写法一样，只是括号内留空
设置html内容，获取html内容 同时获取标签和内容。设置text内容，获取text内容 同时获取把标签和内容，val设置内容，val获取内容 用于input text 类型时，直接输入内容不需要标签

$("div").html("<p>段落一</p>")  
var div = $("div").html()

$("div").text("<p>段落二</p>")
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

<div> 设置多行内容，直到出现滚动条，设置style overflow: auto;</div>
<button>获取</button>
<button>设置</button>

获取页面的偏移位，为什么要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
<div class="father"><div class="son"></div></div>

默认行为，点击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")

<a href="csdn.net"><span>点击跳转</span></a>

自定义事件 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>新增一个li</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

<ul><li>新增元素的点击事件1</li></ul>

事件委托练习(理解)

为弹出的登陆页添加关闭事件 案例八： 对新窗口加点击事件
找一个在入口函数执行之前就被加载出来的元素用作事件委托，
比如让 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

<div class="father"> father<div class="son">son</div></div>

电影排行榜上(理解)

电影排行榜下(理解)

移动到电影名时，展示海报和简介 ，查看 案例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

<button>显示</button><button>隐藏</button><button>切换</button><div></div>

对联广告(掌握)

功能，滚动条下拉到指定位置时，展示两侧的对联广告，查看案例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

<button>显示</button><button>隐藏</button><button>切换</button><div></div>

折叠菜单上(理解)

折叠菜单下(掌握) 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

<button>淡入</button><button>淡出</button>
<button>淡入淡出</button><button>淡入到</button><div>222888000</div>

弹窗广告(掌握) 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

<style>
.one{ width: 100px; height: 100px; background: red; }
.two{ width: 500px; height: 10px; background: blue; }
</style>
<button>开始动画</button>
<button>停止动画</button>
<div class="one"></div>
<div class="two"></div>

图标特效(理解)

鼠标悬停，图标向上移动，再从下面移回原位

无限循环滚动上(理解)

无限循环滚动下(理解)

案例七： 无限循环滚动

jQuery添加节点相关方法(掌握)

append 会把新增的元素添加到 li 的最后

$("button").click(function(){
	var $li = $('<li>新增加的节点</li>')
	$("ul").append($li);
})

prepend 把新增的元素添加到 li 的最前面

	$("ul").prepend($li);

alter 添加到 ul的后面，与 ul同级

	$("ul").after($li);

before 添加到 ul 的前面，与 ul同级

	$("ul").before($li);

html

<button>添加节点</button>
<ul>
	<li>我是第1个节点</li>
	<li>我是第2个节点</li>
	<li>我是第3个节点</li>
</ul>

jQuery删除节点相关方法(掌握)

remove 找到谁就删谁，示例删除所有 div 标签

$("button").click(function(){
	$("div").remove();
	$("li").remove(".item") // li 下类名等于 item的节点
})

empty 删子元素，并清空当前节点所有内容，

	$("li").empty()

jQuery替换节点相关方法(掌握)

replaceWith 替换所有匹配的元素

$("button").click(function(){
	var $h= $('<h1>替换节点</h1>')
	$("h6").replaceWith($h);
})
<h6>我是第1个节点</h6>

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

<ul> <li>去是第1个节点</li> <li>去是第2个节点</li> <li>去是第3个节点</li> </ul>

新浪微博上(理解)

新浪微博中(理解)

新浪微博下(掌握)

事件委托，实时监听 input 输入框，输入框有文字，提交按钮才可用

$("body").delegate("input[type=text]",'propertrychange input',function(){
	if($(this).val().length > 1){
		$("input[type=button]").prop("disabled",false)
	}
})
<input type="text" name="abc">
<input type="button" name="send" value="提交" disabled>

事件委托，实时监听 textarea输入框

$("body").delegate("textarea",'propertrychange input',function(){
	console.log($(this).val())
})
<textarea></textarea>

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代码

<form action="./ajax.php" method="post" enctype="multipart/form-data">
	<input type="file" name="upFile"><br>
	<input type="submit" value="上传"><br>
</form>

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)
	}
})

Ajax-JSON-练习(理解)

Ajax-微博-发送微博上(理解)

Ajax-微博-发送微博下(理解)

Ajax-微博-获取微博(理解)

Ajax-微博-顶踩删(理解)

Ajax-微博-获取页码上(理解)

Ajax-微博-获取页码下(理解)

Cookie基本使用(掌握)

Cookie注意点(掌握)

Cookie添加方法封装(掌握)

Cookie获取和删除方法封装(掌握)

Ajax-微博-保存页码(理解)

hash(掌握)