小题整理

来源：互联网发布：多多返利淘宝客编辑：程序博客网时间：2024/06/13 02:09

1、完成一个正则表达式，用来验证身份证号码

var string='385602199209120';
var stringExp=new RegExp(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/);
alert(stringExp.test(string));

//15位或者18位，如果15位，则全部是数字；如果是18位，最后一位可以输数字或者字母X x，其余必须全是数字

2、对string对象进行扩展，使其具有删除前后空格的方法

String.prototype.trim=function(){

return this.replace(/(^\s*)|(\s*$)/g,"");

}

3、哪些元素可继承（网站找的，供参考；大致常用的都有了）

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、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-position、list-style-image。

表格元素可继承：border-collapse

4、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中

如何居中div

给div设置一个宽度，然后添加margin:0 auto属性

div{    width:200px;    margin:0 auto; }

居中浮动元素：

父类div浮动距离左边50%,子类div浮动，right:50%;

.father {

position:relative;

left:50%;

float:left;

}

.son {

position:relative;

width:200px;

height:200px;

right:50%;

float:right;

background: #000

}

html:

<body>

</body>

让绝对定位的div居中

5.一个满屏的品字

css:

.top {

position:absolute;

top:0;

bottom:50%;

backgound:red;

width:100%;

}

.father {

position:absolute;

top:50%;

bottom:0;

width:100%;

}

.left {

position:absolute;

top:0;

left:0;

width:50%;

background: #000

}

.right {

position:absolute;

top:0;

right:0;

width:50%;

background: yellow

}

或者：

.top {

position:absolute;

top:0;

bottom:50%;

backgound:red;

width:100%;

}

.father {

position:absolute;

top:50%;

bottom:0;

width:100%;

}

.left{float:left;height: 100%;width: 50%;background: #000}
.right{float:right;height: 100%;width: 50%;background: yellow}

</div>

absolute 的 containing block 计算方式跟正常流有什么不同

position 跟 display、margin collapse、overflow、float 这些特征相互叠加后会怎么样

对 BFC 规范的理解？

7）关于严格模式、混杂（怪异）模式、

以前总是把这些模式混淆，现在特别做一个整理

怪异模式和标准模式是针对html表头中有没有声明(

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

)

如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，要想写出跨浏览器CSS，你最好采用标准模式

7)利用原生js实现ajax

window.onload=function(){    document.getElementsByTagName('a')[0].onclick=function(){        if (window.XMLHttpRequest){            var xmlhttp=new XMLHttpRequest();        }else{            var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");        }        var method='GET';        var url=this.href;        xmlhttp.open(method,url);        xmlhttp.send();        xmlhttp.onreadystatechange=function(){            if(xmlhttp.readyState==4){                if(xmlhttp.status==200||xmlhttp.status==304){                    var txt=xmlhttp.responseText;                    var json=eval('('+txt+')');                    document.getElementById('name').innerHTML='姓名'+json.ruei.name;                    document.getElementById('age').innerHTML='年龄'+json.ruei.age;                    document.getElementById('job').innerHTML='工作'+json.ruei.job;                }            }        }        return false;    }}

8)http协议的状态消息都有哪些

http状态码指的是web服务器告诉客户端发生了什么事情

状态码分类：

1**：信息提示。请求收到，继续处理

2**：成功。操作成功收到，分析、接受

3**：重定向。完成此请求必须进一步处理

4* *：客户端错误，请求包括一个错误语法或者不能完成

5**：服务端错误。服务器执行一个完全有效请求失败

200——服务器已成功处理了请求

301——请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

404——服务器找不到请求的网页。

500——服务器遇到错误，无法完成请求。

503——服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

504——服务器作为网关或代理，但是没有及时从上游服务器收到请求

9)AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器相应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给AJAX引擎自己来做，只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

跨域问题的解决：

1、jsonp

　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

举例说明：

程序A中sample的部分代码(http://localhost:20001)

程序B中test.js的代码

1 //调用callback函数，并以json数据形式作为阐述传递，完成回调2 callback({message:"success"});

上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

　　q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：<script type="text/javascript">

//添加<script>标签的方法
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
//搜索apple，将自定义的回调函数名result传入callback参数中
addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
}
//自定义的回调函数result
function result(data) {
//我们就简单的获取apple搜索结果的第一条记录中url数据
alert(data.responseData.results[0].unescapedUrl);
}
</script>

接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。

程序B的MyService.ashx代码：

public class MyService : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//获取回调函数名
string callback = context.Request.QueryString["callback"];
//json数据
string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
context.Response.ContentType = "application/json";
//输出：回调函数名(json数据)
context.Response.Write(callback + "(" + json + ")");
}
public bool IsReusable
{
get {
return false; }
}
}

