jQuery自学（五）——jQuery和原生Js区别

66 阅读 0 评论 44 点赞

我是靠谱客的博主靓丽戒指，最近开发中收集的这篇文章主要介绍jQuery自学（五）——jQuery和原生Js区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery和原生Js区别

jQuery的$符合产生冲突

jquery的each方法

jQuery的map方法

jQuery中的each静态方法和map静态方法区别

jQuery和原生Js区别

通过原生Js可以拿到DOM元素的宽高，通过jQuery不可以拿到DOM元素的宽高

因为原生Js和jQuery入口函数的加载模式不同

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行

jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕执行

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<img src="https://p.ssl.qhimg.com/dmfd/400_300_/t015ebff91c60cfe4c3.gif" />
		
		<script type="text/javascript">
			window.onload = function(ev){
				//1.通过原生js入口函数拿到DOM元素
				var img = document.getElementsByTagName("img")[0];
				console.log("onload",img);
				//2.通过原生Js可以拿到DOM元素的宽高
				var width = window.getComputedStyle(img).width;
				console.log("onload",width);
			}
			$(document).ready(function(){
				//1.通过jQuery入口函数拿到DOM元素
				var $img = $("img");
				console.log("ready",$img);
				//2.通过jQuery不可以拿到DOM元素的宽高
				var $width = $img.width();
				console.log("ready",$width);
			})
		</script>
	</body>
</html>

原生JS如果编写了多个入口函数，后面编写的会覆盖前面的

jQuery编写多个入口函数，后面的不会覆盖前面的

jQuery的$符合产生冲突

在程序中，如果使用了其他的框架，里面的$符会和jQuery产生冲突

解决方法：

1.释放$的使用权，以后就不使用$了，可以直接使用jQuery

jQuery.noConflict()

//释放jQuery的$使用权
jQuery.noConflict()
var $img = jQuery("img");

2.自定义一个访问符，以后用自定义的访问符去代替$

var nj = jQuery.noConflict();

//自定义一个访问符
var nj = jQuery.noConflict();
var $img = nj("img");

jquery的each方法

<script type="text/javascript">
	$.each(['a','b','c'], function(index,item) {
		console.log(index+' '+item);
	});
</script>

jQuery的map方法

原生Js的map遍历

<script type="text/javascript">

	var arr = [1,2,3,4,5,9];
	var obj = {0:1,1:3,2:5,3:8,4:9,length:5};
	//1.利用原生map方法遍历
	/*第一个参数：当前遍历到的元素
	第二个参数：当前遍历到的索引
	第三个参数：当前遍历的数组
	* */
	arr.map(function(value,index,array){
		console.log(value,index,array)
	})
</script>

和原生的forEach一样，不能遍历伪数组

<script type="text/javascript">
	var arr = [1,2,3,4,5,9];
	var obj = {0:1,1:3,2:5,3:8,4:9,length:5};
	//1.利用原生map方法遍历
	/*第一个参数：当前遍历到的元素
	第二个参数：当前遍历到的索引
	第三个参数：当前遍历的数组
	* */
	obj.map(function(value,index,array){
		console.log(value,index,array)
	})
</script>

jQuery的map方法

<script type="text/javascript">
	var arr = [1,2,3,4,5,9];
	var obj = {0:1,1:3,2:5,3:8,4:9,length:5};
	//1.利用原生map方法遍历
	/*第一个参数：要遍历的数组
	第二个参数：每遍历一个元素之后要执行的回调函数
	* */
	$.map(arr,function(value,index){
		console.log(value,index)
	})
</script>

<script type="text/javascript">
	var arr = [1,2,3,4,5,9];
	var obj = {0:1,1:3,2:5,3:8,4:9,length:5};
	//1.利用原生map方法遍历
	/*第一个参数：要遍历的数组
	第二个参数：每遍历一个元素之后要执行的回调函数
	* */
	$.map(obj,function(value,index){
		console.log(value,index)
	})
</script>