jQuery事件绑定

jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用

在1.7之前的版本中jQuery处理事件有多个方法， ( jquery live bind degelate)作用各不相同，后来统一的使用on/off方法

• 简单解释：on用来绑定事件，off用来解绑事件
• 写法: .on( events [,selector ] [,data ], handler(eventObject) )
  参数含义
• events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
• selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
• data：当一个事件被触发时，要传递给事件处理函数的event.data
• handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
  几个例子

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

$('.box li').on('click', function(){
    console.log(1)
    var str = $(this).text()
    $('#wrap').text(str)
 })
//等同于
$('.box>ul>li').click(function(){
    console.log(2)
    var str = $(this).text()
    $('#wrap').text(str)
 })
//也可以这样写
$('.box li').on('click.hello', function(){
    console.log(3)
    var str = $(this).text()
    $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')
//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
    var value = $('#ipt').val()
    $('.box>ul').append('<li>'+value+'</li>')
})
//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
    var str = $(this).text()
    $('#wrap').text(str)
})
//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
    //do something
}
})
//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

除了on方法之外，jQuery还提供了其他一些方法来处理事件

• .one( events [, selector ] [, data ], handler(eventObject) )
• 与on方法用法相同，不同的一点是one只会触发一次
• .off( events [, selector ] [, handler ] )
• 移除一个事件处理函数
• $('.box li').off('click')
• .trigger( eventType [, extraParameters ] )
• 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为,用代码来替代鼠标行为

$('#foo').on('click', function() {
    console.log($(this).text())
    });
$('#foo').trigger('click')

应用jQuery的一个小demo

代码地址
预览地址

jQuery的常用函数

1. .show()

• 写法：.show([during][,easing][,complete])
• 作用：用于显示元素，用法和hide类似

2. .hide()

• 写法：.hide([duration][,easing][,complete])
• 作用：用于隐藏元素，没有参数的时候等同于直接设置display属性
  几个例子

$('.target').hide(); //等同于$('.target').css('display','none')
$('#book').hide(300,function(){alert('Animation complete.')})
$('#book').hide(300,'linear',function(){alert('Animation complete.')})

3. .slideUp

• 写法：.slideUp([during][,easing][,complete])
• 作用：用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分划上去，当一个隐藏动画后，高度达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局。
• 例子：$('#book').slideUp('slow',function(){ //Animation complete})

4. .slideDown

• 写法：.slideDown([duration][,easing][,complete])
• 作用：用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方法
• 例子：$('#book').slideDown('slow',function(){ // Animation complete})

5. .slideToggle

• 写法：.slideToggle([duration][,easing][,complete])
• 作用：用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jquery的数据缓存中，所以display可以方便以后可以恢复到其初始值
• 如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inine。当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局
  $('#clickme').click(function(){$('#book').slideToggle('slow', function(){// Animation complete})})

6. .fadeIn

• 写法：.fadeIn([duration][,easing][,complete])
• 作用：通过淡入的方式显示匹配元素，参数含义和上面相同
• 例子：$('#book').fadeIn('slow',function(){// Animation complete})

7. .fadeOut

• 写法：.fadeOut([duration][,easing][,complete])
• 作用：通过淡出的方式隐藏匹配元素
• 例子：$('#book').fadeOut('slow', function{ // Animation complete})

8. .animate

• 写法：.animate(properties [,duration] [,easing] [,complete] )
• 补充：properties是一个css属性和值的对象，动画将根据这组对象移动
• 例子：$(‘#clickme’).click(function(){ $('#book').animate({ opacity:0.25, left: '+=50' , heigt:'toggle'}, 5000, function(){ //Animation complete}) })

jQuery几个重要函数

1. $.ajax

• 写法 jQuery.ajax(url,[,setting])/jQuery.ajax([setting])
  一个小例子
  get.png
  如上我们就发送了一个get请求
  方法提供了几个常用的setting
• async：默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步请求，请将此选项设置为 false
• beforeSend：请求发送前的回调函数，用来修改请求发送前jqXHR对象，此功能用来设置自定义 HTTP 头信息，等等。该jqXHR和设置对象作为参数传递
• cache：如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"
• context：这个对象用于设置Ajax相关回调函数的上下文。 默认情况下，这个上下文是一个ajax请求使用的参数设置对象
• data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面，POST请求作为表单数据
• headers：一个额外的{键:值}对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖
• method：HTTP 请求方法 (比如："POST", "GET ", "PUT"，1.9之前使用“type”)
  一个post请求
  post.png

2. $.get

• 写法：jQuery.get(url, [,data][,success][,dataType])
• 作用：简化写法，专门处理get请求
  几个例子

$.get('test.php')
$.get('test.php',{name:'John',time:'2pm'})
$.get('test.php' function(data){alert("Data Loaded: " + data)})
$.get("test.cgi", {name: 'John' , time: '2pm'}).done(function(data){alert("data loaded: " + data)})

3. $.getJSON

• 写法 jQuery.getJSON(url [,data] [,success(data, textStatus, jqXHR)] )
• 作用：使用一个HTTP GET请求从服务器加载JSON编码的数据，这是一个Ajax函数的缩写

• 该函数是简写的 Ajax 函数，等价于：

  
  1111.png
• 发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。
• 传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析
• 一个例子：从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name);});