Javascript 将Straight JS转换为JQuery_Javascript_Jquery_Json_Dom_Last.fm

Javascript 将Straight JS转换为JQuery

javascript jquery json dom

Javascript 将Straight JS转换为JQuery,javascript,jquery,json,dom,last.fm,Javascript,Jquery,Json,Dom,Last.fm,我试图从last.fm API中添加一些JSON数据我已经在几个阶段使用了alert（）来验证API是否被正确解析这让我得出结论，getElementById（）.appendChild（）不起作用，下面是我设置的测试页面的URL：所以，从这个简单的JS迁移到我被建议的JQuery是最好的方式，也就是说，我对JQuery一无所知，我的JS知识是基于我所做的一些基本Java 将其转换为工作JQuery有多简单/不简单？我想悬赏，但我不知道怎么做 function calculateDa

我试图从last.fm API中添加一些JSON数据

我已经在几个阶段使用了alert（）来验证API是否被正确解析

这让我得出结论，getElementById（）.appendChild（）不起作用，下面是我设置的测试页面的URL：

所以，从这个简单的JS迁移到我被建议的JQuery是最好的方式，也就是说，我对JQuery一无所知，我的JS知识是基于我所做的一些基本Java

将其转换为工作JQuery有多简单/不简单？我想悬赏，但我不知道怎么做

function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
 else if(secAgo >= -60)
   agoString = "blastin' out now";
 else
   agoString = "soon ;)";
 return agoString;
}

function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
}

function lfmRecentTracks(JSONdata) {

try { 
 var eImg, eLink, eSpan, divTag, eWrapper;
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 for (var i = 0; i < oTracks.length; i++) {
  //insert coverart image
  var spanTag  = document.createElement("span");
  document.body.appendChild(spanTag);
  spanTag.className = "lfmTrackImageCell tab_item";
  if(oTracks[i].image[1]["#text"] != "") {
   eImg = document.createElement("img");
   spanTag.appendChild(eImg);
   eImg.src = oTracks[i].image[1]["#text"];
   eImg.className = "lfmTrackImage";
  }else{
    eImg = document.createElement("img");
    spanTag.appendChild(eImg);
    eImg.src = "http://cdn.last.fm/flatness/icons/res/3/track.png";
    eImg.className = "lfmTrackImageNotFound";
  }
 }
for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
  //insert track link
  spanTag = document.createElement("span");
  spanTag.className = "lfmTrackInfoCell tabslider";
  eLink = document.createElement("a");
  eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
  //alert(truncateName(oTracks[i].name, 25));
  spanTag.appendChild(eLink);
  eLink.href = oTracks[i].url;
  //alert(oTracks[i].url);
  eLink.target = "new";
  eLink.className = "lfmTrackTitle";
  document.body.appendChild(spanTag);

  //insert artist name
  eSpan = document.createElement("span");
  eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) ));
  //alert(truncateName(oTracks[i].artist["#text"], 22));
  eSpan.className = "lfmTrackArtist";
  document.body.appendChild(eSpan);

  //insert date
  eSpan = document.createElement("span");
  spanTag.appendChild(eSpan);
  eSpan.appendChild(document.createTextNode(   (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))  )); 
  //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
  eSpan.className = "lfmTrackDate"; 
  document.body.appendChild(eSpan);
 }  
} catch(e) {}
}

