jquery实践经验与技巧
TRANSCRIPT
jQuery 实战经验与技巧（一）
jQuery 对象 ( 选择器 )
jQuery(),jQuery(document),$(),$(docoment),$(‘div’),$(‘<div />’),$(‘#id .cls’)……
成员
{ 0: HTMLElement,1: HTMLElement,2: HTMLElement,……length: 12,add:function(){},addClass:function(){},after: function(){},……}
链式操作
add(expr,[context])$(‘p’).add(‘span’).add(‘<a></a>’).addClass(‘hide’);
andSelf()对于筛选或查找后的元素，加入先前所选元素。$("div").find("p").andSelf().addClass("border");
<div id=“userinfo”><h3 class=“name”></h3><span class=“gender”></span><p class=“detail”><span class=“size”></span><span class=“comments”></span></p></div>
应用场景：当从后台取得用户信息后填充到页面相应位置并显示
回到最近的一个“破坏性”操作之前，如果之前没有破坏性操作，则返回一个空集。
end()
$(‘#userinfo’).find(‘.name’).html(‘Jquery’).end().find(‘. gender’).html(‘woman’).end().find(‘.size’).html(’80k’).end().find(‘. comments’).html(‘jquery’).end().show();
数据缓存
$$(‘.drag’)[0].setAttribute(‘data-title’, ’abc’);$(‘.drag’).data(‘title’, ’abc’).data(‘obj’, {a:1, b2});
data(name[,value]), removeData(name)这个函数不用建立一个新的 expando ，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。
$(‘.drag’).removeData(‘title’);
事件
$(document).ready(function(){ // 在这里写你的代码 ...});$(function() { // 在这里写你的代码 ...}); $(init);function init(){console.log(‘loaded’)}
click(fn),mouseover(fn),focus(fn),change(fn),keydown(fn),focusin(fn),focusout(fn),mouseenter(fn), 示例mouseleave(fn)……
jQuery 自定义事件
事件处理
bind(), unbind(), one(), trigger(), triggerHandler()$(‘#btn’).unbind(‘click’).bind(‘click’, {a: 1}, function(e){console.log(e.data.a);}).bind({focus: function(){},blur: function(){}}).one(‘mouseover’, function(){});
1 、 bind 方法可以绑定自定义事件 2 、可以向事件处理函数传递参数 3 、更加灵活
$().bind(‘click’, function(){}) 等同 $().click(function(){})$().bind(‘focus’, function(){}) 等同 $().focus(function(){})……
trigger(type[,data])顾名思义：用来触发某类事件
$(‘#btn’).click(function(){console.log(‘Oh, yeah!’);}).trigger(‘click’);$(‘#btn’).bind(‘myEvent’, function(a, b){console.log(a + b)}).trigger(‘myEvent’,[‘Hello’, ’world’]);
triggerHandler(type[,data])1 、他不会触发浏览器默认事件。2 、只触发 jQuery 对象集合中第一个元素的事件处理函数。3 、这个方法的返回的是事件处理函数的返回值，而不是据有可链性的 jQuery 对象。此外，如果最开始的 jQuery 对象集合为空，则这个方法返回 undefined 。
命名空间事件
什么是命名空间事件？
传统事件： .bind(‘click’, function(){});命名空间事件： .bind(‘click.namespace’, function(){});
场景一：一个节点上绑定了多个事件逻辑
DOM 操作
DOM 操作
AJAX 请求
……click
$(‘a.btn’).bind(‘click’, DOMchange).bind(‘click’, DOMchange2).bind(‘click.ajax’, ajaxAdmin);if(condition){$(‘a.btn’).unbind(‘click.ajax’);}
你还可以：$(‘a.btn’).trigger(‘click!’);也可以：$(‘a.btn’).trigger(‘click.ajax’);
事件委派
live(type, fn), die(type)给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如 click事件）。也能绑定自定义事件。
<ul> <li></li><li></li><li></li>……</ul> 插入 <li></li>$(‘li’).live(‘click’, function(){});$(‘li’).die(‘click’);
AJAX 事件
ajaxStart(), ajaxSend(), ajaxErorr(), ajaxSuccess(), ajaxStop(), ajaxComplete()$(‘#msg’).ajaxSend(function(){$(this).html(‘sending…’);}).ajaxComplete(function(){$(this).html(‘complete!’)});
$(‘#msg’).bind(‘ajaxSend’, function(){$(this).html(‘sending…’);})
jQuery 事件对象
jQuery 对事件对象进行了规范
为什么要规范事件对象？
属性 IE FF
type
target
currentTarget
keyCode
which
pageX, pageY
stopPropagation
preventDefaut
stopPropagation
screenX, screenY
clientX, clientY
offsetX, offsetY
layerX, layerY
$(document).keyup(function(e){console.log(e.keyCode);console.log(e.which);})$(document).click(function(e){console.log(e.pageX, e.pageY); console.log(e.target);console.log(e.currentTarget);return false;});
jQuery 事件对象共 49 个成员原始事件对象保存在 originalEvent 中
F&Q其他 JS 框架中优秀的方法在 jQuery 中有吗？
你还希望了解 jQuery 中哪些方法？
……
