六、jQuery-Ajax
(1)jQuery中发送ajax请求
jQuery中发送ajax请求简直是,轻松方便,直接上代码把
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
//发送ajax请求文件并输出内容
window.onload=function(){
$.ajax({
type:'get',
url:'./person.json',
//如果发送请求的时候想带一个参数
data:{
name:'黄忠'
},//会自动将data连接到url上
success:function(resp){
alert(resp.hobby);
},
error:function(){
}
})
}
</script>
</head>
<body>
</body>
</html>
data中的数据会跟在url后面 就像这样:
上图中json?name后跟的就是,咱们给他解码成汉字,也确实是黄忠
(2).jQuery的回调地狱解决
有一个done函数和fail函数,分别跟promise的then与catch差不多,用法应该也是一样的,具体可以看我上一篇写ajax的,注一个小例子:
$.ajax({url:'./api1'}).done(function(){
return $.ajax({url:'./api2'})
}).done(function(){
return $.ajax({url:'./api3'})
}).done(function(){
console.log("调用结束")
})
【注】:如果方法是get可以省略不写
七、jQuery事件
jQuery事件比较简单,直接看代码就可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp</title>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
// $('li').on('mouseover',function(){
// $(this).css('background','red');
// }).on('mouseout',function(){
// $(this).css('background','green');
// })
// //off(事件名称,回调函数)
// $('li:eq(3)').off('mouseover');
// $('<li>new</li>').appendTo('ul');
//上面新添加的li不会被绑定事件
/*********jQuery中的事件代理**********/
$('ul').on('mouseover','li:even',function(){
$(this).css('background','red');
}).on('mouseout','li:even',function(){
$(this).css('background','green');
})
$('<li>new</li>').appendTo('ul');
//这样就可以使新添加的li也有事件
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
八、节点操作
- 节点的创建
【方法】:$(代表元素的片段),如:$(’<p>新元素</p>’) - 节点的删除
【方法1】$().remove()
【作用】:删除节点
【方法2】:empty()
【作用】:删除节点里的内容,不删除节点本身 - 把节点加到dom树上
- 插入指定元素孩子节点末尾
【方法1】:append()
【用法】:$(选中元素).append(插入内容)
【方法2】:appendTo()
【用法】:$(插入内容).appendTo(选中元素)
【作用】:在被选元素的结尾插入指定内容 - 插入指定元素孩子节点开头
【方法1】:prepend()
【方法2】:prependTo() - 插入选定元素之后
【方法1】:after()
【方法2】:insertafter()
测试代码:
节点<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jiedian</title>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var $el=$('<div><h1>新的</h1></div>');
//$('body').append($el);
$el.appendTo('body')
var $newFirst=$('<li>0</li>')
//$('ul').propend($newFirst);
$newFirst.prependTo('ul');
$('li:eq(3)').after('<li>3.5</li>');
$('<li>4.5</li>').insertAfter('li:eq(5)');
$('button').click(function(){
//$('li:last').remove();
$('li:last').empty();
})
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button type="button">删除</button>
</body>
</html>
九、在jQuery中自定义插件
在开发时有很多时候代码是需要重复利用的,这时候把他做成jQuery插件用起来就非常方便,
四个要注意的点
- jQuery插件,定义在jQuery.fn的基础上的
- 要解决命名冲突,即在$符被其他库占用的时候,如何顺利的定义自己的插件而不受影响
- 使用循环来遍历的处理每一个元素,才能使每一个事件都能被绑定到,前面也说了jQuery其实是一个伪数组
- 为了链式调用,要在函数中,将jQuery返回(this)
【实例】:选取到页面上的某些元素,并且将这些元素的背景色设置为随机色,具体的应用都注释到代码里了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插件</title>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
(function($){
//2.使用一个立即执行函数来解决命名冲突,即使$被占用,但是在这个函数里$仍然指向jquery
$.fn.extend({//1.在fn定义
randomColor:function(){
function random(){//随机颜色
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return 'rgb('+r+','+g+','+b+')';
}
this.each(function(index){
//this 此时的this指向的是jQuery中的每一个元素
$(this).css({
backgroundColor:random()
})
})
return this;//this指向的就是我们通过选择器选择到的所有元素组成的伪数组,即jQuery对象
}
})
})(jQuery);
$('div').randomColor();
}
</script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #000000;
}
</style>
</head>
<body>
<div >
</div>
<div >
</div>
</body>
</html>
写出来发现获取不到div元素整个人都蒙了,思考了半天发现是没有写window.onload…哇
十、实例,放大镜插件
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="jQuery.magnifier.css"/>
<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="./jQuery.magnifier.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
$('.magnifier').magnifier();
}
</script>
</head>
<body>
<div id=""class="magnifier">
<div class="left">
<img src="../img/img%20(1).jpg" >
<div class="float"></div>
<div class="mask"></div>
</div>
<div class="right">
</div>
</div>
</body>
</html>
css:
.magnifier .left{
width: 250px;
height: 190px;
float: left;
}
.magnifier .left img{
width: 250px;
height: 190px;
}
.magnifier .left .mask{
width: 250px;
height: 190px;
position: absolute;
left: 0;
top: 0;
background-color: #000000;
opacity: 0;
}
.magnifier .float{
width: 50px;
height: 50px;
background: hotpink;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
display: none;
}
.magnifier .right{
width: 200px;
height: 200px;
background-image: url('../img/img%20(1).jpg');
float:left;
margin-left:50px ;
display: none;
}
jquery插件:
(function($){
$.fn.extend({
magnifier:function(){
this.each(function(){
var that=this;
$('.left',this).mousemove(function(evt){
var x=evt.offsetX;
var y=evt.offsetY;
var float=$('.float',this);
x=x-float.width()/2;
y=y-float.height()/2;
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>$(this).width()-float.width()){
x=$(this).width()-float.width()
}
if(y>$(this).height()-float.height()){
y=$(this).height()-float.height()
}
float.css({
left:x,
top:y
});
$('.right',that).css({
backgroundPosition:x*-4+'px '+y*-4+'px'
}
)
}).mouseover(function(){
$('.left .float, .right',that).show();
}).mouseout(function(){
$('.left .float, .right',that).hide();
})
})
}
})
})(jQuery)