前端学习总结 之 jq 3

-----------------------------事件冒泡----------------------


父子级标签 都绑定命令 (事件属性相同)
通过 return false 来阻止 (阻止默认行为  /  阻止表单提交 合并写法)


通过 event.stopPropagation() 来阻止(不常用)


----------------------------事件委托-----------------------


事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，
事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。


// $('ul').delegate(事件发生在哪，事件属性，匿名函数)
// 作用：1、提高代码执行效率；2、给未来元素绑定命令
$('ul').delegate('li', 'click', function () {
    alert($(this).html())
})


// 单纯的给未来元素绑定命令：$('li').on(事件属性，匿名函数)


----------------------------节点操作-----------------------


节点  ==标签 == 标记 == 元素
DOM : 网页文档的根/根标签 -- html 标签
追加节点: 同级追加 和子集追加 (前面 后面)
步骤 : 1, 声明变量保存节点数据: 2,使用追加函数追加节点


ul子级追加(ul>li)
结尾追加
$li.appendTo($('ul'))     
$('ul').append($li)
开头追加
$li.prependTo($('ul'))   
$('ul').prepend($li)


剪切赋值到之前
$div.insertAfter($('ul'))  
$('ul').after($div)


剪切复制到之后         
$div.insertBefore($('ul'))   
$('ul').before($div)


删除节点
$('ul').remove()
$('ul').empty()


----------------------------------------ajax-------------
异步, 局部刷新(无刷新)


$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步


-------------------新的写法(推荐)：


$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});


---------------$.ajax的简写方式


$.ajax按照请求方式可以简写成$.get或者$.post方式


$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});


$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});


----------------jsonp接口(跨域请求)
开发jsonp的接口，需要获取请求地址中的参数，也就是'callback'键对应的值，
然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，
这个键值对是由$.ajax函数自动产生的。


比如：'callback'键对应的值一般是这样的：jQuery1124018787969015631711_1522330257607，所以：
一般接口返回的数据形式：'{"iNum":12,'sTr':'abc'}';
jsonp返回的数据形式：'jQuery1124018787969015631711_1522330257607({"iNum":12,"sTr":"abc"})';