Question

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

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

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

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

我相对较新，我的JS知识非常基础（W3Schools教程已经完成）。

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

Answer 1

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

在VanillaJS中，这就像：

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

Answer 2

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

因此你的代码：

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

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

示例：

＆＃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;

Answer 3

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

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

或：

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

...

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

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

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

请向我解释这个JQuery行

3 个答案: