jquery 和 html5

Jquery

选择器

• prev>child
• prev+next
• prev~siblings
• [attr^=”val”] : 开头为val的属性
• [attr*=”val”] : 包含val的属性
• [attr~=”val”] : 将attr以空格分隔后，含有val片段的属性
• [attr|=”val”] : 为val或val-开头的属性

事件

• live VS delegate

  • live是对document对象绑定事件，其会在事件冒泡中检查live所绑定的事件，如果匹配就会执行，使得执行live时未存在的元素也能产生效果

  • delegate则不止限于document，另外避免元素筛选的过程

    //此两句效果同
    $('.foo').live('click',function(){});
    $(document).delegate('.foo','click',function(){});

• ajax全局事件

  • 由global属性设置是否关联全局事件

• deferred对象

  • then 按顺序执行异步

    function A() {
        var deferred = $.Deferred();
        setTimeout(function() {
            deferred.resolve("A return!");        
        }, 1000);
        return deferred.promise();
    }
    
    function B(value) {
        var deferred = $.Deferred();
        setTimeout(function() {
            deferred.resolve(value + "B return!");        
        }, 1000);
        return deferred.promise();
    }
    
    function C(value) {
        alert(value+'c return ')
    }

        A().then(B).then(C); 
- when 多个异步执行结束操作

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

html5

location.hash

• 不刷新前提下更改url

  var p = console.log;
  var update = (function () {
      var _n = 0;
      return function (n) {
          _n = isNaN(Number(n))?_n:n ;
        return {
          page:++_n,
          content:'content of page '+_n
        };
      };
  })();
  function go(num){
      //更新内容
      var content=update(num).content;
      //...
      location.hash='#!page='+num;
  }
  
  window.onhashchange=function(){
      var num=location.hash.match(/#!page=([0-9]+)/)[1];
      //更新内容
      var content=update(num).content;
      //...
  
  }
  go(1);
  alert(update(2).content);

  history对象

• pushState & popState

  //保存页面状态
  var data={
    prev_title:document.title,
    prev_url:location.pathname
  };
  history.pushState(data,null,'/search/test');
  //history.state可获取data

----------

    window.onload=updateContent;
    window.onpopstate=updateContent;
    //更新内容时
    function gotoContent(data,title,pathname){
      history.pushstate(data,title,pathname);
      updateContent();
    }
    //更新内容
    function updateContent(){
      //引用url并更新内容

      if(history.state && history.state.pre_url){
        var backLink;//后退链接元素
        backLink.href=history.state.pre_url;
        backLink.textContent=history.state.pre_title||'后退';
        backLink.style.display='';
      }else{
        backLink.style.display='none';
      }
    }

• replaceState 替换历史记录

applicationCache

online&&offline

function indicate(){
  var status=navigator.onLine?'online':'offline';
  console.log(status);
}

document.body.onload=indicate;
document.body.ononline=indicate;
document.body.onoffline=indicate;

indicate();

如有疑问，请文末留言交流或邮件：newbvirgil@gmail.com 本文链接 : https://newbmiao.github.io/2015/02/28/jquery-html5.html