请向我解释这个JQuery行

时间:2017-01-22 23:41:07

标签: javascript jquery

我正在尝试了解lighbox脚本中的这一行是如何工作的:

overlay = $('<div>').addClass('sl-overlay'),

它正在生成HTML,但我无法理解HTML的确切插入位置,以及此代码的哪一部分告诉浏览器新插入的元素的位置。

更令我困惑的是,我认为“div”在这种情况下是一个选择器。但是文档中有很多div。并不是每个div都能获得“sl-overlay”这个类,所以很清楚。

我相对较新,我的JS知识非常基础(W3Schools教程已经完成)。

编辑:不要得到它 - 为什么是downvotes?我不是一个程序员,而是一个音乐家和设计师,他想学习(一般)并解决这个问题(特别是)。英语不是我的母语,所以我很难解释。

3 个答案:

答案 0 :(得分:2)

您创建一个div元素,添加一个className,将其保存在overlay变量中,以便稍后在DOM中插入它。 尚未在DOM中插入

在VanillaJS中,这就像:

var overlay = document.createElement('div');
overlay.className = 'sl-overlay';
// do something with the overlay variable ...

答案 1 :(得分:2)

$('<div>')创建一个新的div元素,阅读它jquery Documantation,搜索创建新元素部分。

因此你的代码:

overlay = $('<div>').addClass('sl-overlay'),

创建一个新的div元素分配添加一个类sl-overlay,然后将其分配给可以在以后使用的可变覆盖,

示例:

&#13;
&#13;
$(document).ready(function() {
  var overlay = $('<div>').addClass('sl-overlay');
  $('button').on('click', function() {
    $('body').append(overlay);
  })

})
&#13;
.sl-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Show Modal</button>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

生成的HTML没有附加在屏幕上,你应该用以下内容结束:

$('body').append(overlay);

或:

overlay = $('<div>').addClass('sl-overlay').appendTo('body');

...

$('<div>') - 是在jquery中创建div元素的简称 .addClass('...') - 表示将一个类添加到生成的元素

jquery通常在创建/修改元素后返回元素,这允许您链接命令:

$('.selector').css().appendTo().next().remove();