ECMAScriptWeb 前端面试题整理(不定时更新)

        protected void Page_Load(object sender, EventArgs e)
        {
            string username = string.Empty;
            if (Request.HttpMethod.ToUpper().Equals("GET"))
            {
                username = Request.QueryString["username"];
            }
            else {
                username = Request.Form["username"];
            }
            Response.Clear();
            string str = "姓名:"+username+"<br />时间:"+DateTime.Now.ToString();
            Response.Write(str);
            Response.End();
        }
function two(){
  var i = 1;
}
console.log(i);

22.编辑一个数组去重的法子

经过JavaScript代码大家得以看来有别于如下:

21.Javascript的同源策略

The is the first click event listener!
The is the second click event listener!

ECMAScript 1

<script>
    var arr = [1,2,3,4,5];
    console.log(arr.pop()); // 5
    console.log(arr.join(","));// 1,2,3,4
    console.log(arr.push("Hello","Luka")); // 6
    console.log(arr.join(",")); // 1,2,3,4,Hello,Luka
    console.log(arr.unshift("Hi","Luka")); // 8
    console.log(arr.join(",")); // Hi,Luka,1,2,3,4,Hello,Luka
    console.log(arr.shift()); // Hi
    console.log(arr.join(",")); // Luka,1,2,3,4,Hello,Luka
</script>

a.阻止事件冒泡,使成为捕获型事件触发机制:

h.IE6下怎么图片下方有空当爆发

    <div>
        <label for="txt_username">姓名:</label>
        <input id="txt_username" type="text" />
        <input type="button" value="Get" id="btnGet" />
        <input type="button" value="Post" id="btnPost" />
    </div>
    <div id="result"></div>
<input type="button" id="btnDelete" value="插入主公" />
<ul id="names">
    <li>关羽</li>
    <li>张飞</li>
</ul>
<script>
    document.getElementById("btnDelete").onclick = function () {
        // 首先请创建一个 LI 节点
        var newItem = document.createElement("li");
        // 然后创建一个文本节点
        var textNode = document.createTextNode("刘备");
        // 然后向这个 LI 节点追加文本节点
        newItem.appendChild(textNode);
        // 最后在列表中的首个子节点之前插入此 LI 节点
        var names = document.getElementById("names");
        // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
        names.insertBefore(newItem,names.childNodes[0]);
    }
</script>

特性:

this 触发该事件的目标。

此例中的c
实际上就是闭包函数b,它一起运行了五遍,第四次值为1,第二次值为2,那就印证i
平昔在内存中,而不是率先次a函数调用之后就自动清除了。

The compatMode is CSS1Compat.The Element's width is 122 px and it's height is 82 px 

 

连带链接:js中的事件委托或是事件代理详解

 

  

一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div></div>
如果不让它默认为19PX。而是0PX的话
解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释,<div><!– –></div>
3.css里面加上line-height:0;然后div里面加上&nbsp;,<div>&nbsp;</div>

简言之差异说明如下:

一样,咱们大约试验下:

俺们再来通过事件委托来完毕那一个例子,HTML代码一样(大家只必要在本来的功底上添加li元素事件就行了,不必要改变事件委托事件):

其它注意 iAdd = function(){
i++; } ,那里的iAdd
是全局变量,且它的值为匿名函数,其实也是一个闭包。

再来看一个例子(例子2):

 

1.Get请求会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。
而Post请求是将数据在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分割符方式,可隐藏参数,传递大批数据,比较方便。
2.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异.
3.get安全性非常低,post安全性较高。
4.应用不同。一般我们使用get进行简单的数据查询操作,比如通过产品ID查询对应的产品信息;而使用post进行复杂的增删查改数据操作,比如把产品添加到购物车。
事件流执行顺序不一样;
参数不一样;
this 指向不一样。

c.通过爱抚变量的平安完毕了JS私有属性和个体访问(不可以被表面访问)。

b.将函数内部变量的值始终维持在内存中

Object number function boolean underfind symbol(ES6)

缺点:HTML页面不单一,文件体积太大,不便民蜘蛛爬行,中期维护不便民。

相关链接:多样重大浏览器内核简介(Trident/Gecko/webkit/Presto)

 

那规律就是使用事件冒泡,把事件加到父级元素上,触发执行作用。

而我辈点击第四个div文本时,控制台会呈现:

官方的分解是:闭包是一个兼有不少变量和绑定了这一个变量的环境的表明式(寻常是一个函数),因此这么些变量也是该表达式的一部分。

c. 当子元素浮动且未知低度时,怎么使父容器适应子元素的可观?

8.CSS选拔符有如何?哪些属性可以一而再?优先级算法如何计算?内联和important哪个优先级高?

 

因为浏览器的品种很多,每个浏览器的默认样式也是不同的。通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
最简单的就是 *{margin:0 ;  padding:0}

突显效果:

ECMAScript 2

<link rel="stylesheet" href="css/import-css-03.css">
网页分成三个层次,即:结构层、表示层、行为层

网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。
标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”

网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
<body> 
<div> 
<button>点击这里</button> 
</div> 
</body> 

b.其它POST的央浼头文件比GET请求多了多少个参数,分部为Content-Type、Content-Length
和 Origin

<style>
      @import "css/import-css-03.css";
</style>

控制台突显:

IE5突显(怪异情势):

分裂:严俊情势是浏览器依据专业去显得页面;混杂形式是以一种向后万分的艺术去浮现

<ul id="names">
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<script>
    window.onload = function () {
        var oUl = document.getElementById("names");
        var aLi = oUl.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            aLi[i].onmousemove = function () {
                this.style.backgroundColor = "red";
            }
            aLi[i].onmouseout = function () {
                this.style.backgroundColor = "";
            }
        }
    }
</script>

12.写一个获得非行间样式的函数

c.而一旦请求数据是一模一样的,那响应获得的数量也是千篇一律的:

 

 

 

 

当JS中间的一个变量的效能域(scope)是先后中定义这些变量的区域。变量分为两类:全局(global)变量和局地变量。其中全局变量的作用域是全局性的,即在JavaScript代码中,它四处有定义。

但是这么,你会发现新拉长的li元素并不能通过鼠标的移入移出改变其背景观。那是因为变色事件在添加li元素之前曾经遍历完了。

强制(parseInt,parseFloat,Number)
隐式(== –)

将CSS代码在写在<head></head>之间,并且用<style></style>进行宣示

type:
字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。

唯独借使大家恐怕有众三个li元素,然后选拔for循环的话会相比影响属性。

HTML&CSS:
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、
    HTML5、CSS3、Flexbox

JavaScript:
    数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
    DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

其他:
    移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

6.IE和DOM事件流的界别

a.事件流执行顺序的区分

而是大家透过地方的主意就足以拿走大家想要的CSS数据:

