alert(window.location.pathname)

 alert(window.location.href);

alert(window.location.port)

alert(window.location.protocol)

alert(window.location.hash)

alert(window.location.host)

alert(window.location.search)

var url = window.location.search;

// alert(url.length);

// alert(url.lastIndexOf('='));

var loc = url.substring(url.lastIndexOf('=')+1, url.length);

1. 要准备好歌词数据，也就是我们常见到的动态歌词数据
2. 将歌词数据（一般为字符串）整理成我们可以用的数据格式，如数组对象
3. 写一个方法，每调用一次，就会将对一个的那句歌词展示或者高亮
4. 和音乐资源进行时间绑定，实时进行歌词数据的刷新
5. 写一个漂亮的样式，把你的歌词效果展现到用户面前

[ti:模特] 

[ar:李荣浩] 

[00:02.51] 李荣浩 - 模特

[00:07.56] 词：周耀辉

[00:11.56] 曲：李荣浩

[00:30.71] 穿华丽的服装 为原始的渴望而站着

[00:38.04] 用完美的表情 为脆弱的城市而撑着

[00:45.37] 我冷漠的接受 你焦急的等待也困着

[00:52.82] 像无数生存在橱窗里的模特

[01:00.38] 除了灯以外 我还能看见什么

[01:04.26] 除了光以外 我还能要求什么

[01:07.96] 除了你以外 还能倚赖哪一个

[01:15.18] 在千里以外 在呼喊的是什么

[01:19.03] 在百年以后 想回忆的是什么

[01:22.77] 在离开以前 能否再见那一刻

[01:28.47] 记得 你的眼睛将会亮着

[01:33.79] 我的手臂将会挥着

[01:37.53] 谁说世界早已没有选择

[01:43.97] 趁着我会喜怒你会哀乐

[01:48.53] 唱几分钟情歌

[01:51.34] 没什么 至少证明我们还活着

[01:59.28] 像单纯的蝴蝶 为玫瑰的甜美而飞着

[02:06.66] 像顽皮的小猫 为明天的好奇而睡着

[02:14.05] 是混乱的时代 是透明的监狱也觉得

[02:21.38] 是不能继续在橱窗里做模特

[02:29.24] 除了风以外 我还能听到什么

[02:33.06] 除了尘以外 我还能拒绝什么

[02:36.69] 除了你以外 还能倚赖哪一个

[02:43.78] 在千里以外 在呼喊的是什么

[02:47.64] 在百年以后 想回忆的是什么

[02:51.36] 在离开以前 能否再见那一刻

[02:57.00] 记得 你的眼睛将会亮着

[03:02.42] 我的手臂将会挥着

[03:06.01] 谁说世界早已没有选择

[03:12.60] 趁着 我会喜怒你会哀乐

[03:17.08] 唱几分钟情歌

[03:19.83] 没什么 至少证明我们还活着

[03:52.38] 记得 你的眼睛将会亮着

[03:57.88] 我的手臂将会挥着

[04:01.38] 谁说世界早已没有选择

[04:08.03] 趁着 我会喜怒你会哀乐

[04:12.53] 唱几分钟情歌

[04:15.28] 没什么 至少证明我们还活着

//解析设置歌词

musicValue._setLrcData = function(lrc) {

    medisArray = ;

    var medises = lrc.split("\n");

    $.each(medises, function (i, item) {

        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));

        medisArray.push({

            t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),

            c: item.substring(item.indexOf("]") + 1, item.length)

        });

    });

    var ul = $("#lrc");

    ul.html('');

    $.each(medisArray, function (i, item) {

        var li = $("<li>");

        li.html(item.c);

        ul.append(li);

    });

    musicLrc = medisArray;





}

//根据传入的行数，装填歌词

function linehight(lineno) {



    var nowline = ul.find("li").get(topNum + lineno);



    //装填歌词

    var lrcLine = $("#lrcLine");

    if($(nowline).html() == ''){

        lrcLine.find('li[class=current]').html('暂无歌词请您欣赏').fadeIn('50');

        lrcLine.find('li[class=next]').html('凯冰音乐 · 听我想听的').fadeIn('800');

    }



    if(lrcLine.find('li[class=current]').html() != $(nowline).html()){

        lrcLine.find('li[class=current]').fadeOut();

        lrcLine.find('li[class=current]').html($(nowline).html()).fadeIn('50');

        lrcLine.find('li[class=next]').html($(nowline).next('li').html()).fadeIn('800');

    }

}