函数CalculateDataGo（秒）{
变量agoString、agoRange、agoScaled；
如果（secAgo>=（agoRange=60*60*24））
agoString=（agoScaled=Math.floor（secAgo/agoRange））+“”+（agoScaled>1？“天”：“天”）+“前”；
else if（secAgo>=（agoRange=60*60））
agoString=（agoScaled=Math.floor（secAgo/agoRange））+“”+（agoScaled>1？“小时”：“小时”）+“小时”；
否则如果（secAgo>=（agoRange=60））
agoString=（agoScaled=Math.floor（secAgo/agoRange））+“”+（agoScaled>1？“分钟”：“分钟”）+“前”；
否则如果（秒数>=-60）
agoString=“立即退出”；
其他的
agoString=“soon；”）；
返回字符串；
}
函数truncateName（名称，l）{
返回name.length>l？name.substr（0，l-2）+“\u2026”：name；
}
函数lfmRecentTracks（JSONdata）{
试试{
var eImg、eLink、eSpan、divTag、eWrapper；
var oTracks=new Array（）.concat（JSONdata.recenttracks.track）；
对于（变量i=0；i


上述代码的唯一工作方式是使用document.body.appendChild（）
我曾尝试在正文底部调用脚本并内联，以允许完全加载DOM，但这些都不起作用
我试图将它们附加到的div是4个不同的div，即在for循环中，每个循环需要引用不同的元素
提前谢谢！
迈尔斯
编辑：
HTML代码：


我在听。。。
测试1
测试2
测试3
测试4



文档。getElementById（）
和appendChild（）
通常在所有主要浏览器中都可以正常工作，除了IE交替使用id
和名称的问题（可能不相关）。jQuery在这里是不必要的。
没有理由这样做。jQuery是JavaScript，但增加了功能。如果在JavaScript中不起作用，那么经过翻译的jQuery也不会起作用。这甚至没有提到翻译它所增加的（不必要的）工作。
应该很简单。如果jQuery擅长一件事（而且有很多），那就是DOM操作（即您正试图做的事情）


第二篇文章将很好地介绍如何在文档中插入HTML。之后，请查看文档中的部分
 而不是
document.body.appendChild( ... );

让您的功能定位要添加内容的
，如下所示：
var targetDiv = document.getElementById('lfmRecentTracks');

（一定要确保页面上只有一个元素具有该“id”值！！而且，为了IE的缘故，也要确保name不是任何东西的“name”属性。）
那么您应该能够做到这一点：
targetDiv.appendChild( whatever );

我不会争论您是否需要jQuery。这不是必须的。但是，如果您确实想使用它，那么使用jQuery执行相同代码的方式如下：
            function calculateDateAgo(secAgo) {
             var agoString, agoRange, agoScaled;
             if(secAgo >= (agoRange = 60*60*24)) 
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
             else if(secAgo >= (agoRange = 60*60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
             else if(secAgo >= (agoRange = 60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
             else if(secAgo >= -60)
               agoString = "blastin' out now";
             else
               agoString = "soon ;)";
             return agoString;
            }

            function truncateName(name, l) {
            return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
            }

            function lfmRecentTracks(JSONdata) {
                try { 
                    var eImg, eLink, eSpan, divTag, eWrapper, date;
                    var oTracks = new Array().concat(JSONdata.recenttracks.track);
                    for (var i = 0; i < oTracks.length; i++) {
                        //insert coverart image
                        var spanTag  = $('<span class="lfmTrackImageCell tab_item"></span>');
                        $("body").append(spanTag);
                        if(oTracks[i].image[1]["#text"] != "") {
                            eImg = $('<img src="'+oTracks[i].image[1]["#text"]+'" class="lfmTrackImage" />');
                            spanTag.appendChild(eImg);
                        }else{
                            eImg = $('<img src="http://cdn.last.fm/flatness/icons/res/3/track.png" class="lfmTrackImageNotFound" />');
                            spanTag.appendChild(eImg);
                        }
                     }
                    for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
                      //insert track link
                        spanTag = $('<span class="lfmTrackInfoCell tabslider"><a href='+oTracks[i].url+' target="new" class="lfmTrackTitle">'+truncateName(oTracks[i].name, 25)+'</a></span>');
                        //alert(truncateName(oTracks[i].name, 25));
                        //alert(oTracks[i].url);
                        $("body").append(spanTag);

                        //insert artist name
                        eSpan = $('<span class="lfmTrackArtist">'+truncateName(oTracks[i].artist["#text"], 22)+'</span>');
                        //alert(truncateName(oTracks[i].artist["#text"], 22));
                        $("body").append(eSpan);

                        //insert date
                        date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts));
                        eSpan = $('<span class="lfmTrackDate">'+ date +'</span>');
                        spanTag.append(eSpan);
                        //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
                        $("body").append(eSpan);
                     }
                } catch(e) {}
            }

函数CalculateDataGo（秒）{
变量agoString、agoRange、agoScaled；
如果（秒数>=（秒数范围=60*60
            function calculateDateAgo(secAgo) {
             var agoString, agoRange, agoScaled;
             if(secAgo >= (agoRange = 60*60*24)) 
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
             else if(secAgo >= (agoRange = 60*60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
             else if(secAgo >= (agoRange = 60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
             else if(secAgo >= -60)
               agoString = "blastin' out now";
             else
               agoString = "soon ;)";
             return agoString;
            }

            function truncateName(name, l) {
            return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
            }

            function lfmRecentTracks(JSONdata) {
                try { 
                    var eImg, eLink, eSpan, divTag, eWrapper, date;
                    var oTracks = new Array().concat(JSONdata.recenttracks.track);
                    for (var i = 0; i < oTracks.length; i++) {
                        //insert coverart image
                        var spanTag  = $('<span class="lfmTrackImageCell tab_item"></span>');
                        $("body").append(spanTag);
                        if(oTracks[i].image[1]["#text"] != "") {
                            eImg = $('<img src="'+oTracks[i].image[1]["#text"]+'" class="lfmTrackImage" />');
                            spanTag.appendChild(eImg);
                        }else{
                            eImg = $('<img src="http://cdn.last.fm/flatness/icons/res/3/track.png" class="lfmTrackImageNotFound" />');
                            spanTag.appendChild(eImg);
                        }
                     }
                    for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
                      //insert track link
                        spanTag = $('<span class="lfmTrackInfoCell tabslider"><a href='+oTracks[i].url+' target="new" class="lfmTrackTitle">'+truncateName(oTracks[i].name, 25)+'</a></span>');
                        //alert(truncateName(oTracks[i].name, 25));
                        //alert(oTracks[i].url);
                        $("body").append(spanTag);

                        //insert artist name
                        eSpan = $('<span class="lfmTrackArtist">'+truncateName(oTracks[i].artist["#text"], 22)+'</span>');
                        //alert(truncateName(oTracks[i].artist["#text"], 22));
                        $("body").append(eSpan);

                        //insert date
                        date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts));
                        eSpan = $('<span class="lfmTrackDate">'+ date +'</span>');
                        spanTag.append(eSpan);
                        //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
                        $("body").append(eSpan);
                     }
                } catch(e) {}
            }