17

1-jquery 中的$.each 和$(选择器).each()有什么区别？

1.$(selector).each(function(index,element))

作用：在dom处理上面用的较多

示例：

html部分文档

<ul id="each_id">
<li>Coffee</li>
<li>Soda</li>
<li>Milk</li>
</ul>

 

js遍历函数：

function traversalDOM(){
$("#each_id li").each(function(){
      alert($(this).text())
    });
}

输出结果：

2.$.each(dataresource,function(index,element))

 

作用：在数据处理上用的比较多，主要还是用来处理后台传到前端的数据的 

示例：

此处没有html代码，只有js代码，如下：

function traversalData(){
var jsonResourceList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"}]';
if(jsonResourceList.length >0){
$.each(JSON.parse(jsonResourceList), function(index, obj) {
    alert(obj.tagName);
});
}
}

输出结果：

3.最终结论：

在遍历DOM时，通常用$(selector).each(function(index,element))函数；

在遍历数据时，通常用$.each(dataresource,function(index,element))函数。

2-jquery 中的$.each 和 js 中的 forEach()有什么区别？

  1.在遍历数组时：

                回调函数中参数的位置不一样，forEach中为第一个参数为ele，第二个为index。each中第一个为index，第二个为ele；

                回调函数中是否有返回值，forEach中没有返回值，each有返回值，返回被遍历的数组

    2.遍历对象

                forEach不能遍历对象，可以使用for in;

                而each可以通过jq的讲台方法来遍历，即$.each(obj,function(key,value){})

3-window.onload 和$(docuMent).ready() 有什么区别？

1.执行时间
在一般的网页加载的顺序：

    window.onload必须等到页面内包括图片的所有元素和资源加载完毕后才能执行，也就是上述图片的时间点2；
     $(document).ready()是DOM加载完毕后就执行，不必等到整个网页资源加载完毕，也就是在上述图片的时间点1。
            所以，使用document.ready()方法的执行速度比window.onload的方法要快。

2.编写个数不同
    $(document).ready()可以同时编写多个，并且都可以得到执行
    window.onload不能同时编写多个，如果有多个window.onload方法，只会其中执行一个
(注：除非通过对onload事件进行卸载重新添加事件的方式添加多个需要执行的方法，示例如下：)

var obj = document.body.onload;//获取已注册的执行事件
document.body.onload = function() { return false; };//卸载onload事件
window.attachEvent("onload", obj);//重新注册 attachEvent注册的事件按照先注册后执行规则
window.attachEvent("onload", function() {
objInit2(par1,par2);
});//注册新事件
3.简化写法
    window.onload没有简化写法
     $ (document).ready(function(){ })可以简写成$(function(){方法体 });又因为JQuery的默认参数是document，则还可以写成$().ready(function{ })

可以先去理解下DOM在另一篇文章中:https://blog.csdn.net/daponi/article/details/94597948

了解浏览器的渲染规则：
1、解析HTML

2、加载外部脚本和样式表(JS、CSS等其他代码)

3、解析并执行脚本文档代码

4、构造HTML的DOM模型

5、加载图片以及其他非文字的媒体资源

6、网页加载完毕
例子：
html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕

      了解浏览器的渲染规则后，如果需要获取DOM绑定元素的属性值时，最好使用window.onload,因为他是在所有元素加载完毕才执行。如

      如果使用$(document).ready，只要 DOM 就绪就会被执行，但是DOM绑定的元素属性没有加载，此时元素的关联文件未下载完，所以属性不生效。

4-jquery 实现链式编程的原理是什么？

1. 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。
   var 对象 = {
   方法名:function(){
   // …
   return this; // 实现链式编程的核心this
   }
   }
2. 在方法中，js提供一个this的关键字，表示当前对象。