jQuery实践经验与技巧

949 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

jQuery实践经验与技巧

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

×