jQuery和dom的区别与互相转化、jQuery与原生js的入口函数区别和jQuery（）函数介绍

最新推荐文章于 2022-12-25 18:20:22 发布

YF-SOD

最新推荐文章于 2022-12-25 18:20:22 发布

阅读量237

点赞数 1

分类专栏： # jQuery JavaScript库文章标签： jQuery和dom转换 jQuery入口函数的区别 jQuery（）括号中的参数 jQuery介绍原生js和jQuery入口函数

本文链接：https://blog.csdn.net/AIWWY/article/details/114282981

版权

JavaScript库同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

如何进行相互转换

jQuery入口函数的多种写法

jQuery入口函数和js原生入口函数的区别

首先jQuery（）相当于是一个一个函数，通常用jQuery（）来选中dom对象，然后$可以替换jQuery，即可以用$()。然后dom节点上原生的方法和jQuery对象上的方法是不能交换使用，所以我们要知道如何进行互相转换（以下jQuery都可以用$符号替换）。

如何进行相互转换

$(dom)是将括号内的dom节点封装为jQuery的对象，之后可以通过这个对象调用jQuery上的方法，这个jQuery对象是一个类数组，类数组上存储了原生的dom节点，所以转换有2种方法。

$(dom/CSS选择器)[num];通过后面加上数组中选取内容的方法，即方括号加序号将类数组中对应序号的dom节点取出。
$(dom/CSS选择器).get(num);通过jQuery对象上的get方法，将类数组对应num序号的dom节点取出。

jQuery入口函数的多种写法

$(document).ready(function(){}
jQuery(document).ready(function(){}
$(function(){}) 推荐写法
jQuery(function(){})

jQuery入口函数和js原生入口函数的区别

js原生入口函数window.onload =function(ev){}与$(document).ready(function(){}的区别：

编写多个入口函数时，js原生的入口函数后写的会覆盖先写的，而jQuery的不会覆盖会依次按顺序执行。
加载区别（验证失败）

下面是验证过程以及结论（这个是听网上课程演示了，但自己尝试失败）。代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.0/jquery.js"></script>
</head>
<body>
	<img src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1607569674685.png" alt="">
	<script type="text/javascript">
		window.onload = function (ev) {
			var img = document.getElementsByTagName('img')[0];
			console.log(img);
			var width = window.getComputedStyle(img).width;
			console.log(width);
		}
		$(document).ready(function () {
			var $img = $('img');
			console.log($img);
			var $width = $img.width();
			console.log($width);
		})
	</script>
</body>
</html>

网上演示前需要删除网页中的缓存图片，因为浏览器为了加载更快每次的运行的图片会有缓存记录，下面是删除过程。

，

按照网上的删除后运行代码，jQuery的入口函数中不会打印出宽度，所以得出结论jQuery的入口函数是在doom树生成之后，图片加载之前，而原生js的可以，所以原生js的是在图片加载后。但是我这里即使删除了还是能打印出宽度，感觉可能是jQuery版本更新或者没有完全删除缓存的图片问题。如果有大佬知道问题的希望能告知！