Question

我决定使用在我的信息文件中包含该文件的方法。这是我写的：

scripts[] = https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
scripts[] = screenshot.js
scripts[] = html2canvas-master/dist/html2canvas.js

我在screenshot.js中混合了javascript和jquery。 javascript部分工作正常，但像$（＆＃34;＃btn＆＃34;）这样简单.html（＆＃34; testing＆＃34;）无法正常工作。那么jQuery在这里添加不正确吗？

Answer 1

这是向您网站上的每个页面添加javascript文件的一种方法（启用模块时）。

但是，jQuery已与Drupal捆绑在一起（在no-conflict mode中）。这可能是你的问题。如果您需要更新到jQuery 2.x，您可能想要使用jQuery Update module。你需要这个模块，因为它提供了一个兼容层，所以一旦你更新jQuery，Drupal自己的JavaScript仍然可以工作。否则，您将遇到一些兼容性问题。

Answer 2

Drupal 7包含标准安装的jQuery。它可能比您需要的版本稍早。

找出jQuery Drupal的版本正在加载

关闭js聚合（从管理菜单中配置＆gt;开发＆gt;性能）后，加载页面并使用浏览器工具检查代码。您应该会在<head>中看到所有加载了该页面的javascript。如果jQuery版本不包含您需要的功能，请添加模块jQuery Update。配置此模块将允许您选择所需的jQuery版本。

在Drupal网站上使用jQuery

创建自定义javascript时，您可以利用Drupal js行为，这些行为在文章"Understanding JavaScript Behaviors in Drupal"中有详细说明。或者你可以使用好的$( document ).ready()。

如何选择行为和文档就绪

如果你的页面是

，你会想要使用行为

在$(document).ready()事件触发后加载AJAX内容 - 并且jQuery需要对新内容采取行动。行为将通过新内容，但只是新内容，所以你没有疯狂的倍增事件监听器。
您的自定义javascript仅适用于您网站的一小部分，不应在每个网页上加载。使用行为定义您的上下文。
需要jQuery了解从数据库中提取的值/由PHP计算的值。使用行为，您可以将值从PHP（服务器端）传递到javascript（客户端）。

但$(document).ready()仍然可以正常工作。它是命名空间的，为了使用熟悉的$（'。my-target'）语法，你需要将自定义jQuery包装在这样的包装器中：

(function ($) {
  // All your code here
  $(document).ready(function(){
    $('.my-paragraph).css('border','1px solid lime');
    console.log('jQuery reporting for duty!');
  });
}(jQuery));

查看Drupal docs for more info。确保你的语法紧凑！在某些情况下，这些分号可能是可选的，但Drupal确实对它有点紧张。

Answer 3

您无需在主题信息文件中添加scripts[] = https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js。因为jQuery已经在Drupal安装中捆绑了以下版本。
- Drupal 7.42 - jQuery 1.4.4
- Drupal 8.1.2（最新） - jQuery 2.1.4
如果你想要其他版本的jQuery，请安装jquery_update模块。由于与核心JavaScript不兼容，该模块修复了许多冲突。
Drupal删除了jQuery的全局$换行。您可以查看here

Behaviors包装所有代码是添加自己的JavaScript代码而不是$(document).ready()的首选方式。

(function($) {
  Drupal.behaviors.yourThemeName = {
    attach: function(context, settings) {
      // enter code here

      // this is example
      $('body', context).addClass('test');
    },
  }
});

将jQuery添加到Drupal模块

3 个答案: