前端必备基础

javascript/jquery

浏览数:129

2019-6-14

AD:资源代下载服务

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

1、包含与被包含
A.contains(B)检测B节点是否是A节点的子节点,返回布尔值
2、父与子
获取父节点:node.parentNode,node.parentElement,两者区别在于后者只能获取元素
获取子节点:childNodes(NodeList对象存在的子节点集合),firstChild,lastChild
3、同辈(兄弟节点)
nextSibling,previousSibling
4、Element Travel API给DOM添加的属性
childElementCount,firstElementChild,lastElementChild,nextElementSilbling,previousElementSibling,他们与之前的方法的区别是多了Element,保证只返回元素节点,而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素之间的空白符当文本节点返回
5、children属性
与childNodes不同的地方在于:children只包含元素子节点

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

1、创建新节点
createDocumentFragment()  创建一个DOM片段
creatElement()   创建一个具体的元素
creatTextNode()   创建一个文本节点
2、添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()  在已有的子节点前插入一个新的子节点
3、查找
getElementsByTagName()  通过标签名称
getElementsByName()  通过元素的name属性的值
getElementById()  通过元素id,唯一性

3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。

1、关于事件流
(1)ie事件流:事件冒泡
  由事件的目标(event.srcElement)接受事件,然后逐级向上(例如:下一个为包含event.srcElement的节点传递事件,直到文档节点document)
 (2) 其他浏览器支持的另一种事件流:事件捕获
  与事件冒泡正好相反,文档节点document先监听到事件,然后把事件逐级向下传递事件,直到节点目标节点event.target
 (3) dom事件流
   dom2级事件规范的事件流综合了以上两种,把事件流分为了以下三个阶段:
   
   一、事件捕获阶段:不涉及事件目标,或者说这个阶段在目标之前就结束了
   二、处于目标阶段:被看作冒泡阶段的一部分,所以可以在冒泡阶段在目标事件上操作事件
   三、事件冒泡阶段
  (4) 规范和浏览器实现的差别
    dom2级事件规范的捕获阶段,事件从文档节点document开始传播,现代浏览器大多数是从window对象开始传播事件的
    dom2级事件规范捕获阶段不涉及事件目标,现代浏览器大多数都在这个阶段包含事件目标
2、如何使用事件?以下几种用来响应事件的事件处理程序
   html事件处理程序|dom0级事件处理程序|dom2级事件处理程序|ie的事件处理程序
   html事件处理程序:
     指定事件:<button type="button" onclick="alert('响应事件的处javascript代码,可以用全局的函数')">Click Me!</button>
     优缺点:简单,但是与HTML代码紧密耦合,更改不方便;
     删除事件:同DOM0的删除事件处理方式;
   dom0级事件处理程序
      指定事件:document.onclick = function(){alert("document has been clicked")};
      优缺点:简单且跨浏览器
      删除事件:document.onclick = null;
      实质: 为元素指定方法(栗子中为document指定onclick方法),移除方法,所以其处理程序是在元素的作用域运行的;
   dom2级事件处理程序:
       指定事件:addEventListener("引号括起来的事件名", 触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值)
       栗子:var funA = function(){alert(" DOM2级事件处理程序")};
      document.addEventListener("click", funA, false);
      删除事件: document.removeEventListener("click", funA, false);
      如果指定的处理程序是匿名函数则不能删除,因为没有函数名;
      优缺点: 可以添加多个监听事件,缺点必须指定函数名才能删除
   ie事件处理程序(IE11以下,IE11及Edge用的DOM2级事件处理程序)
       指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
       删除事件: detachEvent("onclick", funA);
       如果指定的处理程序是匿名函数则不能删除,因为没有函数名;
       优缺点:可以添加多个监听事件,缺点必须指定函数名才能删除
3、ie和标准dom事件模型之间存在的差别
   这里的IE是IE11以下;
   参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on",且没有第三个参数,因为IE事件模型只支持冒泡事件流;
   事件处理函数作用域的区别: IE中事件处理程序处于全局作用域,其内的this会指向window;而用DOM(0或2)级事件的事件处理程序的作用域是元素作用域,其内的this指向其所属的元素
   例:
   document.addEventListener("click", function(){ 
        if(this == document){
          alert("此时this指向document");
        }
      }, false);
   事件对象event的属性方法的差别
   IE                     DOM
   cancelBubble = true    stopPropagation() //停止冒泡
   returnValue = false    preventDefault() //阻止元素默认事件
   srcEelement            target //事件目标

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

1、关于XMLHttpRequest
  作用:提供了网页加载后在后台与服务器通信的方法;实现AJAX通信;
  创建: var xhr = new XMLHttpRequest();//不适用于IE7之前的版本,其他低版本IE可通过 ActiveXObject构造;
  readyState,可取的值见图
  对象事件: readyState的值的改变会触发readyStatechange事件;错误会触发error事件;
  优缺点: 在不重新加载页面的情况下更新网页;
  XMLHttpRequest 2级:
  FromData对象:用来序列化表单或者创建与表单格式相同的数据;其实例可直接传给send()方法使用;
  例:
  var form1 = document.forms[0];
  xhr.send(new FormData(form1));
2、一次GET请求分析,并检测执行过程
   异步GET
   var xhr = new XMLHttpRequest();

xhr.onerror = function(){alert(“我出错啦”)};
xhr.onreadystatechange = function(){

switch(xhr.readyState){
  case 0 : alert("未初始化,及还未调用open方法");
           break;
  case 1 : alert("启动,未调用send方法");
           break;
  case 2 : alert("发送,未收到响应");
           break;
  case 3 : alert("接受,取得部分数据");
           break;
  case 4 : if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
            alert(xhr.responceText);
           };
            break;
  default : alert("are you kidding?");
  }
};
xhr.open("get", "url", true)//启动一个请求,未发送
xhr.send(null);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回
XMLHttpRequest.readyState可取的值:

