我偶然发现了将DOM NodeList转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它从一个空数组开始[],然后slice用于将结果转换call为一个新数组是啊？
我不明白的是call.如何document.querySelectorAll('a')从NodeList转换为常规数组？
就像我的标题所说,我正在尝试使用javascript以编程方式在HTML页面中创建SVG图像元素.由于某些原因,我的基本javascript代码无法正常工作,但是如果我使用raphaeljs库它可以正常工作.所以我的js显然有问题 - 我似乎无法弄清楚它是什么.
(注意:目标浏览器是FF4 +)
这是一个基本页面,其中包含我想要达到顶部的html版本:
<html>
<head>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="test1"
height="200px"
width="200px">
<image
id="testimg1"
xlink:href="http://i.imgur.com/LQIsf.jpg"
width="100"
height="100"
x="0"
y="0"/>
</svg>
<hr />
<p id="testP1">
</p>
<hr />
<p id="testP2">
</p>
</body>
</html>
这是我的javascript:
var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');
svg.appendChild(svgimg);
document.querySelector('#testP2').appendChild(svg);
所以基本上我的头衔说,我想在矩形元素中"切洞".
我有两个rect元素,一个在另一个上面.底部的填充颜色为白色,顶部的填充颜色为灰色.
我想要做的是从顶部rect元素中切出一个三角形,以便下面的rect元素显示出来.
此svg元素将用作页面上媒体播放器的音频按钮.换句话说,您将能够左/右单击(或拖动)鼠标,音频水平的变化将通过底部矩形元素宽度的变化来表示,通过切出的三角形显示顶部rect元素.
我希望这不会太混乱.:P
以下是它应该是什么样子的快速模型:http://forboden.com/coding/s1.png
这是我的代码:http://forboden.com/coding/svgClipTest.html
我在哪里错了？
谁能告诉我document.readyState和"DOMContentLoaded"的"交互"状态之间的区别？
我找不到关于"交互"状态的大量信息,以及在页面中可以使用的具体内容.
这个页面说:
交互式 - 已加载足够,用户可以与之交互
这看起来很像DOMContentLoaded事件.
我在这里写了一个快速测试页面,似乎表明交互式readystate似乎在DOMContentLoaded事件之前可用.
那么有人可以澄清或给我一些关于在交互状态下可以在页面上操作的信息,以及它是否与DOMContentLoaded相同,如果是这样,为什么它在DOMContentLoaded之前可用？
:)
干杯,Yansky.
编辑:忘记添加,您需要运行FF4b才能使用/查看新的readystate功能.
是否可以将数组映射到新数组并同时对其进行排序而无需迭代两次（一次用于第一个数组上的映射，一次用于第二个数组上的排序）？在使用这样的 map 方法时，我一直在尝试使用匿名函数对其进行排序：
var arr=[4,2,20,44,6];
var arr2=arr.map(function(item, index, array){
if(index==array.length-1 || item==array[index+1]){
return item;
}
else if((item-array[index+1])<0){
return item;
}
else if((item-array[index+1])>0){
return array[index+1];
}
});
console.log(arr2);
但它似乎不起作用。我在尝试实现这一点的方式上偏离了基础，还是我的代码有问题？
我非常喜欢在nodeLists上使用forEach方法,如下所示:
var nodes = document.querySelectorAll(".foo");
[].forEach.call(nodes, function (item) {
//do stuff with item
});
我想知道,这样做的时间是否比常规方式更长？例如
for(var i=0;i<nodes.length;i++){
//do stuff with nodes[i];
}
我正在查看来自firefox扩展的一些代码(这里:https://github.com/mozilla/prospector/blob/master/oneLiner/bootstrap.js#L34),我在javascript中看到了一些我以前从未见过的东西.程序员使用关联数组作为变量名.有人可以向我解释这个变量引用是如何工作的吗？
const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
我从阅读此页面了解"const":https://developer.mozilla.org/en/JavaScript/Reference/Statements/const
但是如何将关联数组对象用作变量名呢？
此外,它似乎使用关联数组中的键名作为对Components方法的引用(在此列出:https://developer.mozilla.org/en/Components_object).我一直认为一个关键名称必须首先然后是值,但这似乎首先将引用的值放入Components类方法,然后将其指定为Cc的名称,即使Cc位于值的位置将去(和Ci为Components接口方法和Cu为组件utils方法).