//歌词滚动

musicValue._moveLrc = function(audio){



    var music_ele = audio || '';

    lineNo = 0;

    music_ele.ontimeupdate = function(){



        if(isNaN(parseFloat(musicLrc[lineNo].t))){

            linehight(lineNo);

            lineNo++;

        }



        if (lineNo == musicLrc.length - 1 && music_ele.currentTime.toFixed(3) >= parseFloat(musicLrc[lineNo].t)) {

            linehight(lineNo);

        }



        if (parseFloat(musicLrc[lineNo].t) <= music_ele.currentTime.toFixed(3) &&

            music_ele.currentTime.toFixed(3) <= parseFloat(musicLrc[lineNo + 1].t)) {

            linehight(lineNo);

            lineNo++;

        }



        //兼容下快歌

        if (parseFloat(musicLrc[lineNo].t) <= music_ele.currentTime.toFixed(3) &&

            music_ele.currentTime.toFixed(3) <= parseFloat(musicLrc[lineNo + 2].t)) {

            linehight(++lineNo);

            lineNo++;

        }

    };

}

.lrcLine{

  list-style: none;

  width: 456px;

  height: 55px;

  text-align: center;

  position: fixed;

  z-index: 500;

  line-height: 25px;

  color: #fff;

  bottom: 45%;

  left: 50%;

  margin-left: -228px;

  font-family: "Microsoft YaHei";

  font-size: 15px;

}

.lrcLine .current{

  color: #f0c040;

}

1. 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
2. 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

<a href="#" id="link1" action="delete">删除</a>

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

$("#chk1").prop("checked") == false

$("#chk2").prop("checked") == true

$("#chk1").attr("checked") == undefined

$("#chk2").attr("checked") == "checked"

• length：历史堆栈中的记录数。
• back()：返回上一页。
• forward()：前进到下一页。
• go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

• pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件（window.onpopstate）时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。
• replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。

<?php

error_reporting(false);



$num = $_GET['num'];



if(array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'){

    if($num == 1) {

?>

        <div class="imgwrap">

            <img src="./images/1.jpg" />

        </div>

        <span><a href="num=2" class="next">下一张>></a></span>

<?php

    } else if ($num == 2) {

?>

        <div class="imgwrap">

            <img src="./images/2.jpg" />

        </div>

        <span><a href="num=1" class="previous"><<上一张</a>

        <a href="num=3" class="next">下一张>></a></span>

<?php

    } else {

?>

        <div class="imgwrap">

            <img src="./images/3.jpg" />

        </div>

        <span><a href="num=2" class="previous"><<上一张</a></span>

<?php

    }

}

?>

$.ajax({

    "url": "./interface.php",

    "data": {

        "num": num

    },

    "dataType": "html",

    "headers": {

        "X_PJAX": true

    }

});

Accept:text/html, */*; q=0.01

Accept-Encoding:gzip,deflate,sdch

Connection:keep-alive

Host:qianduannotes.duapp.com

User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36

X-Requested-With:XMLHttpRequest

X_PJAX:true

function is_pjax(){

    return array_key_exists('HTTP_X_PJAX', $_SERVER) 

            && $_SERVER['HTTP_X_PJAX'] === 'true';

}

• welefen封装的库，对jquery、qwrap和kissy都做了封装，github地址
• Yahoo团队 PJAX地址

1. 如果浏览器不支持pushState接口函数，那就只能退化为ajax或者使用hash bang了~
2. 本地环境下使用的话，浏览器会报错：`Uncaught SecurityError: A history state object with URL file:///E:/baidu_app/demo/PJAX/pic-2' cannot be created in a document with origin 'null'. ，所以如果你要测试的话，请把代码丢到服务器上！
3. 为了得到更好的体验，PJAX经常配合localStorage来使用，把请求到的内容缓存到本地，再一次请求的时候先从本地查看。如果你的内容是动态变化的，缓存的时候加一个缓存时间，方便更新缓存。
4. 还有一个容易忽略的东西是统计，使用PJAX只会局部刷新页面，如果忽略了对统计函数的更新，那就会让你失去很多数据。