前端笔记 day5/5 jQuery

jQuery

创造标签

<script>
	$('<p></p>').html('内容');
</script>

插入标签(尾部追加)

append appendTo

<script>
//append:父元素.append(新元素);
//appendTo:新元素.appenTo(父元素);
</script>

插入标签(头部追加)

prepend prependTo

<script>
//prepend:父元素.prepend(新元素);
//prependTo:新元素.prepenTo(父元素);
</script>

插入标签(自定义位置)

insertBefore before insertAfter after

<script>
//新元素.insertBefore(目标);
//目标.before(新元素);

//新元素.insertAfter(目标);
//目标.after(新元素);
</script>

复制标签

clone

<script>
clone(true);//标签内容事件一并复制 false-复制标签内容 事件不复制
</script>

删除

remove detach empty

<script>
//remove:将元素删除 不恢复事件
p.remove();

//detach:将元素删除 恢复被删除元素 事件也会被删除
p.detach();

//empty:元素还在 内容清空
ul.empty();
</script>

事件

<script>
	$().on('click',);
	ev.stopPropagation();//标准浏览器阻止冒泡 ev是事件函数的参数
	ev.cancelBubble=true;//ie浏览器
</script>

动画

隐藏显示

<style>
		#box{
			width: 100px;
			height: 100px;
			background: lightgreen;
		}
</style>
<div id="box"></div>
<button>click</button>
<script>
/*
	show hide 从左上角显示 隐藏
*/
	$('button').on('click',function(){
			$('#box').hide();//display:none 里边可以传参数 时间ms
			$('#box').show();//display:block;
		})
</script>

<script>
/*淡入淡出
	fadeIn
	fadeOut
	fadeTo(时间ms,淡入程度[0-1])
*/
	$('button').on('click',function(){
			$('#box').fadeOut(1000);
			$('#box').fadeIn(1000);
		})
</script>

<script>
/*展开收起
slideDown-展开
slideUp-收起
*/
		$('button').on('click',function(){
			$('#box').slideDown(500);//时间ms
		})
</script>

ajax

优点:异步更新

ajax五步骤

1 创建异步请求
var ajax=new XMLHttpRequest();

2 决定方式
get获取/post发送
ajax.open(‘get或post’,url,是否异步-默认true);

3 发送
get:ajax.send()
post:ajax.send(‘username=a&password=123’)

4 注册事件
ajax.onreadystatechange=function(){
5.状态判断
if(ajax.readyState==4 &&ajax.status==200){
console.log(ajax.responseText);
}
}
readyState:
五个值0-4 相当于上述五个步骤
status:http状态码
2xx:成功 4xx:客户端错误 5xx:服务器端错误

jQuery中的异步请求

优缺点 格式

优点:异步请求 方便
缺点:不能返回

$.ajax({
	url:'',
	type:'',
	success:function(){
	}
	dataType:'jsonp',//解决跨域
	error:function(){}
})

跨域

同源策略:同域名 同端口 同协议
当以上三个有一个不满足时就发生跨域
同域名: www.baidu.com-baidu主域名 www子域名
同端口: 127.0.0.1:5500-5500端口号
同协议: http://… https://…

jsonp解决跨域的原理: 在脚本里写了将跨域地址写入src