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