开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

相关搜索:Javascript charCodeAt和fromCharCode返回的值不同 Javascript/Jquery抓取不同数字的ID JQuery或vanilla Javascript中的DOM Mutation事件 jQuery或vanilla JS -为元素的背景颜色返回r，g&b值？Vanilla JavaScript -仅选择带有事件冒泡的特定元素“this”上传前的vanilla javascript预览视频文件-无JQUERY 从jquery到vanilla javascript的google验证码以不同的顺序迭代jQuery元素使用javascript vanilla从dom的元素水平滚动。使用jQuery和for循环JavaScript创建html元素

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery中不同元素的作用

innerHeight()- 返回元素的高度（包括内边距）。...outerWidth() outerHeight() jQuery 遍历 jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。...以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。向上遍历 DOM 树 parent() - 返回被选元素的直接父元素。...向下遍历 DOM 树 children()- 返回被选元素的所有直接子元素。 find()- 返回被选元素的后代元素，一路向下直到最后一个后代。...noConflict() 方法 jQuery 使用符号作为jQuery的简写。如果其他JavaScript框架也使用符号作为简写怎么办？

1.7K0 0

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...：是该元素的显示（可见）的内容与该元素实际的内容的距离（滚动条滚去的高度） jQuery中： ?...元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。...、内边距和内容 outerHeight(true) ：获得整个元素的高度，包括外边距、边框、内边距和内容注意： 1）ele.css("height") ：返回带有完整单位的字符串（例如400px），若运算需要

2.9K0 0

jquery 与javascript 获取元素尺寸大小的对比

jquery获取尺寸的方法 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。...innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。...outerHeight() 方法返回元素的高度（包括内边距和边框）。 js获取尺寸的方法 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 Window 尺寸有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。...offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。