5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前。如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明。确定了正确的Doctype,xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明,它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。为了获取正确的Doctype声明,关键就是让dtd与文档所遵循的标准对应。例如:假定文档遵循的是xhtml 1.0 strict,那么文档的Doctype声明就应该是相应的dtd,如果Doctype声明指定的是xhtml dtd,但文档包含的依旧是html标记就是不恰当的。类似的,如果文档包含的是xhtml 1.0 strict标记,但是Doctype声明指定是html dtd也是不恰当的。
一、选择什么样的DOCTYPE?
xhtml 1.0中有3种dtd声明可以选择,过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面我们来分别介绍:
1、过渡的:一种要求不很严格的,允许在html中使用html 4.01的标识(符合xhtml语法标准),过渡的dtd写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、严格的:一种要求严格的dtd,不允许使用任何表现层的标识和属性,严格的dtd写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、框架的:一种专门针对框架页面所使用的dtd,当页面中含有框架元素时,就要采用这种dtd,写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

PS:使用严格的dtd来制作页面当然是最理想的方式,但是对于还没有深入了解web标准的网页设计者,比较适合用过渡的dtd,因为这种dtd还允许使用表现层的标识、元素和属性,比较适合大多数的网页制作人员(当然量力而为了!)
二、什么是标准模式与混杂模式?
不同文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScript的解释执行。
1、文档模式目前有四种:
混杂模式(quirks mode)//让IE的行为与(包含非标准特性的)IE5相同
标准模式(standards mode)//让IE的行为更接近标准行为
准标准模式(almost standards mode)//这种模式下的浏览器特性有很多都是符合标准的,不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时问题最明显)。
超级标准模式 //IE8引入的一种新的文档模式,超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。
ps:
总的来看,混杂模式让IE像IE5,标准模式使用IE7的呈现引擎,而超级标准模式则是IE8的默认文档模式。
2、两种模式间的差异
对于这两种模式之间的差异,最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时,在标准模式中使用的是正确的盒模型,在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。

3、如何触发两种模式
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
触发严格模式:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

触发混杂模式

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> 

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

IE8关闭超标准模式

<meta http-equiv="X-UA-Compatible" content="IE=7" />
content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。

6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
1、w3c盒模型(标准盒模型)
通过在文档顶部加doctype声明就会按.W3C盒模型显示;整体见下图


2、ie8以下版本的浏览器中的盒模型(ie盒子模型)
IE8以下浏览器的盒模型中定义的元素的宽高包括内边距和边框
设置box-sizing:border-box可以让宽度高度包含border盒padding

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
1.块级元素:每个块级元素默认占一行高度,若有块级元素则同行无法再添加其他元素(float浮动除外)
特点:高度行高以及外边距内边距都可控制 宽度默认100% 可以容纳内联元素及块元素
2.行内元素:可以和其他元素都在一行上.
特点:宽度就是它的文本或图片的宽度,不可改变 内联元素只能容纳文本或者其他的内联元素 设置宽度width无效 设置高度height无效,可通过line-height来设置 设置margin只有左右有效,上下无效 设置padding只有左右padding有效,上下无效
3.行内块状元素:综合了行内元素与块状元素的特性,但是各有取舍
特点:不自动换行 能够识别宽高 默认排列方式从左到右
4.块级元素有哪些:div | dl(定义列表) | h1(h开头系列) | hr | menu | ol | p | table | ul
5.行内元素有哪些:a | b | br | em | i | img | input | label | select | span | strong|sub | textarea | u
6.行内块状元素有哪些:button | del | iframe | ins | map | object

块级元素,用CSS中的display:inline;属性则变为行内元素
行内元素,用CSS中的display:block;属性则变为块级元素
影响:周围元素显示在同一行或换行显示,根据具体情况调整样式

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置,left:往左浮动,right:往右浮动
浮动元素引起的问题:
(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决方法:使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}  /* for IE/Mac */

9、HTML与XHTML —— 二者有什么区别,你觉得应该使用哪一个并说出理由。
主要区别:

 XHTML 元素必须被正确地嵌套
 XHTML 元素必须被关闭,空标签也必须被关闭,如 <br> 必须写成 <br />
 XHTML 标签名必须用小写字母
 XHTML 文档必须拥有根元素
 XHTML 文档要求给所有属性赋一个值
 XHTML 要求所有的属性必须用引号""括起来
 XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
 XHTML 文档不要在注释内容中使“--”
 XHTML 图片必须有说明文字
 XHTML 文档中用id属性代替name属性

10、JSON —— 作用、用途、设计结构。
作用用途:
可以转换为任意语言中的对象,json在开发中的主要用来数据的交互。
json和js对象格式一样,只不过json字符串中的属性名必须加双引号其他得和js语法一致;是一种基于文本,独立于语言的轻文本交换格式,易于人的阅读和编写,也易于机器的解析和生成
用法:
json写法(结构):

var json1 = {
    "username":"smally",
    "age":20
}


var json2 = [
    {"username":"smally","age":20},
    {"username":"liuteng","age":20},
    {"username":"lizhongshuo","age":20}
]

json中允许的值,

    1.字符串
    2.数值
    3.布尔值
    4.null
    5.对象
    6.数组

json转化为js对象用parse方法

var o=JSON.parse(json);
console.log(o.name);

js对象转化为json

JSON.stringify()

作者:小鱼儿