小编mon*_*ers的帖子

我有以下脚本:

/* script.js */
var bar = "bar1";

function foo() {
    console.log('this.bar: ' + this.bar);
    console.log('global.bar: ' + global.bar);
}
foo();

运行node script.js回报:

this.bar: undefined
global.bar: undefined

但是,从节点命令行环境内部,再现相同的脚本将返回:

this.bar: bar1
global.bar: bar1

另外,如果我改变从我的变量声明var bar = "bar1";来global.bar = "bar1";运行上面的代码返回的两种方法:

this.bar: bar1
global.bar: bar1

有什么不同？运行脚本与在同一环境中重现脚本时,全局变量赋值是否有所不同？

假设我有一个包含图像源URL的数组,例如:

var imgs = ['http://lorempizza.com/380/240', 
            'http://dummyimage.com/250/ffffff/000000', 
            'http://lorempixel.com/g/400/200/', 
            'http://lorempixel.com/g/400/200/sports/'];

如何抓取所有这些图像并将其插入我在特定位置的页面？说...

<div id="imageContainer"></div>

在下面的代码中,当$(this)调用时,jQuery是否重新查询DOM,好像已经将选择器传递给它(使用对象的某些属性作为选择器),或者jQuery是否保留以前返回的对象？

$('.someButton').on('click', function() {
    $(this).remove();  // Is this another lookup, or just a wrapper for the previously returned object?
});

显示:重复内容上没有影响SEO /语义吗？

假设您正在构建一个移动优先的响应式网站.在较小的断点处,您已选择<h1>在主要英雄横幅中显示页面的标题标语().但是,稍后,您希望在同一位置显示公司徽标,并在子横幅中显示您的标语.例如:

<!-- Assuming following markup -->
<header class="hero-banner">
    <h1 class="hide-on-lg">Company Tagline</h1>
    <img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
    <h1 class="show-on-lg">Company Tagline</h1>
</div>

...使用以下CSS:

.hide-on-lg {
    display: block;
}
.show-on-lg {
    display: none;
}
@media (min-width: 1200px) {
    .show-on-lg {
        display: block;
    }
    .hide-on-lg {
        display: none;
    }
}

语义规则是你h1在页面上永远不应该只有一个,所以我的问题是:

如果只有一个变体实际可见,那么重复内容会影响SEO,还是违反语义？

我试图达到相当于:

$('div').on('click', function() {
    // Do something
});

但没有jQuery.我最初的想法是使用一个for循环迭代集合中的所有元素,但我的猜测是有一种更好的方法来实现这一点而不使用循环(一些本机方法？).

var elems = document.getElementsByTagName('div');

function someEvent() { // Generic function to test against
    alert('event fired');
}

for (var i=0, j = elems.length; i < j; i += 1) {
    elems[i].addEventListener("click", someEvent);
}

没有包含库,有更优雅的方式吗？

我似乎无法让 jQuery.css() 接受 hsla() 值。传递颜色值的格式不是可接受的吗？这是我尝试过的：

// the below variable outputs a variable value with the following format
// hsla(131, 10%, 100%, 1.0)
var finalcolor = "hsla(" +colx +", " +coly +"%, " +"100%, " +"1.0)";

$('#target-div').css('background', finalcolor);

我们如何实现以下布局:

满足以下条件:

1. 每行的切片高度应与行中的最高元素相等

2. 行中的最后一个tile应与父容器齐平(无间隙)

3. 瓷砖可以是不同的宽度比(3倍三分之一或三分之一+三分之二等)

4. 瓷砖的排序是未知的

5. 没有网格框架

6. 仅限现代浏览器

以下标记:

<div class="tile-wrapper">
  <div class="tile-container">
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile third">1/3</div>
    <div class="tile two-thirds">2/3</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
    <div class="tile third">1/3</div>
    <div class="tile sixth">1/6</div>
    <div class="tile sixth">1/6</div>
  </div>
</div>

我注意到当我更改内容类的填充设置时(我认为有太多的空白区域),它完全弄乱了平滑的下拉菜单.我不确定为什么会这样,我在JavaScript中看不到任何内容.

小提琴

HTML:

<div class="container">
    <div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>

CSS:

.title {
    padding-left:15px;
    height:17px;
    background: …