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

最新推荐文章于 2023-11-27 19:07:41 发布

沙滩de流沙

最新推荐文章于 2023-11-27 19:07:41 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41231928/article/details/86497489

本文详细比较了jQuery与原生JS在选中DOM对象、初始化方式、对象转换等方面的差异，展示了jQuery的简洁、高效及浏览器兼容性优势。

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>