初识 jQuery与原生js的区别

jQuery是一个JavaScript库，里面对原生js代码进行了封装，那么jQuery与原生js有什么区别呢？

这里我们通过一个简单的例子来感受一下~

我们经常会给一组元素绑定一个事件，让它们触发这个事件时执行相同的操作，这个时候用原生js我们需要通过循环给每个元素绑定事件，如：有3个 li ，我们想要鼠标经过哪个 li 就让哪个 li 的背景色变成红色。

用原生js实现如下：

<script>
//为了更好的跟jQuery对比，我们让DOM一加载完成就执行JS代码
window.addEventListener("DOMContentLoaded", function () {var lis = document.querySelectorAll("li"); //返回一个伪数组for (var i = 0; i < lis.length; i++) {lis[i].addEventListener("mouseover", function () {//排他思想for (var i = 0; i < lis.length; i++) {lis[i].style.backgroundColor = "";}this.style.backgroundColor = "red";});}
});
</script>

那么用jQuery是怎么实现的呢，我们来看看。

<script>$(function () {$("li").mousemove(function () {$("li").css("backgroundColor", "");$(this).css("backgroundColor", "red");});});
</script>

哎，有没有发现什么~~~

通过对比可以发现：
1、jQuery的顶级对象是$（jQuery的别称），相当于原生JavaScript中的 window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2、jQuery 的入口函数$(function() {});相当于原生js中的DOMContentloaded，帮我们完成了对DOM结构渲染完毕即执行内部代码的封装。
3、直接通过$("选择器")获取元素
4、jQuery的隐式迭代给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环。
5、jQuery可以使用css方法来修改简单元素样式

总之，简单理解jQuery就是一个JS 库，封装了很多预先定义好的函数在里面，比如动画animate、hide、 show ，比如获取元素等。这样我们就可以快速高效的使用这些封装好的功能，大大提高了我们的编码效率。

初识 jQuery与原生js的区别相关推荐

java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
JQuery对象和JS对象区别与转换|| 事件绑定入口函数样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
工作只用jquery，原生js知道就好了
前几天公众号有位小伙伴微信上问我说:听朋友说工作中全部用jquery,学好jquery,js只需要知道就好了,是这样的吗? 一听到这种的观点,我只想说:远离这样的朋友,简直误人子弟. 幸好这个公众号的 ...
JQuery和原生JS遍历数组和对象的对比
目录 1 遍历数组 1.1 JQuery遍历数组 1.2 原生JS遍历数组 2 遍历对象 2.1 JQuery遍历对象 2.2 原生JS遍历对象 1 遍历数组 1.1 JQuery遍历数组在JQue ...
基于SpringBoot+Gradle+Zxing+JQuery（原生JS）开发条形码/二维码扫描工具，且采用原生JS调用浏览器摄像头
零. 近日在做课设的时候,碰到一个比较有趣的玩意.就是在应用上添加扫描二维码/条形码的技术. 下面,介绍一下本文采用的一些框架: SpringBoot+Gradle+JPA为框架的后端系统 JavaS ...
【JQuery框架】JQuery对象和JS对象的区别和转换
目录 jQuery的概念 jQuery快速入门 1.下载jQuery 2.导入JQuery的js文件 3.jQuery的使用 jQuery对象和JS对象区别与转换 jQuery转为js js转为jQu ...
原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数
框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程框架这个广泛的定义使用的十分流行,尤其在软件概念 ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

初识 jQuery与原生js的区别

初识 jQuery与原生js的区别相关推荐

最新文章

热门文章