程序A的sample代码中的调用

2.window.name

如a.com网站想通过JS获取b.com网站的数据。

1 在a.com网站添加一个空HTML页。名称为：http://a.com/null.html

2 在a.com网站需要获取数据页面(如：http://a.com/getDomainData.html)内容如下：

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>跨域获取数据</title>

    <script type="text/javascript">

    function domainData(url, fn)

{

        var isFirst = true;

        var iframe = document.createElement('iframe');

        iframe.style.display = 'none';

        var loadfn = function(){

            if(isFirst){

                iframe.contentWindow.location = 'http://a.com/null.html';

                isFirst = false;

            } else {

                fn(iframe.contentWindow.name);

                iframe.contentWindow.document.write('');

                iframe.contentWindow.close();

                document.body.removeChild(iframe);

                iframe.src = '';

                iframe = null;

}

};

        iframe.src = url;

        if(iframe.attachEvent){

            iframe.attachEvent('onload', loadfn);

        } else {

            iframe.onload = loadfn;

}

        document.body.appendChild(iframe);

}

    </script>

</head>

<body>

</body>

    <script type="text/javascript">

    domainData('http://b.com/data.html', function(data){

        alert(data);

});

    </script>

</html>

3 在b.com中添加获取数据页面如：http://b.com/data.html 内容需包含

<script>

　　window.name = '需要跨域传递的数据';

</script>

4 访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

使用HTML5中新引进的window.postMessage方法来跨域传送数据

平时遇到问题：

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的iframe消息传递

4.上面三个问题的跨域数据传递

html5中最炫酷的API之一：就是  跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome，Firefox , Opera  和 Safari 都将支持这个功能。

这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

举例：

postMessage(data,origin)方法接受两个参数

1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

http://test.com/index.html

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">        <div id="color">Frame Color</div>    </div>    <div>        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>    </div>

我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息

window.onload=function(){            window.frames[0].postMessage('getcolor','http://lslib.com');        }

接收消息

test.com上面的页面向lslib.com发送了消息，那么在lslib.com页面上如何接收消息呢，监听window的message事件就可以

http://lslib.com/lslib.html

window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);

这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东

有几个重要属性

data：顾名思义，是传递来的message
source：发送消息的窗口对象
origin：发送消息窗口的源（协议+主机+端口号）

这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似

简单的demo

在这个例子中，左边的div会根据右边iframe内div颜色变化而变化

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title>Post Message</title> 5 </head> 6 <body> 7     <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> 8         <div id="color">Frame Color</div> 9     </div>10     <div>11         <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>12     </div>13 14     <script type="text/javascript">15 16         window.onload=function(){17             window.frames[0].postMessage('getcolor','http://lslib.com');18         }19 20         window.addEventListener('message',function(e){21             var color=e.data;22             document.getElementById('color').style.backgroundColor=color;23         },false);24     </script>25 </body>26 </html>

 1 <!doctype html> 2 <html> 3     <head> 4         <style type="text/css"> 5             html,body{ 6                 height:100%; 7                 margin:0px; 8             } 9         </style>10     </head>11     <body style="height:100%;">12         <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">13             click to change color14         </div>15         <script type="text/javascript">16             var container=document.getElementById('container');17 18             window.addEventListener('message',function(e){19                 if(e.source!=window.parent) return;20                 var color=container.style.backgroundColor;21                 window.parent.postMessage(color,'*');22             },false);23 24             function changeColor () {            25                 var color=container.style.backgroundColor;26                 if(color=='rgb(204, 102, 0)'){27                     color='rgb(204, 204, 0)';28                 }else{29                     color='rgb(204,102,0)';30                 }31                 container.style.backgroundColor=color;32                 window.parent.postMessage(color,'*');33             }34         </script>35     </body>36 </html>

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）

