jQuery的事件,ajax请求、proxy、jsonp跨域以及举例

jQuery事件绑定语法形式

1. $( ).事件类型(事件处理函数)      ------    是jQuery伪数组支持的事件类型

//例子
$('div').click(function(){
    consloe.log('我是div标签对象')
})

2. $( ).on(事件类型 , 事件处理函数)      -------     所有时间类型 都支持

//例子
$('[name=pwd]').on('input' , function(){
    console.log('我是input事件')
})

3. $( ).on(事件类型,{ },事件处理函数)       -------      给事件对象 e 中 data属性 设定传参数据

//例子
$('div').on('click',{name='张三',age=18},function(e){
    // 参数数据在 e 的 data 属性中
    console.log(e.data)
})

4. $( ).on(事件类型,' 条件 ' , 事件处理函数)     ------    给当前标签中符合条件的后代标签添加事件,不能给自己添加   ----  类似于事件委托,只是不能给自己添加事件

//例子
$('div').on('click','p',function(){
        console.log('您点击的是div里面的p标签')
})

5. $( ).on(事件类型,' 条件 ',{ },事件处理函数)    -------     给当前标签中符合条件的后代标签添加事件并传参

//例子
$('div').on('click','p',{name='李四',age=100},function(e){
    console.log('点击了div下的p标签,并在事件对象 e 中传参 内容:', e.data)
})

jQuery的特殊事件

1. $( ).hover( 参数1,参数2)

        参数1        ==          mouseenter 对应的事件处理函数

        参数2        ==          mouseleave 对应的事件处理函数

2. $( ).one( '事件类型' ,事件处理函数)         ==        绑定的事件 只会触发一次

3. $( ).trigger( '事件类型' )        ==       事件的发布  当前标签指定事件类型的所有事件处理函数都会直接执行一次

4.

$(window).ready(事件处理函数)     ==    当HTML页面标签加载完毕之后执行定义的事件处理函数

//例子 (简写)
$(function(){
    console.log('我是HTML页面标签都加载完了才执行的函数')
})

window.addEventerListener( 'load' , 事件处理函数)    ==  (和ready一样)  一般用于确保HTML程序执行结束后触发js程序

5. 阻止事件

        阻止默认事件      ==       事件对象.preventDefault( )

        阻止事件传播      ==       事件对象.stopPropagation( )

        阻止一切             ==       return false

6. 删除事件

        $( ).off( )           ==           删除所有类型的所有事件

        $( ).off( 事件类型 )           ==           删除指定类型的所有事件

        $( ).off( 事件类型,事件处理函数 )           ==           删除指定类型的所有事件 (只能删除函数名称)

注意:$( ).off( 事件类型,事件处理函数 ) 不能删除匿名函数

jQuery的ajax请求

jQuery的函数方法分类

$( ).函数方法( )       jQuery( ).函数方法( )          ==       针对jQuery伪数组的函数方法

$( ).函数方法( )     ==     直接调用的jQuery本身的函数方法 和 jQuery标签对象伪数组没有任何关系

jQuery的ajax

$( ).get(参数1,参数2,参数3,参数4)      ==     专门针对get方式执行的ajax请求

参数1    请求的URL地址

参数2    携带的参数数据  可以是键值对字符串 / 对象

参数3    请求结束执行的回调函数

参数4    响应体数据结果的格式 json

//例子
$.get('http://localhost:8888/test/third','name=张三&age=18',function(){
    console.log('我是get方式 参数字符串 传的')
})

//例子
$.get('http://localhost:8888/test/third',{name:"李四",age=30},function(){
    console.log('我是get方式 参数对象 传的')
})

 $( ).post(参数1,参数2,参数3,参数4)       ==     专门针对post方式  参数内容和get方式一样

 $.ajax( )     ==      get / post / 跨域  都支持

$.ajax({

//常用属性
    url : '请求地址',
    type/method : '请求方式',
    data : '键值对字符串参数' / {对象形式参数},
    dataType : '响应体数据格式',
    success : '请求成功触发的回调函数',

//不常用的属性
    error : '请求失败触发的回调函数',
    async : true,            //默认 异步    false  同步
    timeout : 1000,          //超时设定 单位毫秒
    cache : true / false,    //是否缓存 只对get有用  true(默认缓存),
    jsonp : '后端函数名称',   //设定jsonp跨域方式
    context : 设定 success 和 error 回调函数 this 指向 this 的默认指向是 jQuery,ajax 创建的 ajax 实例化对象
})

说明:除非是带有 PHP程序的文件和proxy服务器代理的程序必须通过服务器运行,其他的都可以直接运行文件   存储在www文件夹中 只是表示 这是需要数据交互的程序

jQuery的proxy跨域

 jQuery ajax 执行 proxy服务器代理跨域请求

  • 只需要配置好服务器
  • 设定 $.ajax( ) 属性url中请求地址属性值是服务器代理名称
  • data中设定好携带参数

jQuery的jsonp跨域

用jQuery的ajax函数

$.ajax({
    url:'请求地址',
    type:'get',
    data:{携带参数},
    dataType:'jsonp',          // 必须要设置为jsonp
    jsonp:'传参函数的键名',     //根据后端程序设定
    success: function(){
        请求成功的回调函数
    }, 
})


版权声明:本文为weixin_49070186原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。