listener :落成了 伊芙ntListener 接口或者是 JavaScript 中的函数。

a.闭包可以读取函数内部变量

 

上面看一个例证:

简单的话,差别有以下几点:

前端开发知识点:

运行结果:

那段代码有四个特征:a.函数b嵌套在函数a内部;b.函数a重返函数b;

//定义全局变量
var i = 1;
function one(){
  console.log(i);
}
one();

DOM 事件模型:body->div->button->button->div->body
(先捕获后冒泡)

连锁链接:扫除浮动的三种办法

ECMAScript 3

上边大家大致看看在network下get请求和post请求的多少:

POST方法:

DOM 使用:

c.外部体制,也称链接样式

普通事件中的onclick是DOM 0级事件只支持单个事件,会被其他onclick事件覆盖
事件绑定中的addEventListener是DOM 2级事件可以添加多个事件而不用担心被覆盖

由此当您的参数是鲜明知道数据时用call,而不确定时用apply,然后把经过 push
方法把参数传递进数组。

15.描述css reset的功效和用途

ECMAScript 4

<div id="element"></div>
<style>
    #element{ width: 100px; height: 60px; padding: 10px;margin: 20px;border: 1px solid #9f1c24;}
</style>
<script>
    var compatMode = window.top.document.compatMode;
    var elem = document.getElementById("element");
    document.write("The compatMode is "+compatMode+".The Element's width is " + elem.offsetWidth + " px and it's height is "+elem.offsetHeight+" px");
</script>

3.join() 和 split()的区别

标签闭合、标签小写、不乱嵌套,提高搜索机器人搜索几率;使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

 

连锁链接:http://www.cnblogs.com/hellman/p/4172220.html

4.数组主意pop()、push()、unshift()、shift()

7.CSS
中text-align:center在IE7和IE8下的界别

var i = 1;
function one(){
   console.log(i);  
   var i = 2;
}
one();
1.尽可能减少http请求数(文件合并) 
2.使用CDN(内容分发网络) 
3.添加Expire/Cache-Control头 
4.启用Gzip压缩 
5.css放在页面最上面 
6.scrip放在页面最下面 
7.避免在css中使用Expressions 
8.把js和css放在外部文件中 
9.减少dns查询 
10.压缩javascript和css 
11.避免重定向 
12.移除重复脚本 
13.配置实体标签 
14.使用ajax缓存

对此第二个参数意义都一致,但对于首个参数:apply传入的是一个参数数组,也就是将多少个参数合成为一个数组传入,而call则作为call的参数传入(从第一个参数先河)。

<script>
    var strNum = '1.645';
    var strAnotherNum = "-1";
    var strAnotherNum2 = "2";
    var isTrue = true;

    //parseInt(参数1,参数2)将字符串转换成整数
    console.log(parseInt(strNum)); // 1
    console.log(parseInt(strAnotherNum + strNum)); //  -11
    console.log(parseInt(strNum + strAnotherNum)); // 1

    //parseFloat()将字符串转换成浮点数字
    console.log(parseFloat(strNum));//  1.645
    console.log(parseFloat(strAnotherNum + strNum));//  -11.645
    console.log(parseFloat(strNum + strAnotherNum));//  1.645
    console.log(parseFloat(strNum + strAnotherNum2));//  1.6452

    //Number() 函数把对象的值转换为数字
    console.log(Number(strNum));// 返回 1.645
    console.log(Number(strAnotherNum + strNum)); // -11.645
    console.log(Number(strNum + strAnotherNum)); // NaN
    console.log(Number(strNum + strAnotherNum2)); // 1.6452

    //string(参数):可以将任何类型转换成字符串
    console.log(String(isTrue)); // "true"
    console.log(String(strAnotherNum + strNum)); // "-11.645"
    console.log(String(strNum + strAnotherNum)); // "1.645-1"
    console.log(String(strNum + strAnotherNum2)); // "1.6452"

    // Boolean()可以将任何类型的值转换成布尔值
    console.log(Boolean(strNum)); //  true
    console.log(Boolean(strAnotherNum + strNum)); //  true
    console.log(Boolean(strNum + strAnotherNum)); //  true
</script>

在客户端应用get请求,服务器端使用 Request.QueryString
来赢得参数,而post请求,服务器端使用 Request.Form 来获取参数。

a.封闭性:外界不能访问闭包内部的数量,假使在闭包内注明变量,外界是不可以访问的,除非闭包主动向外面提供访问接口;

咱俩再来举个例证(在上边的根底上,大家抬高一个按钮,点击按钮,可以动态添加li元素):

1.含义不同
alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

2.在浏览器中的表现不同
在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie7以下版本中,如果没有设置title,当鼠标经过图片时alt的值会显示,如果设置了,优先显示title的值,即使是空值

对于网站seo优化来说,title与alt还有最重要的一点:
搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一步对图片说明。

直白在HTML页面使用@import是足以的,可是你必须每日记得要将@import
放到样式表的最前方,否则它将不会起成效。

相关链接:啄磨面试与面试题

type:
字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。

eval();  //此方法不推荐,因为此方法解析时不会判断字符串是否合法,而且JSON对象中的JS方法也会被执行,这是非常危险的。
JSON.parse();  //推荐方法

b.删除节点

最简单易行直接,间接对HTML标签使用style=”…”

简单来说,
本地对象为 Array,Object,RegExp等可以通过 New 实例化的类;
内置对象为Global 和Math 这两个不必明确实例化的对象,它们已经被实例化了;
宿主对象为浏览器自带的document,window等对象,所有BOM 和DOM 对象都是宿主对象。

区别:

13.风浪委托是什么样

下边简单试验下:

除此以外当然服务器端还能利用一个通用的取得参数的主意,即 Request[“username”]。可是此格局存在一个难点,它会对QueryString,Form,ServerVariable进行遍历,要是发现符合须求的多寡,那么就会终止向后搜索。

8.Ajax呼吁的时候 get 和 post
格局的不一致

在使JavaScript编程时会遭受一个题材,就是当您给HTML添加事件时,由于浏览器默许的冒泡型事件触发机制,所以会触发你不想触发的轩然大波,那么通过上面的函数可以化解那一个标题:

g. IE6中奇数宽高的BUG

 

唯一能断定NaN的法门是由此isNaN()函数:

func.call(func1,var1,var2,var3) 对应的
apply写法为:func.apply(func1,[var1,var2,var3]);

你点击了第二个div
<style>
   #div { background-color: red;width: 300px;height: 100px;}