1.8K3 0

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...(offset()方法) var offset = obj.offset(); 获取对象元素的位置，分别是元素的top和left，调用方法是：offset.left和offset.top，可知当前对象的左部和顶部位置...3，获取对象元素的宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象的右下角位置，创建新窗口的左部位置。...4，获取对象元素的高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象的右下角位置，创建新窗口的顶部位置。...="text/javascript"> $(document).ready(function(){ alert($(window).height());//浏览器当前窗口可视区域高度

2.3K4 1

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID，反之也行！

jquery取得iframe中元素的几种方法在iframe子页面获取父页面元素代码如下: $('#objId', parent.document); // 搞定......["iframeName"].document).find("#testId").html() 用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!...在index.html里面借助jQuery访问: JavaScript代码 $("#koyoz").contents().find("#test").css('color','red'); 此代码的效果和...JS直接访问是一样的,由于借助于jQuery框架,代码就更短了....收集网上的一些示例：用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.

8.3K9 0

javascript和jQuery修改a标签的href属性

a 标签的 href 属性值如何修改，下面分享一下使用 javascript 或 jQuery 的实现方法。 ...JavaScript： document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById...("myId").href = "www.xxx.com"; jQuery： $("#myId").attr("href","www.xxx.com");

4.3K1 0

JavaScript、Jquery获取屏幕的宽度和高度

在日常的项目中经常需要获取屏幕的宽度或者高度，简单记录一下： Javascript方法获取： document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //网页可见区域高 document.body.offsetWidth //网页可见区域宽(包括边线的宽) document.body.offsetHeight //网页可见区域高(包括边线的高) document.body.scrollWidth... //网页被卷去的左 window.screenTop //网页正文部分上 window.screenLeft //网页正文部分左 window.screen.height //屏幕分辨率的高 window.screen.width... //屏幕分辨率的宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取： ($(...;//浏览器当前窗口文档body的高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin

5.2K0 0

JS和JQuery获取当前元素的兄弟及父级等元素的方法

) jQuery.parents(expr)，类似于 jQuery.parents(expr) ，但是是查找所有祖先元素，不限于父元素 jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点...这个方法和 children() 的区别就在于，包括空白文本，也会被作为一个 jQuery 对象返回， children() 则只会返回节点 jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点...jQuery.prevAll()，返回所有之前的兄弟节点 jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点 jQuery.nextAll()，返回所有之后的兄弟节点 jQuery.siblings...，而 jQuery.find()，的返回结果，不会有初始集合中的内容，比如 $("p").find("span") ，是从元素开始找，等同于 $("p span") JS获取：...; //获得s的最后一个子节点 JS获取节点父级，子级元素：JS的方法会比JQUERY麻烦很多，主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素：空的text元素，目前IE也是这样 <div

12.4K1 0

jquery中dom元素的attr和prop方法的理解

一、背景　　在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候，经常不知道dom元素的attr和prop方法到底有什么区别？...二、举例说明　　1.我们经常会在自己的页面中使用a标签来进行链接到不同的页面 1 <a id="link" href="http://www.baidu.com" target="_black" class...a标签中的固有属性中并不包含该属性。这些属性被称为dom元素的自定义属性，这种情况下，我建议使用attr方法。此时若使用prop方法进行设置和获取该属性的值时就会返回undefined值。　　...、radio、select等元素的选中属性"checked"和"selected"，这些属性也是dom元素的固有属性，因此使用prop方法才能正确的进行获取和设置。...以上是个人理解，欢迎提出不同意见哈~

1.2K2 0

Vanilla JS——最轻快的JavaScript框架

简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!...事实上,Vanilla JS的使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。...javascript 框架，浏览器向站点发送请求前就已经把Vanilla JS加载在浏览器里了。...使用Vanilla JS只需在应用的HTML里加入这行：当你部署你的应用的时候，使用这个更快的方法：没错！...性能比较根据ID获取DOM元素框架代码次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId

5.9K4 0

返回数组中出现最多的元素和次数 reduce方法

使用reduce函数 prev初始值设置为一个空对象 {} 遍历整个数组arr，以当前遍历的元素作为对象prev的属性，查询对象中是否存在该属性，如果存在，将该属性值(也就是该元素出现的次数)加1，如不存在...prev[curr]++ : prev[curr] = 1 判断当前的元素次数和最大元素出现次数，如果大于最大元素次数，就将该值赋值给最大元素次数 const arr = [1,1,2,3,4,4,4,4,4,5...] let maxNum = null // 出现最多的元素 let maxCount = 1 // 元素出现的最大次数 const obj = arr.reduce((prev,curr) => {

6223 0

javascript中元素的scrollLeft和scrollTop属性说明

javascript中元素的scrollLeft和scrollTop属性的参数意义： scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离。...他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。。。...简单了说：元素会从scrollLeft的位置显示该元素的内容。...假如不懂的话，你就把元素的所有内容都在纸画出拉，元素的最左边为0,显示的宽度为10,那就就能看到0-10的位置，假如scrollLeft为20的话，你就能看到从20的位置开始显示，向后显示10个那么scrollTop...和scrollLeft一样，只不过变成了垂直了而已。

1.4K2 0

PHP分割两个数组的相同元素和不同元素的两种方法

循环取出数据 1、for循环一个A数组； 2、使用array_search判断元素是否存在B数组中； 3、存在后unset A和B中的该元素； 4、将该相同元素添加到sameArr数组中具体代码：...返回结果是我们预期的结果。...2.2、方案二：利用PHP内置函数array_diff和array_intersect 同样也可以使用array_diff分割，获取在A中而不在B中的元素或者在B中而不在A中的元素，但是无法获取相同元素...，要获取相同元素的话，需要使用。...函数大小在千数级别时两者的效率是差不多的代码如下：使用array_search和for循环执行 <?

2.2K4 0

jQuery 和 json 简单例子（注意callback函数的处理！！）（servlet返回json，jquery更新，java json）

这个例子是后台获取某个目录的所有文件信息，前台网页显示。.../js/jquery-1.5.1.min.js"> $(document).ready(function(){...$.getJSON('json.txt',function(data){ //遍历JSON中的每个entry 　　　　　　　　　　　　//因为是用JSONArray...返回的串，格式是{{"abc":123},{"abc":456}}，所以要用each 　　　　　　　　　　　　//如果用JSONObject返回的串，格式为{"abc":123}就不要用each这一层了...url,function(data){ $('#title').nextAll().remove(); //遍历JSON中的每个

8153 0

【说站】JavaScript for-in和for-of的不同点

JavaScript for-in和for-of的不同点不同点 1、for-in语句按原始插入顺序迭代对象的可枚举属性。for-in将继承链中的所有对象属性重复，因此需要更多的时间。...2、for-of语句只经历可迭代对象的数据。...obj[key]) } for-of： var arr = [{name:'bb'},5,'test'] for (item of arr) { console.log(item) } 以上就是JavaScript...for-in和for-of的不同点，希望对大家有所帮助。

