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

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

//请求就送文件，忽略返回值

$.post('js/cuisine_area.json');

//请求json文件，传递参数，忽略返回值

$.post('js/cuisine_area.json',{name:"tom",age:100});

//请求json文件，拿到返回值，请求成功后可以拿到返回值

$.post('js/cuisine_area.json',function(data){

    console.log(data);

});

//请求json文件，传递参数，拿到返回值

$.post('js/cuisine_area.json',{name:"tom",age:"100"},function(data){

    console.log(data);

});

4.getJSON

getJSON方式要求返回的数据格式是json格式（json）字符串只识别json

//请求json文件，传递参数，拿到返回值

$.getJSON('js/cuisine_area.json',{name:"tom",age:"100"},function(data){

    console.log(data);

});