jquery入门(3）

4.jQuery中的事件绑定

4.1.事件绑定

on方法绑定

$('#box').on('click',function(){
    alert(1);
})

直接绑定

$("#box").click(function(){
     alert(1）
})

总结：事件里面的this是原生的this，如果要使用jquery方法需要 $(this)

off删除事件

$("#box").off("blur");  //删除事件

4.2.事件委托

$("ul").delegate("li","click",function(){
     $(this).css("background","#ccc");
})

4.3.事件冒泡

事件冒泡就是事件会从元素内部往外传播的一种现象，事件冒泡的好处就是可以节约代码，比如说，有个需求是，点击某个按钮btn1 的时候显示一个div，点击其他元素的时候隐藏div，这个时候，如果没有冒泡机制，要实现这个需求就要给除了btn1 以外的所有元素都绑定上点击事件，如果当前页面有成千上万个元素，那么事件就会被重复绑定成千上万次，如果有了事件冒泡机制就可以把事件绑定给document，通过冒泡机制，点击其他的元素都会触发document身上的点击事件，从而节约代码，此时，只需要把btn1身上的点击事件阻止冒泡就行了

$("#btn1").on("click",function(ev){
      ev.stopPropagation();
})

4.4.阻止浏览器默认行为

浏览器会自带一些默认行为，比如说右键菜单，表单提交等，如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉

$("#btn1").on("click",function(ev){
      ev.preventDefault();
})

总结： 在jquery中可以直接return false ；return false 具有阻止浏览器默认行为和阻止冒泡的功能

5.jQuery中的ajax

5.1 底层方法-ajax

$.ajax() 执行一个异步的ajax请求

$.ajax({
    url:'http://www.wp.com/getData.php',       //跨域到http://www.wp.com，另，http://test.com也算跨域
    type:'GET',                                //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
    dataType:'jsonp',                          //指定为jsonp类型
    data:{"name":"Zjmainstay"},                //数据参数
    jsonp:'callback',                          //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值
    jsonpCallback:'getName',                   //回调函数名
    success:function(result){                  //成功执行处理，对应后台返回的getName(data)方法。
        $("#myData").html('1、My name is '+result.name+'.I\'m '+result.age+' years old.<br />');
    },
    error:function(msg){
        alert(msg.toSource());                 //执行错误
    }
});

5.2.$.get 方法

//语法：$.get(URL,data,function(data,status,xhr),dataType);
$.get("test.php", function(data){
   alert("Data: " + data);
});

5.3.$.post方法

//语法：$(selector).post(URL,data,function(data,status,xhr),dataType)
$("input").keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.html",{suggest:txt},function(result){
        $("span").html(result);
    });
});

螺钉课堂视频课程地址：http://edu.nodeing.com