jQuery实践经验与技巧
-
Upload
fangdeng -
Category
Technology
-
view
799 -
download
6
Transcript of jQuery实践经验与技巧
![Page 1: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/1.jpg)
jQuery 实战经验与技巧(一)
![Page 2: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/2.jpg)
jQuery 对象 ( 选择器 )
jQuery(),jQuery(document),$(),$(docoment),$(‘div’),$(‘<div />’),$(‘#id .cls’)……
![Page 3: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/3.jpg)
成员
{ 0: HTMLElement,1: HTMLElement,2: HTMLElement,……length: 12,add:function(){},addClass:function(){},after: function(){},……}
![Page 4: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/4.jpg)
链式操作
add(expr,[context])$(‘p’).add(‘span’).add(‘<a></a>’).addClass(‘hide’);
![Page 5: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/5.jpg)
andSelf()对于筛选或查找后的元素,加入先前所选元素。$("div").find("p").andSelf().addClass("border");
![Page 6: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/6.jpg)
<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()
![Page 7: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/7.jpg)
$(‘#userinfo’).find(‘.name’).html(‘Jquery’).end().find(‘. gender’).html(‘woman’).end().find(‘.size’).html(’80k’).end().find(‘. comments’).html(‘jquery’).end().show();
![Page 8: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/8.jpg)
数据缓存
$$(‘.drag’)[0].setAttribute(‘data-title’, ’abc’);$(‘.drag’).data(‘title’, ’abc’).data(‘obj’, {a:1, b2});
data(name[,value]), removeData(name)这个函数不用建立一个新的 expando ,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
$(‘.drag’).removeData(‘title’);
![Page 9: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/9.jpg)
事件
$(document).ready(function(){ // 在这里写你的代码 ...});$(function() { // 在这里写你的代码 ...}); $(init);function init(){console.log(‘loaded’)}
![Page 10: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/10.jpg)
click(fn),mouseover(fn),focus(fn),change(fn),keydown(fn),focusin(fn),focusout(fn),mouseenter(fn), 示例mouseleave(fn)……
jQuery 自定义事件
![Page 11: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/11.jpg)
事件处理
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(){})……
![Page 12: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/12.jpg)
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’]);
![Page 13: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/13.jpg)
triggerHandler(type[,data])1 、他不会触发浏览器默认事件。2 、只触发 jQuery 对象集合中第一个元素的事件处理函数。3 、这个方法的返回的是事件处理函数的返回值,而不是据有可链性的 jQuery 对象。此外,如果最开始的 jQuery 对象集合为空,则这个方法返回 undefined 。
![Page 14: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/14.jpg)
命名空间事件
什么是命名空间事件?
传统事件: .bind(‘click’, function(){});命名空间事件: .bind(‘click.namespace’, function(){});
场景一:一个节点上绑定了多个事件逻辑
DOM 操作
DOM 操作
AJAX 请求
……click
![Page 15: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/15.jpg)
$(‘a.btn’).bind(‘click’, DOMchange).bind(‘click’, DOMchange2).bind(‘click.ajax’, ajaxAdmin);if(condition){$(‘a.btn’).unbind(‘click.ajax’);}
![Page 16: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/16.jpg)
你还可以:$(‘a.btn’).trigger(‘click!’);也可以:$(‘a.btn’).trigger(‘click.ajax’);
![Page 17: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/17.jpg)
事件委派
live(type, fn), die(type)给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如 click事件)。也能绑定自定义事件。
<ul> <li></li><li></li><li></li>……</ul> 插入 <li></li>$(‘li’).live(‘click’, function(){});$(‘li’).die(‘click’);
![Page 18: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/18.jpg)
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…’);})
![Page 19: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/19.jpg)
jQuery 事件对象
jQuery 对事件对象进行了规范
为什么要规范事件对象?
![Page 20: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/20.jpg)
属性 IE FF
type
target
currentTarget
keyCode
which
pageX, pageY
stopPropagation
preventDefaut
stopPropagation
screenX, screenY
clientX, clientY
offsetX, offsetY
layerX, layerY
![Page 21: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/21.jpg)
$(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;});
![Page 22: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/22.jpg)
jQuery 事件对象共 49 个成员原始事件对象保存在 originalEvent 中
![Page 23: jQuery实践经验与技巧](https://reader033.fdocuments.net/reader033/viewer/2022061609/5568b8d0d8b42a7c7d8b4850/html5/thumbnails/23.jpg)
F&Q其他 JS 框架中优秀的方法在 jQuery 中有吗?
你还希望了解 jQuery 中哪些方法?
……