jquery（四：jquery的事件、Ajax）

Jquery事件

jQuery注册事件

1.利用原生的js来为对象注册事件，后面的会把前面的覆盖

2.用jQuery的$()来为对象注册事件，后面不会把前面的覆盖

简单事件绑定—–click（）—不支持同时注册，也不支持动态注册，新创建的原来有的对象的事件没有动态生成对应的事件

bind事件绑定的方式注册—-支持同时注册—但是不支持同时注册

$('#div').bind({
    mouseenter:function(){
        console.log('鼠标移入事件')；
    },
    click:function(){
        console.log('鼠标点击')；
    }
})

delegate注册事件—同时注册–动态注册（本质是：事件冒泡）

缺点是：只能注册委托事件，注册的事件太多了

$('body').delegate('div',{
        mouseenter:function(){
        console.log('鼠标移入事件')；
    },
    click:function(){
        console.log('鼠标点击')；
    }
});

on注册事件

1.简单注册

给selecor绑定事件，并且由自己触发—不支持动态注册
```
$(selsctor).on('click',function(){})
```

2.委托注册—支持动态注册委托给父类

$(selector),on('click','span',function(){});

$('body').on('click','div,span',function(){
    console.log('点击事件');
});

事件解绑

unbind()

$(selector).unbind();//解绑所有
$(selector).unbind('click')

undelegate()

$(selector).undelegate();//解绑所有
$(selector).undelegate('click')

off()

$(selector).off()//解绑所有的事件
$(selector).off('click')

事件触发

trigger():可以实现自定义事件

$('#one').on('click',function(){
    console.log("点击事件");
});
$('#btn1').on('click',function(){
    i++;
    if(i==3){
       // $('#one').click();
        $('#one').trigger('click');
    }
})

实现自定义事件

$('#one').on('hjz',function(){
   console.log('我好帅')； 
});

$('#btn2').on('click',function(){
   var a =confirm('请问我帅么？')；
   if(a){
       $('#one').trigger('hjz');
   }
});

案例

动态删除的事件注册

$('t_body').on('click','.get',function(){
   //jQuery为了注册方便，把this指向.get
    $(this).parent().parent().remove();
});

jQuery的事件对象：

注册一个事件就会生成一个事件对象:

记录这个事件对象的触发时候的一些信息
触发这个事件时候的一些坐标信息
jQuery事件中用参数e来获取
是对原生js事件对象的封装，帮你解决了兼容性
常用的3个坐标：
- pageX：是页面的实际的距离左上角的值
- pageY
- ScreenX:屏幕左上角对可视区的距离
- ScreenY
- ClientX：屏幕的dom里面到可视区的距离

$('#one').on('click',function(e){
   ..... 
});

阻止事件冒泡：
```
e.stopPropagation()
```
阻止默认行为，阻止a便签的跳转
```
e.preventDefault();
```
既能阻止事件冒泡，又能阻止事件行为
```
return false;
```

获得键盘按键

e.keycode

$(doucument).on('keydown',function(e){
   console.log(e.keycode); 
});

jQuery的链式编程

如果调用一个方法，这个方法的返回值是一个jQuery对象，然会就可以继续点出jQuery方法
如果想要的jQuery对象不是我们想要的，那就不要再继续使用链式编程了
end();回到上一个状态
```
$('#div').width().end().height(100);
```
这里的返回值是数值，就不能调用end（）方法

each()

$(selector).each(function(index,element){})//给每个对象执行函数

index:索引号
element：jQuery对象

$(function(){
   var lis =$('#ul').children();
   lis.each(function(index,element){
       $(element).css('opacity',index/10);
   });
});

多库共存

1.查看jQuery文件的版本

jQuery.fn.jquery
jQuery.prototype.jquery
$.fn.jquery
$.prototype.jquery

多个jQuery文件，那个文件后引入会把前面的覆盖掉

谁在后面就是谁的$

var $_=$.noConflict();
写一个自制执行函数
(function($){
    ...写的函数
}($_))

(function(window){
    window.$={
        name:'黑马程序员'
    };
}(window));

能释放$的控制权实现的多库共存

ready预加载事件

ready()类似于onload（）事件

ready（）可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

案例

五角星

prev():上一个兄弟
prevAll():之前所有的兄弟
next():下一个兄弟
nextAll：()之后所有的兄弟

$(function(){
    //记录实心五角星
    var sw='★';
    var ss='☆';
   $('#ul1').on('mouseenter',function(){
      //进入
       $(this).text(sw).prevAll.text(sw)；
       $(this).nextAll().text(ss);
   }).on('mouseleave',function(){
       //离开
       $('#ul>li').text(ss);
       $('#ul>li[clickss]').text('sw').prevAll('sw');
   }).on('click',function(){
      //点击 
       $(this).attr('clickss','current').siblings().removeAttr('clickss');
   });
});

jQuery的插件

<script>jquery.color.js</script>

$(function(){
//animate动画不能改变背景色
   $('#btn').on('click',function(){
       $('div').animate({
           left:800,
           width:100,
           height:100,
           backgrongdColor:'green'
       },2000);
   }) ;
});

jQuery插件库：

。。。。

jQueryUI

可以自己写jQuery的插件

jQuery的Ajax

$.ajax

jQuery的调用ajax方法：

1.$ajax({})

格式：$ajax({})

参数：

type：请求方式GET/POST
url:请求的url
async：是否异步，默认是true异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
	$(function(){
		$.ajax({
			type:"get",
			url:"",
			async:true,
			data:{
				uname:"郝泾钊"
			},
			dataType:"json",//如果是json格式，会自动封装成对象
			success:function(data){
				var obj=JSON.parse(data);//转换字符串成json
				var a =$('<ul></ul>');
				//遍历
				for(var i= 0 ;i<data.length;i++){
					var user=data[i];
					var li ='<li>'+user.username+'</li>';
					a.append(li);
				}
			},
		});
	});
</script>

2.$.get

这是一个简单的GET请求功能以及取代复杂的$.ajax

请求成功时可以调用回调函数，如果需要在出错时执行函数，请用$.ajax

//请求就送文件，忽略返回值
$.get('js/cuisine_area.json');

//请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

//请求json文件，拿到返回值，请求成功后可以拿到返回值
$.get('js/cuisine_area.json',function(data){
    console.log(data);
});

//请求json文件，传递参数，拿到返回值
$.get('js/cuisine_area.json',{name:"tom",age:"100"},function(data){
    console.log(data);
});

3.$.post

这是一个简单的POST请求功能以及取代复杂的$.ajax