Jquery和Vanilla javascript返回不同的元素
JQuery和Vanilla JavaScript是两种常用的JavaScript库和语言。它们在返回元素方面有一些不同之处。
JQuery是一个快速、简洁的JavaScript库，提供了一系列简化DOM操作、事件处理、动画效果等功能的方法。当使用JQuery选择器选择元素时，它会返回一个JQuery对象，该对象包装了匹配的元素集合。这个JQuery对象是一个类似数组的对象，可以通过JQuery提供的方法来操作和处理这些元素。
Vanilla JavaScript是指纯粹的JavaScript，即原生的、未经任何库或框架封装的JavaScript语言。当使用原生JavaScript选择元素时，它会返回一个NodeList对象，该对象是一个类似数组的集合，包含了匹配的元素。
虽然JQuery对象和NodeList对象都类似数组，但它们之间有一些区别。下面是它们的一些特点：
- 操作方法：JQuery对象提供了丰富的方法来操作和处理元素，如添加、删除、修改元素的属性、样式等。而NodeList对象的方法相对较少，需要使用原生JavaScript的方法来进行操作。
- 兼容性：JQuery封装了许多兼容性处理，可以在不同浏览器上提供一致的操作和效果。而原生JavaScript的兼容性需要开发者自行处理。
- 性能：由于JQuery提供了许多封装的方法和功能，它的代码量相对较大，可能会影响性能。而原生JavaScript的代码量较少，执行速度相对较快。
根据具体的需求和项目情况，选择使用JQuery还是原生JavaScript取决于开发者的偏好和项目要求。对于简单的操作和较小的项目，原生JavaScript可能更加轻量和高效。而对于复杂的操作和大型项目，JQuery提供的丰富功能和兼容性处理可能更加方便和可靠。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯会议：https://cloud.tencent.com/product/tcmeeting
相关·内容
如何从右侧相对于window获取元素的偏移量
我只能找到jQuery解决方案，但我需要一个使用普通JavaScript的解决方案。
这是使用jQuery的解决方案
var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
我怎么把这个翻译成香草JavaScript呢？
浏览 0提问于2018-07-05得票数 7
回答已采纳
2回答
jQuery性能太慢(切换)
、、、、
我有一个问题，jQuery的切换功能对于我的情况来说太低了。我需要切换超过2000行，脚本需要超过30秒。
如何提高性能？也许只有Javascript而不是jQuery？
$('#toggleAspMaterials').click(function() {
$('#catalog body.asp').toggle();
return false;
});
<input id="toggleAspMaterials" value="Show Asp Materials / hide" class=
浏览 0提问于2016-11-10得票数 0
我有一个表格，我试图提交与超文本标记语言和JavaScript。我将一个事件侦听器附加到我的复选框(.checkbox)中，它等待单击，并在单击时启动一个尝试提交表单的函数。
我已经成功地使用了jQuery的.parent()，但现在正在尝试将其切换到普通的JS。
我已经尝试过this.parentNode.submit();，但是它返回了错误消息。
this.parentNode.submit is not a function at HTMLInputElement.formSubmit
有没有可能通过将jQuery $(this).parent().submit()替换为普通的JS等效项
浏览 48提问于2017-03-15得票数 4
1回答
我有以下JS代码用于统计调查中的分数，我想在HTML中实现这些代码：
function displayScore()
{
var score = $('<p>',{id: 'question'});
var points = 0;
for (var i = 0; i < selections.length; i++)
{
for (var j = 0; j < questions[i].choices.length; j++)
{
if (sele
浏览 4提问于2017-06-16得票数 0
我需要许多元素来切换one click.The转换的css类，所有这些都是同时发生的，因此非常慢:我希望类属性的转换在一个小延迟之后一个接一个地发生，就像使用animate()回调一样。自从removeClass()，addClass() & toggleClass()没有回调，我一直在努力使它发挥作用。
我已经查看了和jquery，但我仍然感到困惑。
任何想法都将不胜感激。
$(".vanilla").click(function () {
colorThread(this);
});
function colorThread(clickedMs
浏览 1提问于2014-02-01得票数 1
回答已采纳
1回答
好吧，我已经看过了建议的q/a，但他们似乎没有清楚地或根本没有回答这个问题。
我想减少混乱，让一个事件处理程序一次分配给几个图像，而不是单独分配。这是重复代码的当前代码：
$(document).ready(function(){
$("#div1 img:eq(0)").mouseenter(function(){
$(this).css("border","1px solid green");
})
$("#div1 img:eq(1)").mo
浏览 4提问于2014-02-06得票数 1
我有两个页面，page1.html & page2.html，它们链接到相同的javascript文件。这是第1页的标记。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button">HIT ME</button&
浏览 2提问于2017-09-29得票数 0
回答已采纳
我正在努力学习jQuery和javascript，所以请耐心等待。我有一个jQuery函数，可以在调整大小时添加和删除类。jQuery：
$(document).ready(function($) {
var $window = $(window), $element = $('.test');
function resize() {
if ($window.width() < 768) {
return $element.addClass('mobile');
}
$elem
浏览 1提问于2017-03-09得票数 0
1回答
我正在尝试使用将图像裁剪到剪贴簿
我曾尝试使用他们的函数来返回base64编码的图像。它返回一个base64代码，但没有图像:下面是我的代码：
<div id="vanilla-demo"></div>
</div>
<img id="myImage" src="">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="croppie.js&
浏览 2提问于2015-12-03得票数 3
回答已采纳
例如，对于给定的jquery代码片段，什么应该是等效的javascript。javascript中等效的add方法会很有帮助。
$("h1").add("span").add("h2");
正如jquery文档中明确提到的，.add()不添加任何DOM元素。因此，使用.appendChild()在这里并不起作用。
浏览 0提问于2018-09-12得票数 2
4回答
对于这里的jQuery/JavaScript大师来说，这个可能很简单，但我只是无法在web上找到解决方案。
Case
我在页面底部有一个链接，上面写着Back to Top，这个链接只是一个目标链接，如下所示：
<a href="#top" class="standard">Back to Top</a>
所以当你点击它的时候，它会跳到页面的顶部。很简单。
问题
当单击目标链接时，id #top将添加到页面的URL中，即：
http://website.com/about-us/#top
问题
是否有一种方法可以删除或避免将id #top
浏览 5提问于2013-08-26得票数 6
回答已采纳
我已经在移动设备上实现了这一点，但是由于jQuery的32kb压缩版，我想知道是否可以创建以下代码
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$wrap = $('#wrap');
$menulink.click(function() {
$menulink.toggleC
浏览 11提问于2012-10-13得票数 1
回答已采纳
我有一个包含排序标准的菜单。每个条件的选项在div中以复选框的形式列出，其中包含类“.CLASH_box”。
我需要检查这些div中的每一个，看看其中包含的复选框是否被选中。如果有任何复选框，我需要将DIV显示设置为block。
我是这样想的：
$('.collapse_box')each(function()
if( $(this).(input:checked).length() > 0{ //here lies my problem
$(this).show();
}
});
鉴于我是javascript和jquery的新手，我
浏览 3提问于2013-10-15得票数 1
3回答
在JavaScript中，我经常这样使用事件委派：
someDiv.addEventListener('click', function(evt){
if(evt.target.id == "#someChild"){
// Do something..
} else if(evt.target.id == "#anotherChild"){
// Do something else..
}
}, false);
在jQuery中与此相当的是什么？我知道.on()，但是如何在事件委托中使用它呢？
浏览 0提问于2012-09-02得票数 0
回答已采纳
3回答
我想用JavaScript触发一个触发器点击事件。我用jQuery这样做了：
$('button[type="submit"]').trigger('click'):
我希望JavaScript也是这样。
浏览 1提问于2020-03-13得票数 0
我想将eventListener附加到动态创建的输入文本或其他对象。由于对象尚未出现在DOM中，或者对象不可见，因此将事件附加到这些对象将失败。在普通的Javascript或JQuery中有正确的方法来避免这个问题吗？
谢谢
浏览 3提问于2020-03-17得票数 0
回答已采纳
1回答
在这里，我有一个很好的自动完成下拉列表，给定用户输入的城市，页面将显示所有可能的城市-州-国家三元组。例如，Guadalajara这个名字会暗示 Guadalajara de Buga，Valle del Cauca省，哥伦比亚Guadalajara，Castilla La Mancha，西班牙，Guadalajara，墨西哥哈利斯科 代码在后端和前端都能很好地工作，剩下的唯一问题是自动提示下拉菜单只能在鼠标上工作，不能在键盘上工作。上箭头键和下箭头键不允许浏览最合适的选项，按esc键不会取消菜单。 我尝试了所有的方法，但我不知道还缺少什么才能在键盘上工作。我想找到一个纯粹的香草JavaSc
浏览 41提问于2021-08-03得票数 0
4回答
有没有办法，正如标题所说的“如果在iframe内以不同方式显示页面(css)”。我正在寻找一个jQuery / JavaScript方法来潜在地使用不同的css样式表，如果该网站是在iframe中。有什么想法吗？
浏览 0提问于2010-12-04得票数 21
回答已采纳
我有以下元素：
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
我想使用jquery (或者只使用javascript就可以了)来修改aria扩展字段，以便在true和false之间切换。
我该怎么做呢？
谢谢!
浏览 4提问于2015-01-03得票数 40
回答已采纳
3回答
我为一个客户买了一个Magento的扩展，这个扩展已经在代码上应用了一个该死的html锚(扩展有一个加密，所以我不能访问代码)，我需要删除它。查看我通过按Ctrl +U查看源代码所获得的内容：
<script type="text/javascript">
Event.observe(window, 'load', function() {
$('processing-cerebrum-all-observer-AdminhtmlDashboardIndexLicenseProcesso
浏览 2提问于2013-02-21得票数 1
回答已采纳
1回答
我的javascript文件有一个问题，似乎它们没有在我的应用程序的每个重定向中正确加载。我需要刷新一下才能加载它们。
我在使用rails 5和turbolinks 5。
这就是我的application.html.erb资产标记助手的样子
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application&#
浏览 0提问于2019-08-21得票数 0
当我试图对aspx页面上的select选项元素调用函数时，我得到了上述错误消息。
我的网页上有以下参考资料：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="jquery.sumoselect.js" type="text/javascript"></script>
<link href
浏览 3提问于2015-10-27得票数 0
1回答
我很难将一个事件从jQuery传递到JavaScript。我首先设置JS事件侦听器，然后从外部文件触发jQuery事件，但是侦听器永远不会被触发。下面是一些代码：
侦听器
<script type="text/javascript">
document.addEventListener('readyToPlay', loadLibs);
function loadLibs() {
alert('success');
}
</script>
<script src="/assets/js/plugi
浏览 0提问于2015-09-03得票数 3
回答已采纳
我有一个内联SVG，比如
<svg>
<g id="1" transform="<list of transformations>">
<path d="">
<circle cx="" ...>
</g>
...
</svg>
有很多组，我想用JavaScript/jQuery移动它们。我从网站上的输入中获取值(如旋转)，并尝试使用
$("#1").attr("transform"
浏览 9提问于2017-08-06得票数 1
回答已采纳
我对javascript很陌生，一直在寻找答案，但似乎找不到类似的堆栈溢出问题。我试图在数组上进行迭代，只返回有重复id的数组，我不能使用lodash或jQuery，只是普通的普通JS。因此，给定下面的数组：
iceCreamArray = [
[1, Chocolate],
[1, Vanilla],
[2, Chocolate],
[3, Vanilla],
[4, Chocolate],
[4, Vanilla],
[5, Vanilla]
]
将返回：
resultArray = [
[1, Chocolate],
[1, Vanilla],
浏览 5提问于2018-01-03得票数 0
回答已采纳
4回答
我想使用数组来传递数据-属性。在我的HTML-标记中，我有以下属性：
data-toshow='["tblp"]'
我可以在使用jQuery时访问和使用它
$().data('toshow')
但在使用dataset.toshow时，我得到的结果不一样。实际上我没有数组。
有人能给我解释一下吗？给我一个答案，如何不使用jQuery来做同样的事情？
浏览 0提问于2018-12-05得票数 4
回答已采纳
2回答
我正在编写一个插件，最终将在不同的网站上使用。插件根据事件与页面的其余部分进行通信。到目前一切尚好。
下面是问题所在:一些现有站点使用纯JS来侦听和分派事件，有些使用JQuery。插件本身不应该使用jQuery (出于不同的原因)，而只使用纯JS。因此，目标基本上是在没有jQuery的情况下侦听和分派类似jQuery的事件。
纯JS事件和jQuery事件如何协同工作，特别是与事件关联的自定义数据？
Dispatcher Listener Event Triggered Event Data Transmitted
JS JS
浏览 4提问于2022-06-11得票数 0
1回答
在大多数JavaScript方法(迭代器)中，回调首先是元素，其次是索引。但在jQuery的情况下，第二个参数是元素，第一个参数是索引。为什么他们的格式不同？这是为了避免它们之间的混淆，因为这两种方法都包含地图、过滤器等方法。这其中有什么特殊的含义吗？我只是好奇知道。
浏览 2提问于2016-06-23得票数 0
回答已采纳
我有一个简单的js代码：
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
console.log(document.querySelector('#nav-toggle')); //
浏览 2提问于2015-02-01得票数 0
回答已采纳
我正在尝试使用html、css、jquery和javascript创建一个相当简单的空间入侵者克隆。它进行得很好，直到我开始对子弹和敌人进行碰撞检测。我研究了一下，但找不到任何可以帮助我的东西，因为我没有使用canvas。我该怎么做呢？ 这是Javascript： function init() {
$("#playerShip").hide();
$("#playerMarLeftCounter").hide();
$("#startButton").click(startGame);
}
function s
浏览 5提问于2020-08-15得票数 0
2回答
我需要使用JavaScript或jQuery获取新添加项的宽度。我知道如果需要将事件绑定到新添加的元素，可以使用事件委托或jQuery中的.on()方法。但在这种情况下，我并没有绑定一个事件，我只需要获得该元素的宽度。我该怎么做呢？
$('#box').width(); // won’t work
document.getElementById("box").width; // won't work either
浏览 0提问于2014-10-25得票数 1
我有一个页面，我们团队的另一部分人使用jquery来实现一些功能。当jquery*文件被称为my javascript验证时，请将HTML5占位符作为值。如果我去掉jquery，一切都可以正常工作。
例如，如果我有这样的代码：
!document.getElementById("company").value
对于html文件中的jquery，无论是在头中还是在主体中，我的JS都不会将其视为空或空，它看到的是HTML5占位符的值。
<script type="text/javascript" src="js/jquery-1.11.1.min.js
浏览 0提问于2015-12-22得票数 1
是一个非常棒的颜色选择器(，)。然而，还有点缺乏。我知道如何初始化，尽管我不知道如何标识任何全局对象(除了Picker)，所以我不知道如何访问show()、hide()和/或movePopup(options, open)方法。
下面我想出的代码至少可以防止超出一个元素的额外弹出窗口。但是，简单地使用movePopup()方法会更有意义(而且浪费更少的内存)，不过我也不知道要引用哪个父对象。如果我在console.log(Picker);和查看检查工具沃特福克斯和Chrome的事件，使我有点迷路。我还必须先单击两次才能显示弹出窗口。
如何标识全局/主对象，然后可以使用movePopup来使用V
浏览 0提问于2019-05-18得票数 0
回答已采纳
3回答
如果您删除使用javascript而不是CSS显示的元素，那么页面速度是否有任何差异？
例如，如果我在侧栏中有很多内容，但希望为较小的屏幕删除它，我会这样做：
@media screen and (max-width: 1025px) {
.sidebar {
display: none;
}
}
我不习惯使用js，但是我发现了如何使用jquery做同样的事情：
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
浏览 4提问于2016-01-01得票数 0
回答已采纳
我通常编写没有类型属性的脚本标记。然而，我看到了几种不同类型的脚本。因此，我用不同的类型进行了测试，除了故意放错类型之外，所有的测试在我看来都是一样的。
<script>alert(1)</script>
<script type="text/javascript">alert(2);</script>
<script type="text/ecmascript">alert(3);</script>
<script type="application/ecmascript&#
浏览 4提问于2013-02-10得票数 3
回答已采纳
经典的Javascript代码有什么不同：
document.getElementById('theID')
和jQuery版本：
$('#theID')
浏览 1提问于2011-05-24得票数 29
回答已采纳
我想在Django中使用ajax发送'GET‘和'POST’请求。我看了几篇文章，但它们都在使用jquery，我不知道如何使用jquery，所以有没有什么方法可以用普通的JavaScript发送'GET‘和'POST’请求。
浏览 3提问于2021-09-27得票数 0
2回答
我不是javascript/jquery开发人员，但我必须处理它，所以请原谅这个愚蠢的问题。我有一个允许javascript/jquery自定义的软件，我需要将一些报告迁移到新版本。在旧的软件版本中，这可以很好地工作：
$("#prop input").val('asd').blur();
请注意，#prop是div id (隐藏)，它包含了我想要填充的输入域，这个输入域是一个我不能修改的软件对象，所以我需要使用这种方法。在新版本中，如果div可见，上面编写的代码仍然有效，而隐藏时则不再有效。我在软件发布说明中发现，jquery可能不再受支持，但javascri
浏览 9提问于2019-03-28得票数 1
我是JavaScript的新手。请帮帮忙。
我在玩这个方法-- console.log。以下是我所做的：
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Neapolitan", "Mint Chip"];
delete iceCreamFlavors[iceCreamFlavors.length-1];
console.log(iceCreamFlavors[length-1])
控制台又回来了
浏览 1提问于2021-10-29得票数 0
回答已采纳
我想在我的@vue/cli 4.0.5 / Bootstrap 4.3 / jquery 3.4.1应用程序中使用https://isotope.metafizzy.co 我得到了codepen https://codepen.io/desandro/pen/nFrte示例，并尝试在我的vue.js页面中运行它。当我有row的时候，我遇到了一些渲染到vue的问题： // init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item', 我试着去做： var itemEl
浏览 62提问于2020-10-03得票数 0
回答已采纳
Croppie使用DIV容器而不是画布来进行裁剪。我正在尝试找出如何将此DIV中的结果裁剪图像保存到服务器上的目录中，例如通过保存按钮。
这是我的HTML代码...
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="S
浏览 3提问于2016-04-21得票数 7
回答已采纳
4回答
从jsp获取id
、、
我在jsp中有一个user bean。user具有一个name属性。我用user.name作为id of text元素-
<form:input type="textarea" id="${user.name}" .../>
我想从JavaScript得到这样的身份证明-
document.getElementById("user.name");
但这不起作用。有谁能告诉我如何从JavaScript或jQuery那里买到jQuery？
浏览 9提问于2015-04-03得票数 0
回答已采纳
5回答
我有以下Javascript对象：
var icecreams = [{
name: 'vanilla',
price: 10,
rating: 3
}, {
name: 'chocolate',
price: 4,
rating: 8
}, {
name: 'banana',
price: 1,
rating: 1
}, {
name: 'greentea',
price: 5,
rating: 7
}, {
name: &#
浏览 5提问于2016-02-10得票数 2
回答已采纳
2回答
为这个看似多余的问题道歉，但其他人似乎都在询问不同的情况，例如使用JQuery。我试图动态创建一个div并将现有的CSS样式应用于它，但div没有采用该样式。任何建议都是非常感谢的：
<style>
div.tile {
position: absolute;
overflow: hidden;
background: rgba(1,1,0,1);
width: 400px;
height: 400px;
}
浏览 1提问于2012-09-21得票数 0
回答已采纳
我有几个复选框和div。我想根据复选框切换div。我试着用三元切换div，但是它不像我预期的那样工作。下面是js。我不想使用jQuery。
function toggle(flavor){
var checkBox = document.getElementById(flavor)
checkBox === true ? document.getElementById(flavor+"Div").style.display = "block" : document.getElementById(flavor+"Div").style.di
浏览 1提问于2020-11-19得票数 0
回答已采纳
我在vanilla JavaScript中创建了一个<div>自定义函数，用于检查<div>(作为参数传递)是否有特定的class="newClass"(也作为参数传递)。
如果是false，则必须添加该类。
如果是true，则必须删除该类。
<div id="main">Hello</div>
JavaScript
var mainDiv = document.querySelector('#main');
function toggleClass( mainObject, str){
浏览 0提问于2019-08-04得票数 1
回答已采纳
我有一个JSON对象，假设一个数组中有500个对象。目前，为了找到我想要的对象，我使用了jQuery的" each“，并将每个对象的id与我正在查找的id进行了比较，如下所示： var desiredID = 500;
$.each(myObj.arrayOfObjects, function(k, oneObject){
if((oneObject.lineid * 1) === (desiredID * 1)){
// hooray! I have found my object
}
}); 有没有更好、更有效的方法？对象数组可能会变得令人印象深刻
浏览 10提问于2020-04-08得票数 0
回答已采纳
我观察到了一个场景，jQuery(document).on("click", "#sign-out", function(e)和document.getElementById('sign-out').addEventListener('click', function(e)的行为不同。
我试图绑定一个点击事件到签出页面链接，一旦用户登录，这个链接在应用程序的每个页面上都是可见的。
当我使用document.getElementById('sign-out').addEventListener('click&
浏览 0提问于2019-08-08得票数 0
当单击普通按钮时，我试图调用表单验证。这在jQuery上似乎很好，但对于普通的javascript就不行了。可以解释jquery的.submit()和javascript的.submit()方法之间的区别吗？或者我做错什么了？
<html>
<head>
<title>Form Submit</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<s
浏览 4提问于2012-07-19得票数 10
回答已采纳
我有一个div是这样的：
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
我基本上想要得到里面的div的ID。
我尝试过使用jQuery和经典的javascript来完成这个任务，但是它总是返回未定义的内容。
有人知道吗？谢谢
浏览 5提问于2013-09-27得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
