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
本文链接 : http://blog.newbmiao.com/2015/02/28/jquery-html5.html