window.onload=function(){            window.frames[0].postMessage('getcolor','http://lslib.com');        }

iframe接收消息，并把当前颜色发送给主页面呢

window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);

主页面接收消息，更改自己div颜色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

当点击iframe事触发其变色方法，把最新颜色发送给主页面

function changeColor () {                            var color=container.style.backgroundColor;                if(color=='rgb(204, 102, 0)'){                    color='rgb(204, 204, 0)';                }else{                    color='rgb(204,102,0)';                }                container.style.backgroundColor=color;                window.parent.postMessage(color,'*');            }

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

最后

很简单的用法却解决了大问题，据说Facebook已经在使用了，而且这也是html5另一个API——web workers传递消息的方法，那么它的浏览器兼容性怎么样呢？所谓浏览器兼容性几乎变成了IE几开始支持的问题了。。。不过好消息是跟localStorage一样，IE8+都支持了，只不过有些浏览器的低版本（比如FireFox4.0）并不支持window.onmessage=function(){}这种写法，所以我么最好使用事件绑定的写法，为了兼容IE，也要判断是否支持addEventListener。

当然postmessage也有一些不足的地方：

ie8，ie9下传递的数据类型值支持字符串类型，不过可以使用用 JSON对象和字符串之间的相互转换来解决这个问题；
ie6，ie7需要写兼容方案，个人认为window.name比较靠谱；

4）

利用iframe和location.hash

这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：

先是a.com下的文件cs1.html文件：

function startRequest(){    var ifr = document.createElement('iframe');    ifr.style.display = 'none';    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';    document.body.appendChild(ifr);}function checkHash() {    try {        var data = location.hash ? location.hash.substring(1) : '';        if (console.log) {            console.log('Now the data is '+data);        }    } catch(e) {};}setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作switch(location.hash){    case '#paramdo':        callBack();        break;    case '#paramset':        //do something……        break;}function callBack(){    try {        parent.location.hash = 'somedata';    } catch (e) {        // ie、chrome的安全机制无法修改parent.location.hash，        // 所以要利用一个中间的cnblogs域下的代理iframe        var ifrproxy = document.createElement('iframe');        ifrproxy.style.display = 'none';        ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下        document.body.appendChild(ifrproxy);    }}

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值parent.parent.location.hash = self.location.hash.substring(1);

当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……

5）利用flash

这是从YUI3的IO组件中看到的办法，具体可见http://developer.yahoo.com/yui/3/io/。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。

10)闭包：

官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

简言之，闭包是由函数引用其周边状态（词法环境）绑在一起形成的（封装）组合结构。在 JavaScript 中，闭包在每个函数被创建时形成。

这是基本原理，但为什么我们关心这些？实际上，由于闭包与它的词法环境绑在一起，因此闭包让我们能够从一个函数内部访问其外部函数的作用域。

要使用闭包，只需要简单地将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量，即使外部函数已经执行完毕。

以下两端代码都能依次点击弹出0，1，2，3...

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>js闭包</title>    <style>        *{margin: 0;padding: 0;}        li{line-height: 30px;background: red;border-bottom: 1px solid #000}    </style></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></body></html><script>    window.onload=function(){        var olis=document.getElementsByTagName('li');        for(var i=0;i<olis.length;i++){            eventClick(olis,i);        }    }    function eventClick(obj,i){         obj[i].onclick=function(){            alert(i);        }    }</script>

方法二：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>js闭包</title>    <style>        *{margin: 0;padding: 0;}        li{line-height: 30px;background: red;border-bottom: 1px solid #000}    </style></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></body></html><script>    window.onload=function(){        var olis=document.getElementsByTagName('li');        for(var i=0;i<olis.length;i++){            (function(i){                olis[i].onclick=function(){                    alert(i);                };            })(i);        }    }</script>

缺点
：内存泄漏

11）注意下面两段代码（代码A和代码B输出结果是不同的）

<script>
代码Aa:

window.onload=function(){var scope="global";  function t(){      console.log(scope);      var scope="local"      console.log(scope);  }  t();}

代码B：

window.onload=function(){var color="blue";function changeColor(){console.log(color);if(color==="blue"){color="red";}else{color:"blue";}}changeColor();alert(color);}</script>

12）

1 0