</style>
修正注释的写法。将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->
块级元素:div p h1-h6 form ol ul li 
行内元素: a b br i img span lable input select textarea
CSS盒模型:内容,border ,margin,padding
当使用float浮动容器后,在IE6下会产生3px的空隙,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
<script>
    // (1) 四则运算
    // 加法运算符+是双目运算符,只要其中一个是string类型,表达式的值便是一个String
    // 对于其他的四则运算,只有其中一个是Number类型,表达式的便是一个Number
    // 对于非法字符的情况通常会返回NaN:'1'*'a'    // => NaN,这是因为parseInt(a)值为NaN,1*NaN还是NaN
    var a = "11";
    var b = 11;
    console.log(a+b); // "1111"
    console.log(a-b); // 0
    console.log(a*b); // 121
    console.log(a/b); // 1

    //(2).判断语句
    // 判断语句中的判断条件需要是 Boolean类型,所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。
    console.log(a==b);// true
    console.log(a!==b); // true
    console.log(a===b); //  false

    //(3) Native代码调用
    // JavaScript宿主环境都会提供大量的对象,它们往往不少通过JavaScript来实现的。
    // JavaScript给这些函数传入的参数也会进行隐式转换。
    // 例如BOM提供的alert方法接受String类型的参数:alert({a:1});  //=>[object Object]
    console.log({a:1}); // Object {a: 1}
</script>

缺点:

补充1:

// 阻止浏览器的默认行为
  function stopDefault(e) {
      // 阻止默认浏览器动作(W3C)
      if(e && e.preventDefault){
          e.preventDefault();
      }else {
          //IE 中阻止函数器默认动作的方式
          window.event.returnValue = false;
      }
      return false;
 }

相关链接:js中继续的二种用法计算(apply,call,prototype)

 

CSS2:

此地i是个部分变量,外部无法引用。所以会报错。

ECMAScript 5

join() 函数是把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
split() 函数是把字符串分割为字符串数组。

公用的处理响应的主意:

IE 使用:

以下是面试题及其答案(这么些知识点不要死记硬背,要求深远精通):

 

@import "import-css-03.css";

简短来说,其分别主要就是传递参数的不一样。

重中之重文化要求系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是一无所能的!

ECMAScript 6

12.你做的页面在哪些流览器测试过?那么些浏览器的基石分别是什么样?

示例:

 

我们来举个例子(每个li元素都能够接触改变其背景象):

CSS Sprites 将许过小的图片组合在一起,使用css定义背景属性,再利用 CSS的"background-image","background-repeat","background-position"的组合来控制图片的显示位置和方式,background-position可以用数字能精确的定位出背景图片的位置。 

这样就大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅

4.行内元素有哪些?块级元素有何样?CSS的盒模型?

a.行间样式,也称行内样式

    function getStyle(obj, attr) { //获取非行间样式,obj是对象,attr是值
        if(obj.currentStyle){ //针对IE 获取非行间样式
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }

一如既往,大家简要试验下:

相关链接:Ajax中解析Json的三种艺术详解

 

<input type="button" id="btnAdd" value="添加武将" />
<ul id="names">
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<script>
    var index = 1;
    document.getElementById("btnAdd").onclick = function () {
        // appendChild() 方法向节点添加最后一个子节点
        var node = document.createElement("li");
        var textnode = document.createTextNode("武将"+index++);
        node.appendChild(textnode);
        document.getElementById("names").appendChild(node);
    }
</script>
<input type="button" id="btnDelete" value="删除" />
<ul id="names">
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<script>
    document.getElementById("btnDelete").onclick = function () {
        var names = document.getElementById("names");
        var node = names.firstElementChild||names.firstChild;
        // removeChild() 方法指定元素的某个指定的子节点。
        // 以 Node 对象返回被删除的节点,如果节点不存在则返回 null。
        names.removeChild(node);
    }
</script>
The compatMode is BackCompat.The Element's width is 100 px and it's height is 60 px 

a.先搜索自身的移位目的,如若存在则赶回,要是不存在将继续搜索函数a的移动目标,以此查找,直到找到为止。

6.css的position属性有啥样取值,它们的行为是何等?

大家在看一个例证(例子3):

element.appendChild(); //向元素添加新的子节点,作为最后一个子节点
element.removeChild(); //从元素中移除子节点
element.replaceChild(); //替换元素中的子节点
element.insertBefore(); //指定的已有的子节点之前插入新节点

但是不提议选用那种格局。

 ECMAScript 7

事件委托就是使用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的具有事件。

        document.getElementById('btnGet').onclick = handleGet;
        function handleGet() {
            //创建一个新的 XMLHttpRequest 对象
            var httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            var username = document.getElementById("txt_username").value;
            //给 onreadystatechange 事件设置一个事件处理器
            httpRequest.onreadystatechange = handleResponse;
            //添加参数,以求每次访问不同的url,以避免缓存问题
            var url = "/ajax/html4getpost.aspx?username=" + encodeURIComponent(username) + "&random=" + Math.random();
            //使用 open 方法来指定 HTTP 方法和需要请求的 URL (即告诉 httpRequest 对象你想要做的事)
            httpRequest.open("GET", url);
            //这里没有向服务器发送任何数据,所以 send 方法无参数可用
            httpRequest.send();
        }
        document.getElementById('btnPost').onclick = handlePost;
        function handlePost() {
            var httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            var username = document.getElementById("txt_username").value;
            httpRequest.onreadystatechange = handleResponse;
            var data = "username=" + encodeURIComponent(username) + "&random=" + Math.random();
            //不用担心缓存问题
            httpRequest.open("POST", "/ajax/html4getpost.aspx");
            //必须设置,否则服务器端收不到参数
            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //发送请求,要data数据
            httpRequest.send(data);
        }
// 方法一(常规方法)
// 思路:
// 1.构建一个新的数组存放结果
// 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比
// 3.若结果数组中没有该元素,则存到结果数组中
Array.prototype.UniqArray1 = function () {
    var res = [this[0]];
    for(var i=1;i<this.length;i++){
        var repeat = false;
        for(var j=0;j<res.length;j++){
            if(this[i] === res[j]){
                repeat = true;
                break;
            }
        }
        if(!repeat){
            // 向数组的末尾添加一个或多个元素,并返回新的长度
            res.push(this[i]);
            // 要想数组的开头添加一个或多个元素,请使用 unshift() 方法
        }
    }
    return res;
}

// 方法二(比方法一效率要高)
//  思路:
// 1.先将原数组进行排序
// 2.检查原数组中的第i个元素与结果数组中的最后一个元素是否相同,因为已经排序,所以重复元素会在相邻位置
// 3.如果不相同,则将该元素存入结果数组中
// 此方法也有一定的局限性,因为在去重前进行了排序,所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重,那这种方法便不可取了。
Array.prototype.UniqArray2 = function () {
    this.sort(); //对数组的元素进行排序
    var res = [this[0]];
    for(var i=0;i<this.length;i++){
        if(this[i] !== res[res.length-1]){
            res.push(this[i]);
        }
    }
    return res;
}

// 方法三(推荐使用)
// 思路:
// 1.创建一个新的数组存放结果
// 2.创建一个空对象
// 3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,
// 同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。
// 说明:至于如何对比,就是每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复。
Array.prototype.UniqArray3 = function () {
    var res = [];
    var obj = {};
    for(var i=0;i<this.length;i++){
        if(!obj[this[i]]){
            res.push(this[i]);
            obj[this[i]] = 1;
        }
    }
    return res;
}

有关链接:IE6文字溢出bug解决办法

14.标签上title与alt属性的区分是什么样? 

如图所示,当在函数b中走访一个变量的时候,搜索的相继是:

17.解释jsonp的法则,以及为啥不是确实的ajax

15.如何堵住事件冒泡和默许事件

面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。

题目类型: 理论知识、算法、项目细节、技术视野、开放性题、工作案例。

细节追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种知识关联是长时期的学习,临时抱佛脚绝对是记不住的。

回答问题再棒,面试官(可能是你面试职位的直接领导),会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事,还要会做人。

资深的前端开发能把absolute和relative弄混,这样的人不要也罢,因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。

您也足以应用 insertBefore 方法插入/移动已有元素

 

5.事件绑定和平常事件有怎么着界别 

ECMAScript 8

d.插入节点

a.爱惜函数内的变量安全,以最开首的事例为例。函数a 中变量i
只有函数b才能访问,而一筹莫展通过其余路线访问到,因而爱惜了i 的安全性。

连锁链接:css优先级计算规则

c.替换节点

CSS有三种引用格局:

1)大家先来拓展强制转换操作:

