如何将jQuery添加到JSFiddle

Question

JSfiddle的界面已经改变，我看不到添加jQuery并将其设置为onLoad的任何选项，就像以前一样。

所以有人能帮助我如何激活它吗？

非常感谢您的帮助。

- kh.tab

---

JSfiddle改变了它的界面，所以现在没有一个答案是有效的！ - Peter Krauss

@PeterKrauss：对我来说，它完全按照下面描述的方式工作。 - Nisse Engström

Answer 1

除了Velimir Tchatchevsky的回答，您还可以点击Javascript设置按钮（Javascript窗格的左上部分）。

你可以从“框架和扩展”下拉菜单中选择jQuery和其他扩展和框架。

此外，根据所选的库，还有一些其他扩展。以下是jQuery 1.7.2的示例，你还可以包括jQuery UI、jQuery Mobile等。

---

关于Velimir Tchatchevsky的回答，左侧的外部资源部分更多地用于导入JSFiddle没有的其他文件/库。

例如，您可以导入像FontAwesome或Datatables.js这样的库，或者您自己托管的CSS / JS文件。

- ImClarky

---

正如@mry在他们的回答中所示 - 设置按钮现在位于JS面板的左上角。 - ImClarky

Answer 2

在左侧有一个“外部资源”按钮，您可以点击并填写jQuery源的URL。

- Velimir Tchatchevsky

---

谢谢，现在它不会自己设置它。 - kh.tab

"jquery"不起作用，没有自动完成...请举一个具体的例子来说明...啊，现在正常工作了，https://code.jquery.com/jquery-1.11.3.js。 - Peter Krauss

Answer 3

我有同样的问题。使用ImClarky的答案在更新的界面中解决了它。下面是在更新的界面中添加步骤的方法。希望这些能帮助将来寻找相同答案的人。

1. 点击JavaScript窗格中的JavaScript菜单，然后从“框架和扩展”菜单中选择jQuery。

2. 使用jQuery添加您的代码！

- mry

Answer 4

将以下内容添加到HTML块的顶部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

---

例子：

---

function code()
{
console.log('change');
console.log($('#select').val());
$('#copySelect').html($('#select').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<select id="select" onchange="code()">
<option value="Hi">Hi</option>
<option value="Bye">Bye</option>
</select>
<span id="copySelect">
Hi
</span>

- Andre Nel