我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.
它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".
谁有更好的解决方案?
编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.
如果有任何DOM API搜索具有给定属性名称和属性值的元素,请告诉我:
就像是:
doc.findElementByAttribute("myAttribute", "aValue");
Run Code Online (Sandbox Code Playgroud) 我正在使用jQuery v.1.7.1,其中.live()方法显然已被弃用.
我遇到的问题是,当使用以下方法动态将html加载到元素中时:
$('#parent').load("http://...");
Run Code Online (Sandbox Code Playgroud)
如果我之后尝试添加click事件,则不会使用以下任一方法注册事件:
$('#parent').click(function() ...);
Run Code Online (Sandbox Code Playgroud)
要么
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
Run Code Online (Sandbox Code Playgroud)
实现此功能的正确方法是什么?它似乎只适用于.live(),但我不应该使用该方法.请注意,#child是动态加载的元素.
谢谢.
每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.
这适用于大多数浏览器/操作系统组合:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'
Run Code Online (Sandbox Code Playgroud)
如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.
到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
Run Code Online (Sandbox Code Playgroud)
实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.
有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗?
使用jQuery,如何检查在选择菜单中是否选择了选项,如果没有,则将其中一个选项指定为选中.
(选择是在我刚刚继承的应用程序中使用迷宫般的PHP函数生成的,所以这是一个快速解决方案,而我可以解决这些问题:)
想解释之间有什么区别的offsetHeight,clientHeight和scrollHeight或offsetWidth,clientWidth和scrollWidth?
在客户端工作之前必须知道这种差异.否则他们的一半生命将用于修复UI.
小提琴或下面的内联:
function whatis(propType) {
var mainDiv = document.getElementById("MainDIV");
if (window.sampleDiv == null) {
var div = document.createElement("div");
window.sampleDiv = div;
}
div = window.sampleDiv;
var propTypeWidth = propType.toLowerCase() + "Width";
var propTypeHeight = propType + "Height";
var computedStyle = window.getComputedStyle(mainDiv, null);
var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
var borderTopWidth = computedStyle.getPropertyValue("border-top-width");
div.style.position = "absolute";
div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px"; …Run Code Online (Sandbox Code Playgroud)我有元素E,我正在添加一些元素.突然之间,我发现下一个元素应该是E的第一个孩子.诀窍是什么,怎么做?方法unshift不起作用,因为E是一个对象,而不是数组.
很长的路要走迭代E的孩子并移动'em键++,但我确信有一个更漂亮的方式.
我试图弄清楚当从页面中删除元素时如何执行一些js代码:
jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */
Run Code Online (Sandbox Code Playgroud)
是否有为此量身定制的活动,例如:
jQuery('#some-element').onremoval( function() {
// do post-mortem stuff here
});
Run Code Online (Sandbox Code Playgroud)
谢谢.
我尝试使用innerHTMLa 将一些脚本加载到页面中<div>.看起来脚本加载到DOM中,但它永远不会被执行(至少在Firefox和Chrome中).有没有办法让脚本在插入时执行innerHTML?
示例代码:
<!DOCTYPE html>
<html>
<body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
Shouldn't an alert saying 'hi' appear?
<div id="loader"></div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
如何在纯JavaScript中找到最接近具有特定类的树的元素的祖先?例如,在这样的树中:
<div class="far ancestor">
<div class="near ancestor">
<p>Where am I?</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
然后我想要,div.near.ancestor如果我尝试这个p并搜索ancestor.