b.IE6下那八个层中间怎么有空闲(3像素题材及解决办法)

深远浅出的讲,事件就是onlick、onmouseover、onmouseout等;而委托就是令人家来做,这一个事件本来是加在某些因素上的,可是你可以加到别人身上来做,已毕那一个事件。如同收快递一样,你不要自己亲自去收,能够令人家代收。

CSS样式表中使用如下:

捕获型事件模型:body->div->button (Netscape事件流) 

再举个例子:

解决方案就是将外部相对定位的div宽度改成偶数。
<input type="button" id="btnDelete" value="插入主公" />
<ul id="names"><li>刘备</li><li>关羽</li><li>张飞</li></ul>
<script>
    document.getElementById("btnDelete").onclick = function () {
        var names = document.getElementById("names");
        var node= names.lastChild;
        var list=document.getElementById("names");
        list.insertBefore(node,list.childNodes[0]);
    }
</script>

当函数b执行的时候也会像上述步骤一样。因而,执行时b的机能域链包涵了多少个目的:b的位移对象、a的移位对象和window对象,如下图所示:

b.在内存中直接维系一个变量。以后面的事例为例,由于闭包,函数a中的变量i一贯存在与内存中,由此老是执行c(),都会给i
自扩充1。

useCapture :是还是不是选取捕捉,一般用 false
。true为捕获阶段,false为冒泡阶段。

补充:

 大家来运作下:

b.收缩传递函数的参数量

上边大家通过事件委托的艺术来兑现,HTML不变:

您也足以运用 appendChild()
方法从一个因素向另一个要素中活动元素,示例如下:

缺陷:使用集体CSS代码时,每个页面都要定义。如果有为数不少页面,那么每个文件都会很大,前期维护难度也会很大。

CSS3:

根据内容的结构化(内容语义化),选择合式的标签(代码语义化),便于开发者的阅读和写出更加优雅的代码的同时让浏览器的爬虫和机器更好地解析
你按下了键值:49

  

target: 文档节点、document、window 或 XMLHttpRequest。

ECMAScript 9

别的,还有一种导入CSS样式的点子,选取@import导入CSS样式。在HTML初步化时,会被导入到HTML或者CSS文件中,称为文件的一部分。

俺们看下客户端中请求的 html4getpost.aspx 的代码:

当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。

2.xhtml和html有如何不相同

连带链接:JavaScript
的同源策略

18.什么是语义化的HTML?

很显眼那是个全局变量,最终决定台会彰显1

<input type="button" id="theButton" value="Click it"/>
<script>
    var btnClick = document.getElementById('theButton');
    // 用普通方法添加两个事件
    btnClick.onclick = function () {
        console.log("The is the first click event!"); // 不执行,不显示
    }
    btnClick.onclick = function () {
        console.log("The is the second click event!"); // 执行,会显示
    }
    // 用事件绑定添加两个事件
    btnClick.addEventListener('click',function () {
        console.log("The is the first click event listener!");// 执行,会显示
    })
    btnClick.addEventListener('click',function () {
        console.log("The is the second click event listener!");// 执行,会显示
    })
    btnClick.addEventListener('click',LogThrid);
    btnClick.removeEventListener('click',LogThrid);
    function LogThrid() {
        console.log("The is the third click event listener!");
    }
    // PS:这里只使用W3C的标准写法添加事件,没有兼容低版本的IE。
</script>

listener :落成了 伊芙ntListener 接口或者是 JavaScript 中的函数。

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

用途:

2)大家再来进行隐式转换

动用闭包会占有内存资源,过多的行使会造成内存溢出等。所以用时须求及时删除变量或者少用。

有关链接:JS中call和apply区别

