目录
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>
jQuery中的each静态方法和map静态方法区别
each静态方法默认的返回值就是遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
一起学习，一起进步 -.- ，如有错误，可以发评论
