Tag: DOM

使用JavaScript更改元素的类

如何使用JavaScript更改一个HTML元素的类来响应onClick事件?

.prop()vs .attr()

所以jQuery 1.6有了新的函数prop() 。 $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) 或在这种情况下他们做同样的事情? 如果我必须切换到使用prop() ,所有旧的attr()调用将打破,如果我切换到1.6? UPDATE selector = '#id' $(selector).click(function() { //instead of: var getAtt = this.getAttribute('style'); //do i use: var thisProp = $(this).prop('style'); //or: var thisAttr = $(this).attr('style'); console.log(getAtt, thisProp, thisAttr); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <div id='id' style="color: red;background: orange;">test</div> (另见这个小提琴: http : […]

为什么jQuery或者像getElementById这样的DOM方法找不到元素?

document.getElementById , $("#id")或任何其他DOM方法/ jQueryselect器没有find元素的可能原因是什么? 示例问题包括: jQuery默默无法绑定事件处理程序,而标准DOM方法返回null导致错误: Uncaught TypeError:无法设置null的属性“…”

什么时候在DOM环境中发生回流?

什么样的活动会触发与DOM的网页回流? 看来有不同的观点。 根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ,它发生 当你添加或删除一个DOM节点。 动态应用样式(如element.style.width =“10px”)。 当您检索必须计算的度量时,如访问offsetWidth,clientHeight或任何计算的CSS值(通过DOM兼容的浏览器中的getComputedStyle()或IE中的currentStyle)。 但是,根据http://dev.opera.com/articles/view/efficient-javascript/?page=3 ,只有在已经有回流动作排队的情况下才能进行测量触发器回流。 有没有人有更多的想法?

加载图片的jQuery事件

是否有可能通过jQuery事件检测到所有的图像加载? 理想情况下,应该有一个 $(document).idle(function() { } 要么 $(document).contentLoaded(function() { } 但是我找不到这样的事情。 我想附加一个像这样的事件: $(document).ready(function() { var imageTotal = $('img').length; var imageCount = 0; $('img').load(function(){if(++imageCount == imageTotal) doStuff();}); } 但是,如果图像加载失败,这会破坏吗? 在正确的时间调用该方法至关重要。

如何使用CSS在<select>菜单中隐藏<option>

我意识到Chrome似乎不允许我在<select>隐藏<option> <select> 。 Firefox将会。 我需要隐藏符合搜索条件的<option> 。 在Chrome的网络工具,我可以看到,他们正确地被设置为display: none; 由我的JavaScript,但一旦然后<select>菜单点击他们显示。 如何使这些匹配我的搜索条件的<option>在单击菜单时不显示? 谢谢!

如果没有使用库,querySelectorAll不可用,则通过属性获取元素?

<p data-foo="bar"> 你怎么能这样做呢? document.querySelectorAll('[data-foo]') querySelectorAll 不可用 ? 我需要一个至少在IE7中工作的本机解决方案。 我不在乎IE6。

有没有一个规范,元素的id应该是全局变量?

如果我在Chrome中有<div id='a'> ,那么在JavaScript中我可以做a. stuff() a. stuff() (就好像a是一个全局变量)。 然而,这不适用于FireFox – 我将需要使用document.getElementById('a') 。 这里的正确行为是什么? (根据W3规范) 此外,我感兴趣的是,如果我有一个ID a ID a div,但是在我的脚本中有一个叫做“太”的全局变量,Chrome将如何解决歧义。 行为是随机的,怪异的? 如何翻译由连字符(“ – ”),冒号(“:”)和句点(“。”)组成的元素(好吧,我知道他们可以用document.getElementById访问,但浏览器将如何翻译它进入代表它们的全局变量)

浏览器检测与功能检测

我会暂时扮演魔鬼的主张。 我一直在想,为什么浏览器检测(而不是功能检测)被认为是一个糟糕的做法。 如果我测试某个浏览器的某个版本,并确认,某些功能的行为是以某种可预测的方式,那么决定做特例似乎是可以的。 原因是将来会万无一失,因为这部分浏览器版本是不会改变的。 另一方面,如果我检测到DOM元素具有函数X,则不一定意味着: 这个功能在所有的浏览器中以相同的方式工作 更重要的是,即使在所有未来的浏览器中,它也将以相同的方式工作。 我只是窥探jQuery源代码,他们通过插入一个精心构造的HTML代码片段到DOM中进行特征检测,然后检查它是否具有某些特征。 这是一个明智而可靠的方法,但是我会说如果我在我的一小段个人JavaScript(没有jQuery)中做了这样的事情,那将会有点过重。 他们也具有实际无限的质量保证资源的优势。 另一方面,你经常看到人们做的是他们检查函数X的存在,然后在此基础上,他们认为函数将在所有具有这个函数的浏览器中以某种方式表现。 我没有说任何特征检测不是一件好事(如果使用正确),但我想知道为什么浏览器检测通常立即被驳回,即使这听起来合乎逻辑。 我不知道这是否是另一个时髦的事情。