连锁链接:永不选择@import (英文版:don’t
use
@import

NaN === NaN; // false

ECMAScript 10

<script>
    var array1 = [1,2,8,6,4,7,6,12,8];
    console.log(array1.UniqArray1());
    var array2 = [1,2,"Hello",6,4,2,6,"Hello",8];
    console.log(array2.UniqArray2());
    var array3 = ["Hello","Luka","Nice to meet you","Luka","Hi","Luka"];
    console.log(array3.UniqArray3());
</script>

d. 超链接访问之后hover样式就不出现的题材

 

<script>
    function a() {
        var i = 0;
        function b() {
            console.log(++i);
        }
        return b;
    }
    var c = a();
    c();
</script>

相关链接:ECMAScript
对象类型

IE(Trident)  火狐(Gecko) 谷歌(webkit) Opera(Presto)

 7.IE和专业下有哪些包容性的写法

补充:NaN其一新鲜的Number与所有其余值都不对等,包含它和谐:

b.持久性:一般的函数,调用达成后,系统自动撤废,而对此闭包来说,在外表函数被调用后,闭包结构如故保存着。系统中,闭包中的数据依旧留存,从而达成对数码的有始有终利用。

相关链接:深刻精晓JavaScript的闭包特性
如何给循环中的对象添加事件 

1.使用空标签清除浮动:.clear{clear:both}(会添加大量无语义标签,结构与表现未分离,不利于维护)
2.父元素设置overflow:hidden(内容增多时容易造成不会自动换行的后果,导致内容被隐藏,无法显示需要一处的元素)
3.父元素设置overflow:auto (多个嵌套后,FF在某种情况下会造成内容全选;IE在mouseover造成宽度改变时会造成最外层模块出现滚动条)
4.父元素设置height(只适合高度固定的布局,要给出精确的高度,不利于维护)
3.是用:afert伪元素清除浮动(用于低版本IE浏览器无法识别)
<script>
    window.onload = function () {
        var oUl = document.getElementById("names");/*
        * 这里要用到事件源:event对象,事件源不管在哪个事件中,只要你操作的元素就是事件源
        * IE: window.event.srcElement
        * 标准下:event.target
        * nodeName:元素的标签名
        * */
        oUl.onmouseover = function (e) {
            var target = TargetGet(e);
            if(target.nodeName.toLowerCase() === "li"){
                target.style.backgroundColor = "red";
            }
        }
        oUl.onmouseout = function (e) {
            var target = TargetGet(e);
            if(target.nodeName.toLowerCase() === "li"){
                target.style.backgroundColor = "";
            }
        }

        function TargetGet(e) {
            // 兼容性的写法,替代if...else...
            e = e||window.event;
            var target = e.target||e.srcElement;
            return target;
        }
    }
</script>
前者会自动转换类型
后者不会
        //处理响应
        //一旦脚本调用了 send 方法,浏览器就会在后台发送请求到服务器。因为请求是在后台处理的,所以Ajax 依靠事件来通知这个请求的进展情况。
        function handleResponse(e) {
            //当 onreadystatechange 事件被触发后,浏览器会把一个 Event 对象传递给指定的处理函数,target 属性则会被设为与此事件关联的XMLHttpRequest
            if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200) { //请求成功
                document.getElementById("result").innerHTML = e.target.responseText; //显示被请求文档的内容
            }
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取非行间样式的函数</title>
    <style>
        * { text-align: center;}
        input { margin-top: 30px;padding:10px 20px;}
        #div { width: 500px;height: 300px;background: red;margin: 10px auto;}
    </style>
</head>
<body>
<input type="button" value="Style" id="btn" />
<div id="div"></div>
<script>
    function getStyle(obj, attr) { //获取非行间样式,obj是对象,attr是值
        if(obj.currentStyle){ //针对IE 获取非行间样式
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }

    function css(obj, attr, value) { //对象,样式,值。传两个参数的时候为获取样式,3个是设置样式
        if(arguments.length == 2){ //arguments 参数数组。当参数数组长度为2 时,表示获取获取css样式
            return getStyle(obj,attr); // 通过getStyle 函数返回对象的非行间样式
        }else if(arguments.length == 3){ //传递参数参数时,设置某个对象的值
            obj.style[attr] = value;
        }
    }

    window.onload = function () {
        var oDiv = document.getElementById("div");
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            console.log("width:"+getStyle(oDiv,"width")); // width:500px
            css(oDiv,"width","300px");
            console.log("width:"+css(oDiv,"width")); // width:300px
        }
    }
</script>
</body>
</html>

 

HTML中行使如下:

原理:

冒泡型事件模型: button->div->body (IE事件流) 

c.要是整个功能域链上都爱莫能助找到,则赶回 underfined。

接触:浏览器按照doctype是还是不是留存和行使的是那种dtd来控制。

而在函数之内表明的变量,就只有在函数体内有定义。它们是部分变量,成效域是区域性的。函数的参数也是局地参数,它们只在函数体内部有定义。

 

18.Javascript的地方对象,内置对象和宿主对象 

ECMAScript 11

CSS1:

选择器{属性1:值1;属性2:值2;……}

绝不委托,我们的代码是那样的:

2.例举3种强制类型转换和2种隐式类型转换?

i. ie6下空标签中度难题

IE9-IE10显示:

<input type="button" id="btnUpdate" value="替换主公" />
<ul id="names"><li>刘备</li><li>关羽</li><li>张飞</li>
</ul>
<script>
    document.getElementById("btnUpdate").onclick = function () {
        // 首先创建一个新的文本节点
        var textNode = document.createTextNode("曹操");
        // 然后替换首个列表项中的首个子节点
        var item = document.getElementById("names").childNodes[0];
        // node.replaceChild(newnode,oldnode) 方法用新节点替换某个子节点
        // 这个新节点可以是文档中某个已存在的节点,或者您也可创建新的节点
        item.replaceChild(textNode,item.childNodes[0]);
    }
</script>

有关链接:CSS 百事可乐s:
CSS图片合并技术详解

5.CSS引入的法门有何?
link和@import的分别是?

b.内部样式,也称内嵌样式

ECMAScript 12

你点击了第一个div
你点击了document

咱们来经过上面的例证看下效果:

3.Doctype?
严刻格局与混杂情势-怎样触发那三种形式,区分它们有啥意义?

<script>
    var arr = ["How","Are","You!"]
    var strArr = "1,2,3,4,5,6,7,8";
    console.log(arr.join()); // How,Are,You!
    console.log(arr.join('')); // HowAreYou!
    console.log(arr.join(' ')); // How Are You!
    console.log(strArr.split('')); // ["1", ",", "2", ",", "3", ",", "4", ",", "5", ",", "6", ",", "7", ",", "8"]
    console.log(strArr.split(' '));// ["1,2,3,4,5,6,7,8"]
    console.log(strArr.split(',')); // ["1", "2", "3", "4", "5", "6", "7", "8"]
</script>

ECMAScript 13

 

j.更正重复文字bug

 

<script>
    function a() {
        var i = 1;
        iAdd = function () {
            i++;
        }
        function b() {
            console.log(i);
        }
        return b;
    }
    var c = a();
    c(); // 1
    iAdd();
    c(); // 2
</script>

示例

别的在link的体裁表里嵌套@import,同样会阻止并行加载代码,那样那是因为@import引用的文本唯有在引用它的非常文件被下载、解析后,浏览器才会分晓还有另一个CSS样式表要求下载,然后才去下载、营造render tree等一层层操作。因而 css
@import引起的CSS解析延迟会加长页面留白期。所以,要尽量防止使用CSS
@import 而选用 link 标签的法门引入CSS样式表。

这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font- size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符”-”。IE有个BUG,在处理伪类时,如果伪 类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。

 

作用域链图中很显眼的代表出:

相关链接:行内元素与块级元素比较完善的分别和转移  

11.AJAX呼吁时,怎么样分解 JSON
数据

<input type="button" id="btn" value="添加武将" />
<ul id="names">
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<script>
    var oUl = document.getElementById("names");
    var oLi = oUl.getElementsByTagName("li");
    var oBtn = document.getElementById("btn");
    var index = 1;
    for(var i=0;i<oLi.length;i++){
        oLi[i].onmouseover = function () {
            this.style.backgroundColor = "red";
        }
        oLi[i].onmouseout = function () {
            this.style.backgroundColor ="";
        }
    }
    oBtn.onclick = function () {
        var oLi = document.createElement("li");
        oLi.innerText = "武将"+index;
        index++;
        oUl.appendChild(oLi);
    }
</script>
静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用加载<script>标签没有跨域限制,来实现跨域获取数据的。
简单来说,img是内容部分的东西,background-image是修饰性的东西。

img:从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么这个必然是用img了,因为这个是页面元素内容。页面元素内容最关键的一点就是,当页面没有样式的时候,还是能一眼看过去就知道什么是什么

background-image:背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美;无,并不影响用户浏览网页获取内容。

其实说白了,背景图片就是通过样式加载后,让页面更漂亮而已,内容图片就是为了展示给用户的。假设有一天你的网页没有任何样式的时候,那么这个时候请想想你的网站上哪些图片是给用户看的,这样就足够了。

c.发送请求时,因为get请求的参数都在URL里,所以send函数没有发送的参数,而post请求在行使send方法时索要给予参数。

CSS的浏览器支持如下:

position属性常用的取值static、relative、absolute、fixed
static:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative(相对定位):
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute(绝对定位):
元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed(固定定位):
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

PS:fixed旧版本IE不支持;absolute的containing block计算方式跟正常流不同

16.添加、删除、替换、插入到某个接点的办法

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!–[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!–[if IE]>中,这样就可以通过验证了。
1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数
问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行
在原生的jS中不包括ready()这个方法,只有load方法就是onload事件

连锁链接:严峻方式与混杂形式-怎样触发那两种格局,区分它们有啥意义 || 长远明白浏览器包容性形式

举个例子:

a.裁减全局变量

再就是文本框内依旧原本的文本”123″,没有变动。这是因为 stopDefault
函数阻止了浏览器的默许动作。

优点:完成了页面框架代码和显示CSS代码的一心分开,使得前期制作和中期维护都万分有益。

简单来说函数封装如下:

1.对WEB标准以及W3C的通晓与认识

 

下一场,大家点击文本框,然后输入点击数字键1,大家会发现,控制台会突显:

function stopBubble(e) {
      // 如果提供了事件对象,则这是个非IE浏览器
      if(e && e.stopPropagation){
          // 因此它支持W3C的stopPropagation()方法
          e.stopPropagation();
      }else {
          // 否则,我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
      }
 }

如此那般在执行完 var c = a()
 后,变量c 实际上是指向了函数b,b中用到了变量i,在执行c()
后就会在控制台显示i的值(首次为1)。那段代码其实就创建了一个闭包。因为函数a
外的变量c 引用了函数a 内的函数b,也就是说:

function getJSONP(url) {
    var oScript = document.createElement('script');
    oScript.setAttribute('type', 'text/javascript');
    oScript.src = url;
    document.body.appendChild(oScript);
     oScript.onload = function () {   //  请求成功后移除标签
    console.log('请求成功');
    oScript.remove();
    }
    oScript.onerror = function () {   //  失败的时候也要移除标签
     console.log('请求错误, 请重试');
     oScript.remove();
    };
};

 

The is the second click event!
The is the first click event listener!
The is the second click event listener!
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:确保所有的元素使用”display:inline;”在最后一个元素上使用一个”margin-right:-3px;”# 为浮动元素的最后一个条目使用一个条件注释,比如:<!–[if !IE]>Put your commentary in here…<![endif]–>在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

 ECMAScript 14

 

ECMAScript 15

a.因为只要经过get方式获取数据,若是Url和前面的平等,IE浏览器会从缓存中获取数据,而不会去央浼服务器端,所以get方法在IE浏览器下有缓存难题;而post方法不需担心那些标题。

补充2:

 

引入的方式:内联、内嵌、外链、导入。
区别 :
1.link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性,等,
@import就只能加载CSS了。

2.加载时间及顺序不同
使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页跟我们预期的效果一样,即使一个页面link多个css文件,网速再慢也是一样的效果;
而使用@import导入的CSS就不同了,客户端在浏览网页时是先将html的结构呈现出来,再把外部的CSS文件加载到网页当中,当然最终的效果也是跟前者是一样的,只是当网速较慢时会出现先显示没有CSS统一布局时的html网页,这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因。

3.兼容性不同
由于@import是CSS2.1提出的所以老的浏览器不支持,
@import只有在IE5以上的才能识别,而link标签无此问题。

16.解释css sprites,如何使用

11.css的基本语句构成是?

9.call和apply的区别

a.添加节点

 

面试有几点需注意:

历史由来:当最初的浏览器Netscape 4和Explorer
4对css举办剖析时,并未坚守W3C标准,那时的解析方法就被大家称为quirks
mode(怪异方式),但随着W3C的专业愈来愈主要,众多的浏览器开始安分守己W3C标准解析CSS,仿照W3C标准解析CSS的方式大家誉为strict
mode(严厉形式) 

c.封装

 

pop()  -  删除并返回数组的最后一个元素
push() - 向数组的末尾添加一个或更多元素,并返回新的长度
unshift() - 向数组的开头添加一个或更多元素,并返回新的长度
shift() - 删除并返回数组的第一个元素

俺们来举个例证,可以拓展简要的GET和POST操作,HTML代码如下:

  

 

17.哪些对网站的文本和资源拓展优化?

ECMAScript 16

<script>
    function getStyle(obj, attr) { //获取非行间样式,obj是对象,attr是值
        if(obj.currentStyle){ //针对IE 获取非行间样式
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }
    var objDiv1 = document.getElementById("div1");
    console.log("Div1's width:"+getStyle(objDiv1,"width")); // Div1's width:200px
    var objDiv2 = document.getElementById("div2");
    console.log("Div2's width:"+getStyle(objDiv2,"width")); // Div2's width:100px
</script>
<ul id="names1">
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
</ul>
<ul id="names2">
    <li>诸葛亮</li>
    <li>庞统</li>
</ul>
<p>请点击按钮把文臣从第二个列表移动到第一个列表中。</p>
<input type="button" id="btnAdd" value="移动" />
<script>
        document.getElementById("btnAdd").onclick = function () {
            // appendChild() 方法向节点添加最后一个子节点
            var eleFrom = document.getElementById("names2");
            var node = eleFrom.firstElementChild||eleFrom.firstChild;
            document.getElementById("names1").appendChild(node);
        }
</script>

【HTML + CSS

而在IE8下仅文字居中,元素并不居中

this 指向 window对象。

诸如我们大概的改动下方面post方法:

只必要在在<head></head>之间通过link标签引用CSS样式表的链接就行。

 

 

焚薮而田办法:可以在其子元素中进入CSS属性:margin:0 auto;

target.attachEvent(event, listener); //绑定函数 
target.detachEvent(event, listener); //移除绑定  

 

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。
4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

e.IE6文字溢出BUG

优势:

 

 

以身作则如下:

IE拔取冒泡型事件,Netscape使用捕获型事件,DOM使用先捕获后冒泡型事件.

10. B继承A的方法 

示例:

 

优点:

引用关系图如下:

补充 – 变量的效能域:

解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link { }   a:visited { }   a:hover { }   a:active { }

POST请求:

 

b.当按键后,不希望按键继续传递给如HTML文本框对象时,可以收回返回值.即为止默许事件默许行为. 

很明显,那里没有经过for去循环添加事件,而是把事件委托给了其父元素ul,那样大大提升了质量。

 

ECMAScript 17

f.一个空格引发CSS失效

ECMAScript 18

简言之举个栗子:

9. img与background的区别

(待续…)

所谓的标准模式(严格模式)是指,浏览器按W3C标准解析执行代码;
怪异模式(混杂模式)则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。
使用 window.top.document.compatMode 可显示当前的模式,取值有 CSS1Compat 和 BackCompat 

CSS1Compat 为标准模式,浏览器宽度 = document.documentElement.clientWidth; 元素的宽度则是元素的实际宽度,内容宽度 = width - (padding-left + padding-right + border-left-width + border-right-width)
BackCompat 为怪异模式,浏览器宽度 = document.body.clientWidth; 元素实际的宽度 = border-left-width + padding-left + width + padding-right + border-right-width;

IE11以上不协理此措施。 

1.javascript的typeof重返哪些数据类型

 

 

那里服务器端是经过ASP.NET落成的,能够看到其分化:

 

相关链接:简言之描述JSON跟JSONP的分别以及实战

意思:决定浏览器怎么着渲染网站(浏览器选取那种规范去分析网页)

 

b.要是函数b存在 prototype
原型对象,则在物色完自己的活动目标后查找自身的原型对象,再持续查找。那就是JavaScript中的变量查找体制。

相关链接:CSS接纳器的浏览器协助

The is the second click event listener!
The is the first click event listener!

20.”==”和“===”的不同

b.事件侦听函数的区分

同源策略,即拥有相同的协议(protocol),端口(如果指定),主机(域名)的两个页面是属于同一个源。
页面只能在同一个源中进行资源的交互。

b.下面post方法须求安装Content-Type的值为application/x-www-form-urlencoded (窗体数据被编码为名称/值对)。

大家经过简单代码试验下:

19.document.load
和document.ready的区别

 

连锁链接:HTML DOM Event
对象

 

<div id="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
<div id="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
<div><input id="txt1" name="txt1" type="text" /></div><hr/>
<script>
    window.onload = function () {
        var txt = document.getElementById("txt1");
        document.getElementById("c1").onclick = function () {
            console.log("你点击了第一个div");
        }
        document.getElementById("c2").onclick = function (e) {
            console.log("你点击了第二个div");
            stopBubble(e);
        }
        document.onclick = function () {
            console.log("你点击了document");
        }
        txt.value = "123";
        txt.onclick = function (e) {
            stopBubble(e);
        }
        txt.onkeydown = function (e) {
            stopDefault(e);
            var lKeyCode = (navigator.appname=="Netscape")?event.which:event.keyCode;
            console.log("你按下了键值:"+ lKeyCode);
        }
    };
    function stopBubble(e) {
        // 如果提供了事件对象,则这是个非IE浏览器
        if(e && e.stopPropagation){
            // 因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }else {
            // 否则,我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }
    function stopDefault(e) {
        // 阻止默认浏览器动作(W3C)
        if(e && e.preventDefault){
            e.preventDefault();
        }else {
            //IE 中阻止函数器默认动作的方式
            window.event.returnValue = false;
        }
        return false;
    }
</script>

IE6以上突显(标准形式):

GET请求:

1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a:hover, li:nth-child)

visibility和cursor能够被所有元素继承;
letter-spacing,word-spacing,white-space,line-height,colo,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction能够被内联元素继承;
text-indent和text-align会被终端元素继承;
list-style,list-style-type,list-style-posi-tion,list-style-image会被列表元素所继承;
border-col-lapse会被表格元素所继承

以下属性是不可继承的:border,height,display,margin,background,padding,min-height,overflow,max-height,width,min-width,max-width,position,right,top,left,bottom,float,z-index,clear,table-lay-out,ertical-align,nicode-bidi,age-break-after,age-break-before

每个ID选择符(#someid),加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
每个元素或伪元素(:firstchild)等,加0,0,0,1
其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。
按这些规则将数字串逐位相加,就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

!important 比内联样式的优先级高

19.解除浮动的三种情势,各自的优缺点

大家来举个不难的事例(例子1):

简单的话,就是闭包可以读取其余函数内部变量的函数,即在外围能够调用函数中的函数变量,其实它就是将函数内外连接起来的大桥。

a. IE6双倍边距bug

10.前端页面有哪三层构成,分别是什么样?成效是什么样?

   function A(name,age) {
        this.name = name;
        this.age = age;
        this.showName = function () {
            console.log(this.name+"'s age is "+this.age+".")
        }
    }

    //1. 原型链(prototype)实现继承
    function B1() { }
    B1.prototype = new A("Luka",27);
    var b1 = new B1();
    B1.prototype.zodiac = "Snake";
    B1.prototype.showZodiac = function () {
        console.log(this.name +"'s zodiac is "+this.zodiac +".")
    }
    b1.showName();
    b1.showZodiac();

    //2. 构造函数实现继承
    function B2(name, age,starSign) {
        this.temp = A;
        this.temp(name,age);
        delete this.temp;
        this.name = name;
        this.age = age;
        this.starSign = starSign;
        this.showZodiac = function () {
            console.log(this.name+"'s star sign is "+this.starSign +".")
        }
    }
    var b2 = new B2("Luka",27,"Sagittarius");
    b2.showName();
    b2.showZodiac();

    //3. call , apply实现继承

    //call与aplly的异同:
    //1,第一个参数this都一样,指当前对象
    //2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以)
    function B3(name,age) {
        A.call(this,name,age);
    }
    var b3 = new B3("Luka",27);
    b3.showName();

    function B4(name,age) {
        A.apply(this,[name,age]); // 等于 A.apply(this.arguments);
    }
    var b4 = new B3("Luka",27);
    b4.showName();
<script>
    window.onload = function () {
        var oUl = document.getElementById("names");
        var oBtn = document.getElementById("btn");
        var index = 1;
        oUl.onmouseover = function (e) {
            var target = TargetGet(e);
            if(target.nodeName.toLowerCase() === "li"){
                target.style.backgroundColor = "red";
            }
        }
        oUl.onmouseout = function (e) {
            var target = TargetGet(e);
            if(target.nodeName.toLowerCase() === "li"){
                target.style.backgroundColor = "";
            }
        }

        oBtn.onclick = function () {
            var oLi = document.createElement("li");
            oLi.innerText = "武将"+index;
            index++;
            oUl.appendChild(oLi);
        }
        function TargetGet(e) {
            // 兼容性的写法,替代if...else...
            e = e||window.event;
            var target = e.target||e.srcElement;
            return target;
        }
    }
</script>
<div style="width: 300px;height: 100px;"></div>

接下来是大家的GET方法:

 

var ev = event || window.event;
var target = ev.srcElement||ev.target;
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

在变量解析进度中,首先查找局地的功用域,然后再找找上层功能域。在例子1中的函数中绝非概念变量i,所以寻找上层功能域(全局功效域),进而拓展输出其值。不过在例子2中的函数内定义了变量i
(无论在after之后照旧此前定义变量,都觉得在此作用域拥有变量i),于是不再向上层的功用域举行检索,直接输出i。可是在例子3中,函数内部照旧定义了变量i,于是不会招来全局功效域,但是此时的有些变量没有赋值,所以输出是
undefined。

补充:块级元素和行内元素的分别

那是因为 stopBubble()方法阻碍了轩然大波冒泡。

IE8及以下显示:

target.addEventListener(type, listener, useCapture);  //绑定函数 
target.removeEventListener(type, listener, useCapture); //移除绑定 

14.闭包是如何,有如何特色,对页面有啥震慑

并且一旦在HTML中混合 link情势和@import格局,会毁掉并行下载,而去开展逐金立载,那样会促成页面须要越多的小时才能加载成功。

target: 文档节点、document、window 或 XMLHttpRequest

<script>
    var jsonData1 = '{"name":"Luka","age":"18"}';
    var jsonObj11 = eval('('+jsonData1+')'); // eval() 方法
    console.log(jsonObj11.name+"'age is "+jsonObj11.age); // 输出:Luka'age is 18
    var jsonObj12 = JSON.parse(jsonData1); // JSON.parse()方法
    console.log(jsonObj12.name+"'age is "+jsonObj12.age); // 输出:Luka'age is 18

    var jsonData2 = '{"name":console.log("Hello,Luka!"),"age":"18"}';
    var jsonObj21 = eval('('+jsonData2+')');
    console.log(jsonObj21.name+"'age is "+jsonObj21.age); // 会先输出:Hello,Luka!  然后输出  undefined'age is 18
    var jsonObj22 = JSON.parse(jsonData2);
    console.log(jsonObj22.name+"'age is "+jsonObj22.age); // 直接报错
</script>
isNaN(NaN); // true
<input type="button" id="theButton" value="Click it"/>
<script>
    var btnClick = document.getElementById('theButton');
    // 用普通方法添加两个事件
    btnClick.onclick = function () {
        console.log("The is the first click event!"); // 不执行,不显示
    }
    btnClick.onclick = function () {
        console.log("The is the second click event!"); // 执行,会显示
    }
    // 用事件绑定添加两个事件
    btnClick.addEventListener('click',function () {
        console.log("The is the first click event listener!");// 执行,会显示
    })
    btnClick.addEventListener('click',function () {
        console.log("The is the second click event listener!");// 执行,会显示
    })
    // PS:这里只使用W3C的标准写法添加事件,没有兼容低版本的IE。
</script>

当函数a的内部函数b被函数a外的一个变量引用时,就创办了我们平常所谓的“闭包”。

乍一看,你也许会以为结果会突显1,但结果其实是 undefined。

<input type="button" id="theButton" value="Click it"/>
<script>
    var btnClick = document.getElementById('theButton');
    // 用事件绑定添加两个事件
    btnClick.attachEvent('onclick',function () {
        console.log("The is the first click event listener!");// 执行
    })
    btnClick.attachEvent('onclick',function () {
        console.log("The is the second click event listener!");// 执行
    })
    btnClick.attachEvent('onclick',LogThrid);
    btnClick.detachEvent('onclick',LogThrid);
    function LogThrid() {
        console.log("The is the third click event listener!");
    }
</script>
httpRequest.open("POST", "/ajax/html4request.aspx?username=LukaChao");

13.写出两种IE6 BUG的化解情势

a.从呼吁URL,咱们可以看来 GET请求是带着参数,而POST请求是不带参数的。

因而最后控制台的显示结果,我们可以窥见用document.getElementById(‘element’).style.xxx可以得到元素的体裁音讯,可是它得到的只是DOM元素style属性里的样式规则,对于经过class属性引用的外部样式表,就拿不到大家要的新闻了。
而经过js来改变目的的体裁时,改变的则是目的的行间样式。

【JavaScript】

要是应用Request[“username”]措施,即使我们在文本框中填入任何其他名目,输出的称谓也会是
LukaChao:

 

咱俩点击第四个div文本,会意识控制台会突显:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取CSS的值</title>
    <style>
        #div1 { width: 200px;height: 80px;background: red;}
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2" style="width: 100px;height: 40px;background: blue;"></div>
<script>
    var objDiv1 = document.getElementById("div1");
    console.log("Div1's width:"+objDiv1.style.width); // Div1's width:

    var objDiv2 = document.getElementById("div2");
    console.log("Div2's width:"+objDiv2.style.width); // Div2's width:100px

    objDiv1.style.width = "250px";
    console.log("Div1's width:"+objDiv1.style.width); // Div1's width:250px
</script>
</body>
</html>

 

您可以见到就是我们新添了li元素,但是我们把事件委托给了其父元素ul,所以li元素的转移背景观的意义还在。

解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零,font-size:0

浅显的布道是,函数定义和函数表达式位于另一个函数的函数体内。而且这一个内部函数可以访问它们所在的外表函数中声称的兼具片段变量、参数和表明的其余中间函数。当其中一个这么的中间函数在含蓄它们的外表函数之外被调用时,就会形成闭包。也就是说,内部函数会在表面函数再次回到后被实施。而当那几个里面函数执行时,它依然必须访问其外部函数的一对变量、参数以及其余中间函数。那个有些变量、参数和函数声明(最初时)的值是外部函数重临时的值,但也会惨遭内部函数的影响。

咱俩得以借助JavaScript的效应域链(scope
chain)更好地打听变量的效用域。每个JavaScript执行环境都有一个和它涉及在同步的功效域。这些效率域是一个对象列表或对象链。当JavaScript代码需求查询变量x(如下图)的值时(那么些历程叫做变量解析(
variable name
resolution)),它就起头查阅该链的率先个目标。借使不行目标有一个名为x的函数,那么就利用相当属性的值。假使第三个目的没有名为x的属性,JavaScript就会继续查询链中的首个对象。假若第四个目标依旧没盛名为x的习性,那么就继续查询下一个目的,以此类推。如果查到终极(指顶层代码中)不存在那些特性,那么那一个变量的值就是未定义的。

在IE7中,元素与文字都居中;