jQuery基础（一）—— jQuery和原生js的区别

爱被打了一巴掌 2022-03-26 05:10 287阅读 0赞

jQuery是js+query的缩写，可以理解成是在原生js的基础上封装了很多方法，行成了一个js的库。

要说清楚jQuery和原生js的区别或者jQuery能给我们带来哪些好处，我觉得得先做个比较：

**（1）选中DOM对象**

**原生js：**

document.getElementsByClassName（“one”）\[0\];//根据ClassName来选择，选中class为one的所有元素，再选中第一个元素

document.getElementsByTagName（“div”）\[0\];//根据TagName来选择，选中标签为div的所有元素，再选中第一个元素

document.getElementId（“two”）;//根据Id来选择，选中id为two的元素

**jQuery：**

$(".one");

$("div");

$("\#two");

可以看出，jQuery的代码简洁、方便、清晰；另外，jQuery更是可以兼容多个版本的浏览器。

**（2）初始化方式(入口函数)**

**原生js：**  
window.onload = function（ev）\{  \}

**jQuery：**

第一种写法：

$(document).ready(function ( )\{

\});

第二种写法：

jQuery(document).ready(function ( )\{

\});

第三种写法：（推荐写法write less do more）

$(function ( )\{

\});

第四种写法：

jQuery(function ( )\{

\});

此处区别有两点：

①如果有图片，原生js是等图片加载完成才会执行，而jQuery在DOM框架加载完毕之后就开始执行了，不会等图片加载完毕。

②如果有多个入口函数，原生js中后面的入口函数会覆盖前面的入口函数，即只会执行最后一个入口函数；jQuery不一样，后面的入口函数不会覆盖前面的入口函数，每个入口函数都会执行，按顺序执行。

**（3）DOM对象转jQuery对象**

var dom = document.getElementById("IMOK");
    var $dom = $(dom);

DOM对象转jQuery对象以后就可以任意使用jQuery的方法。平时遇到的jQuery对象都是$()函数创建的，$()函数就是jQuery对象制造机器。

**（4）jQuery对象转DOM对象**

var $dom = $(“#cr”);//jQuery对象
    //第一种转换方式
    var dom1 = $dom[0];//DOM对象
    //第二种转换方式
    var dom2 = $cr.get(0);

**（4）jQuery代码注意事项**

<p onclick="demo();">imok</p>
    <script>
        function demo(){
            alert("Imok520");
        }
    </script>

上面的代码功能上使用没有问题的，但是将js的代码和纯HTML的代码写在了一起，应该将网页内容和行为事件分离，推荐下面的写法：

<p class="demo">imok</p>
    <script>
        $(".demo").click(function(){
            alert("Imok520");
        })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜

相关知识点 $("li").mouseenter()和 $("li").mouseleave()与("li").hover() $(this).addClas...

小鱼儿/ 2024年04月17日 23:14/ 0 赞/ 51 阅读

相关 js和jQuery的each方法区别

js和jQuery的each方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

àì夳堔傛蜴生んèń/ 2023年10月05日 14:43/ 0 赞/ 16 阅读

相关 js 原生实现 jQuery ajax

js 原生实现 jquery ajax 主要依靠 XMLHttpRequest 对象，该对象使用如下 1、介绍创建 XMLHttpRequest 对象的语法：

我会带着你远行/ 2023年02月13日 11:13/ 0 赞/ 31 阅读

相关 jquery和$_jQuery基础

![73fdee308aa1c7cd09aa6532f967cb12.png][] jQuery简介 JavaScript是一种烦琐和复杂的语言。如果用JavaS

绝地灬酷狼/ 2023年01月10日 13:17/ 0 赞/ 176 阅读

相关原生JS和jQuery的入口函数的区别

原生JS和jQuery的入口函数的区别 1.原生JS和jQuery入口函数加载模式的区别 JS入口函数会在DOM元素加载完毕并且图片也加载完毕之后再执行 j

布满荆棘的人生/ 2022年10月27日 05:22/ 0 赞/ 253 阅读

相关 js原生ajax与jquery的ajax的用法区别

什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术。通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据 XMLH

刺骨的言语ヽ痛彻心扉/ 2022年07月16日 06:09/ 0 赞/ 233 阅读

相关 js和jQuery的区别

> 一、本质区别： > > 1.js都知道是网页脚本语言，类似java是一种开发常用语言； > > 2.jQuery是基于js语言封装出来的一个前端框架； > > 所以最

短命女/ 2022年06月02日 07:37/ 0 赞/ 261 阅读

相关 jQuery_原生JS局限性

原生JS还是有一定的局限性 1.事件覆盖比如说： window.onload = function(）{} 一个页面只能有一个，再写一个window,onlo

女爷i/ 2022年05月22日 12:18/ 0 赞/ 169 阅读

相关 jQuery基础（一）—— jQuery和原生js的区别

jQuery是js+query的缩写，可以理解成是在原生js的基础上封装了很多方法，行成了一个js的库。要说清楚jQuery和原生js的区别或者jQuery能给我们带来哪些

爱被打了一巴掌/ 2022年03月26日 05:10/ 0 赞/ 288 阅读

相关 jquery.js和jquery.min.js的区别

jquery.js和jquery.min.js的区别 jquery.js是完整的未压缩的jQuery库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上

骑猪看日落/ 2021年09月16日 04:48/ 0 赞/ 497 阅读