标签: dom

使用jQuery检查是否加载了图像(没有错误)

我正在使用JavaScript与jQuery库来操作无序列表中包含的图像缩略图.当图像被加载时,它会做一件事,当发生错误时它会做其他事情.我正在使用jQuery load()和error()方法作为事件.在这些事件之后,我检查.complete的图像DOM元素,以确保在jQuery注册事件之前图像尚未加载.

它正常工作,除非在jQuery注册事件之前发生错误.我能想到的唯一解决方案是使用img onerror属性在全局某个地方(或在它自己的节点上)存储一个"标志",表示它失败,因此jQuery可以在检查.complete时检查"存储/节点".

谁有更好的解决方案?

编辑:粗体主要点并在下面添加额外的细节: 我正在检查图像是否完整(也称为加载)我在图像上添加加载和错误事件后.这样,如果在事件被注册之前加载了图像,我仍然会知道.如果在事件之后未加载图像,则事件将在事件发生时进行处理.这个问题是,我可以很容易地检查图像是否已经加载,但我无法判断是否发生了错误.

javascript jquery dom image jquery-events

215
推荐指数
7
解决办法
29万
查看次数

根据属性值在DOM中查找元素

如果有任何DOM API搜索具有给定属性名称和属性值的元素,请告诉我:

就像是:

doc.findElementByAttribute("myAttribute", "aValue");
Run Code Online (Sandbox Code Playgroud)

javascript dom

212
推荐指数
10
解决办法
30万
查看次数

jQuery .live()vs .on()方法,用于在加载动态html后添加click事件

我正在使用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是动态加载的元素.

谢谢.

javascript jquery events dom handler

209
推荐指数
6
解决办法
15万
查看次数

在Chrome/Mac上强制DOM重绘/刷新

每隔一段时间,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的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗?

javascript css macos dom google-chrome

209
推荐指数
8
解决办法
28万
查看次数

检查是否使用jQuery选择了选项,如果没有选择默认值

使用jQuery,如何检查在选择菜单中是否选择了选项,如果没有,则将其中一个选项指定为选中.

(选择是在我刚刚继承的应用程序中使用迷宫般的PHP函数生成的,所以这是一个快速解决方案,而我可以解决这些问题:)

javascript forms jquery dom html-select

205
推荐指数
6
解决办法
50万
查看次数

什么是offsetHeight,clientHeight,scrollHeight?

想解释之间有什么区别的offsetHeight,clientHeightscrollHeightoffsetWidth,clientWidthscrollWidth

在客户端工作之前必须知道这种差异.否则他们的一半生命将用于修复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)

html javascript dom offsetheight

205
推荐指数
4
解决办法
10万
查看次数

如何将DOM元素设置为第一个子元素?

我有元素E,我正在添加一些元素.突然之间,我发现下一个元素应该是E的第一个孩子.诀窍是什么,怎么做?方法unshift不起作用,因为E是一个对象,而不是数组.

很长的路要走迭代E的孩子并移动'em键++,但我确信有一个更漂亮的方式.

javascript arrays jquery dom elements

203
推荐指数
6
解决办法
15万
查看次数

jQuery - 从DOM中删除元素时的触发事件

我试图弄清楚当从页面中删除元素时如何执行一些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)

谢谢.

jquery events dom triggers

203
推荐指数
7
解决办法
14万
查看次数

可以使用innerHTML插入脚本吗?

我尝试使用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)

html javascript dom innerhtml

194
推荐指数
12
解决办法
18万
查看次数

找到具有特定类的最近的祖先元素

如何在纯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.

html javascript dom

194
推荐指数
6
解决办法
17万
查看次数