2502 0

javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）

今天用到 textarea 的取值，顺便整理一下它的取值和赋值。...获取 textarea 的值通过 element.value 和 element.innerHTML 获取， .value 亲测有效。... { var info = text.value;//方法一 var info = text.innerHTML;//方法二 console.log(info); } jQuery...获取 textarea 的值 textarea 是表单元素，所以 val() 可用；它又是闭合标签，所以 html() 和 text() 可用。...//javaScript赋值 text.innerHTML = "你好，地球！"

12.7K2 0

如何在Nuxt应用程序中加载外部脚本

</script...我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。使用vue-meta 您可以使用vue-meta的head()方法插入脚本。幸运的是，Nuxt已预装了vue-meta。...这会将脚本和样式都插入页面的头部。...，则可以使用Vue的安装生命周期通过DOM vanilla JS方式插入它： // pages/some/page.vue export default { mounted() { const...幸运的是，Nuxt提供了一种使用vue-meta的简便方法。另外，还可以使用Vue的mounted生命周期方法修改DOM以便自己插入。后者适用于vanilla(原生)Javascript。谢谢阅读。

4.8K1 0

如何做到 jQuery-free？

jQuery是现在最流行的JavaScript工具库。据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。...2006年，jQuery诞生的时候，主要用于消除不同浏览器的差异（主要是IE6），为开发者提供一个简洁的统一接口。相比当时，如今的情况已经发生了很大的变化。...下面就探讨如何用JavaScript标准语法，取代jQuery的一些主要功能，做到jQuery-free。 ?...var $ = document.querySelectorAll.bind(document); 这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和...$("#picture").src = "http://url/to/image"; 需要注意，input元素的this.value返回的是输入框中的值，链接元素的this.href返回的是绝对URL

1.2K4 0

imagesLoaded – 检测网页中的图片是否加载

imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度，还可以绑定自定义事件。...可以结合 jQuery、RequireJS 使用。...imagesLoaded( { // options... }, function() { // images have loaded } ); .imagesLoaded() 返回一个...jQuery递延对象。...JavaScript 使用示例： // element imagesLoaded( document.querySelector('#container'), function( instance )

1.6K3 0

Github 移除 JQuery 的过程

未来几年的Web标准多年来，GitHub成长为一家拥有数百名工程师的公司，并逐渐组建了一个专门的团队，负责为web浏览器服务的JavaScript代码的大小和质量。...增量解耦即使有了最终目标，我们知道仅仅分配所有资源是不可行的，我们必须重写从jQuery到vanilla JS的所有内容。...许多旧代码都与pjax和facebox jQuery插件的外部接口有显式耦合，因此我们保持了它们的接口相对相同，而在内部使用vanilla JS替换了它们的实现。...因此，即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下，我们能够完全删除某些遗留行为，而不必在vanilla JS中重写它们。...自定义元素近年来掀起了一股热潮的一项技术是自定义元素：浏览器自带的组件库，这意味着没有额外的字节供用户下载、解析和编译框架。自2014年以来，我们已经基于v0规范创建了一些自定义元素。

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