jquery（四：jquery的事件、Ajax）

Jquery事件

jQuery注册事件

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

• 简单事件绑定-----click（）---不支持同时注册，也不支持动态注册，新创建的原来有的对象的事件没有动态生成对应的事件
  
• bind事件绑定的方式注册----支持同时注册---但是不支持同时注册
  1. $('#div').bind({
  2.     mouseenter:function(){
  3.         console.log('鼠标移入事件')；
  4.     },
  5.     click:function(){
  6.         console.log('鼠标点击')；
  7.     }
  8. })

  复制代码
• delegate注册事件---同时注册--动态注册（本质是：事件冒泡）
  缺点是：只能注册委托事件，注册的事件太多了
  1. $('body').delegate('div',{
  2.         mouseenter:function(){
  3.         console.log('鼠标移入事件')；
  4.     },
  5.     click:function(){
  6.         console.log('鼠标点击')；
  7.     }
  8. });

  复制代码
• on注册事件
  1.简单注册
  给selecor绑定事件，并且由自己触发---不支持动态注册
  1. $(selsctor).on('click',function(){})

  复制代码
• 2.委托注册---支持动态注册  委托给父类
  1. $(selector),on('click','span',function(){});

  复制代码
  1. $('body').on('click','div,span',function(){
  2.     console.log('点击事件');
  3. });

  复制代码

事件解绑

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

  复制代码
• undelegate()
  1. $(selector).undelegate();//解绑所有
  2. $(selector).undelegate('click')

  复制代码
• off()
  1. $(selector).off()//解绑所有的事件
  2. $(selector).off('click')

  复制代码

事件触发

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

1. $('#one').on('click',function(){
2.     console.log("点击事件");
3. });
4. $('#btn1').on('click',function(){
5.     i++;
6.     if(i==3){
7.        // $('#one').click();
8.         $('#one').trigger('click');
9.     }
10. })

复制代码

实现自定义事件

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

复制代码

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

复制代码

案例

动态删除的事件注册

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

复制代码

jQuery的事件对象：

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

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

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

复制代码

• 阻止事件冒泡：
  1. e.stopPropagation()

  复制代码
• 阻止默认行为，阻止a便签的跳转
  1. e.preventDefault();

  复制代码
• 既能阻止事件冒泡，又能阻止事件行为
  1. return false;

  复制代码
• 获得键盘按键
  e.keycode
  1. $(doucument).on('keydown',function(e){
  2.    console.log(e.keycode);
  3. });

  复制代码

jQuery的链式编程

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

  复制代码
  这里的返回值是数值，就不能调用end（）方法
  

each()

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

• index:索引号
  
• element：jQuery对象
  

1. $(function(){
2.    var lis =$('#ul').children();
3.    lis.each(function(index,element){
4.        $(element).css('opacity',index/10);
5.    });
6. });

复制代码

多库共存

1.查看jQuery文件的版本

1. jQuery.fn.jquery
2. jQuery.prototype.jquery
3. $.fn.jquery
4. $.prototype.jquery

复制代码

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

• 谁在后面就是谁的$
  

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

复制代码

1. (function(window){
2.     window.$={
3.         name:'黑马程序员'
4.     };
5. }(window));

复制代码

能释放$的控制权实现的多库共存
ready预加载事件

ready()类似于onload（）事件
ready（）可以写多个，按顺序执行

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

复制代码

案例

五角星

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

1. $(function(){
2.     //记录实心五角星
3.     var sw='★';
4.     var ss='☆';
5.    $('#ul1').on('mouseenter',function(){
6.       //进入
7.        $(this).text(sw).prevAll.text(sw)；
8.        $(this).nextAll().text(ss);
9.    }).on('mouseleave',function(){
10.        //离开
11.        $('#ul>li').text(ss);
12.        $('#ul>li[clickss]').text('sw').prevAll('sw');
13.    }).on('click',function(){
14.       //点击
15.        $(this).attr('clickss','current').siblings().removeAttr('clickss');
16.    });
17. });

复制代码

jQuery的插件

1. [/code][code]$(function(){
2. //animate动画不能改变背景色
3.    $('#btn').on('click',function(){
4.        $('div').animate({
5.            left:800,
6.            width:100,
7.            height:100,
8.            backgrongdColor:'green'
9.        },2000);
10.    }) ;
11. });

复制代码

jQuery插件库：
。。。。
jQueryUI
可以自己写jQuery的插件
jQuery的Ajax

$.ajax
jQuery的调用ajax方法：
1.$ajax({})

格式：$ajax({})
参数：

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

get请求

1. <!DOCTYPE html>
2. <html>
3.         <head>
4.                 <meta charset="utf-8" />
5.                 <title></title>
6.         </head>
7.         <body>
8.                
9.         </body>
10. </html>

复制代码

2.$.get

这是一个简单的GET请求功能以及取代复杂的$.ajax
请求成功时可以调用回调函数，如果需要在出错时执行函数，请用$.ajax

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

复制代码

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

复制代码

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

复制代码

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

复制代码

3.$.post

这是一个简单的POST请求功能以及取代复杂的$.ajax
请求成功时可以调用回调函数，如果需要在出错时执行函数，请用$.ajax

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

复制代码

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

复制代码

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

复制代码

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

复制代码

4.getJSON

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

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！