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(){
请求成功的回调函数
},
})