jquery面试常见技术问题

Posted 2020-09-26 另一种感觉

面试常见技术问题

------------           JQ           -----------1、jq常见选择器？

，号选择器，分组选择器。空格，祖父选择器。>大于号，父子选择器。+号选择器，紧接下一个兄弟选择器。~号，元素之后所有的siblings元素。

：first，：last，：not，：first-child，:last-child,:animated.：checked

2. jQuery插件实现方式，分别介绍？

jQuery.fn.extend 封装直接在$下面的方法，就是根下面，

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

$.extend用来在jQuery命名空间上增加新函数。用一个或多个其他对象来扩展一个对象，返回被扩展的对象

批量的方法用fn，静态的用$.extend（），不建议用扩展到根下面。

 

3.bind和live的区别?

live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后 生成的元素也可以绑定相应的事件.

1. js和jq如何转换？

 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

 DOM对象就是javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = “test.jpg"；这里的document.getElementById("img") 就是DOM 对象。

  $("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的，是正确的，但是 $("#img").src = "test.jpg" ；或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

 

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象)

如：　var v = document.getElementById("v");        //DOM对象

           var $v = $(v);        //jQuery 对象

转换后，就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)；

(1) jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。

   如： var $v = $("#v");          //jQuery 对象

            var v = $v[0];               //DOM 对象

            alert(v.checked);                  //检测这个checkbox是否被选中

   (2) jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象

     如：var   $v = $("#v");           //jQuery 对象

             var v = $v.get(0);            //DOM对象 ( $v.get()[0] 也可以 )

             alert(v.checked);             //检测这个 checkbox 是否被选中

通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用ＤＯＭ中的方法。   

 

----------JS    ----------

1.给出一个数组如何去掉重复的项？

实现一个把数组里面的重复元素去除的方法：

主要的是Array的prototype的方法。

var arr=[1,3,5,3,6,9,1,2,2]

var arr=[‘a‘,‘b‘,‘a‘,‘c‘,‘c‘,‘ab‘,‘bc‘]

function removeRepeat(arr){

var i,tmpArr=[];

for(i in arr){

if(tmpArr.join(‘,‘).indexOf(arr[i])==-1){

tmpArr.push(arr[i]);

 }

}

return tmpArr;

}

var r=removeRepeat(arr);

console.log(r);

 

二．方法：

Array.prototype.unique=function(){

var i,tmpArr=[];

for(i in this){

if(typeof this[i]!=‘function‘){

if(tmpArr.join(‘,‘).indexOf(this[i])==-1){

 tmpArr.push(this[i]);

}

}

}

return tmpArr;

 }

var arr=[‘a‘,‘b‘,‘a‘,‘c‘,‘c‘,‘ab‘,‘bc‘];

var r=arr.unique();

console.log(r);

2.js如何实现面向对象？

var name = ‘Chen Hao‘;
var email = ‘haoel(@)hotmail.com‘;
var website = ‘http://coolshell.cn‘;

 

var chenhao = {
　　    name : ‘Chen Hao‘,
　　    email : ‘haoel(@)hotmail.com‘,
　　    website : ‘http://coolshell.cn‘
};

//以成员的方式
chenhao.name;
chenhao.email;
chenhao.website;
//以hash map的方式
chenhao["name"];
chenhao["email"];
chenhao["website"];

 

//我们可以看到， 其用function来做class。
var Person = function(name, email, website){
    this.name = name;
    this.email = email;
    this.website = website;
    this.sayHello = function(){
        var hello = "Hello, I‘m "+ this.name  + "， \n" +
                    "my email is: " + this.email + "， \n" +
                    "my website is: " + this.website;
        alert(hello);
    };
};
var chenhao = new Person("Chen Hao", "[email protected]",
                                     "http://coolshell.cn");
chenhao.sayHello();

 

1. Javascript的数据和成员封装很简单。没有类完全是对象操作。纯动态！
2. Javascript function中的this指针很关键，如果没有的话，那就是局部变量或局部函数。去找最紧跟的上一个function。
3. Javascript对象成员函数可以在使用时临时声明，并把一个全局函数直接赋过去就好了。
4. Javascript的成员函数可以在实例上进行修改，也就是说不同实例相同函数名的行为不一定一样。

 

3.js如何实现继承?

定义一个Dog对象，并增加一个name属性，该属性可以在新建对象时通过参数传入

            function Dog( name ){

                this.name = name;

            }

 

// 通过原型方式扩展Dog对象

     Dog.prototype = {

// 重新覆盖构造函数让其指向Dog

constructor:Dog,

Wow:function(){

console.group();

console.info("I am: "+this.name );

console.info("WangWang....");

console.groupEnd();

},

yelp:function(){

this.Wow();

}

            };

 

            function MadDog(name){

Dog.apply( this, [name]);

            }

            MadDog.prototype=new Dog();

// 重新覆盖构造函数，让其指向MadDog

 

            MadDog.prototype.constructor=MadDog;

            MadDog.prototype.yelp=function()

            {

                self=this;

                setInterval(function(){

self.Wow();

},5000);

            }

            var xiaoXian=new Dog("xiaoXian");

            xiaoXian.yelp();

 

            var xiaoMang=new MadDog("xiaoMang");

            xiaoMang.yelp();

console.log( xiaoXian.constructor == xiaoMang.constructor );

 

4.如果扩展js中原生的String对象?string的方法？

String.prototype.name= function(){}

Slice从字符串的第一个参数提取第二个参数，也可以截取数组。返回的结果类型：string/object

Substring 从字符串的第一个参数提取第二个参数，返回的结果类型，string。

Indexof 返回短字符串在长字符串出现的位置。

Lastindexof 返回最后一个短字符串出现的位置。

Replace 字符串的替换方法，

Split 字符串分割方法，能转换为数组，数组转换字符串，用jion（）方法。

 

5.document.ready()和window.onload的区别?

Document.ready()是jQuery中准备出发的事件，当加载到当前元素就执行了，

Window.onload是整个页面加载之后才执行。

1. 闭包是什么？

闭包是有权访问另一个函数作用域中的变量的函数。

闭包是个函数，而它“记住了周围发生了什么”。表现为由“一个函数”体中定义了“另一个函数”

“闭包”是一个表达式（一般是函数），它具有自由变量以及绑定这些变量的环境（该环境“封闭了”这个表达式）。

1. 闭包有权访问函数内部的所有变量。

2.当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。

function f() {

    var rs = [];

    for (var i=0; i <10; i++) {

        rs[i] = function() {

            return i;

        };

    }

    return rs;

}

var fn = f();

for (var i = 0; i < fn.length; i++) {

    console.log(‘函数fn[‘ + i + ‘]()返回值:‘ + fn[i]());

}

---------- WEB-------------

1.什么是响应式网页?

 通过CSS3 Media Query实现响应式Web设计

响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

2. 介绍jQuery easyUI？jQuery easyUI组件使用?

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

布局layout，上南，下北，左西右东，中间内容，左边的组件是：tree，手风琴，中间的有tab，tab里有datagrid数据表格，还有数据表格的toolbar工具栏。对话框dialog；

 

3. PHP中include和include_once的区别？

include_once()语句的语法和include()语句类似，主要区别也是避免多次包含一个文件而引起函数或变量的重复定义。include_once() 语句在脚本执行期间包含并运行指定文件。include_once语句把include的功能扩展了。在程序执行期间，将指定的文件包含进来，如果从文件引用进来的程序先前已经包含过的时候，include_once()就不会把它再包含进来。也就是仅仅可以引用同一个文件一次！

4.最熟悉的web的前端框架？

Jq，yui，extjs，prototype，dojo，mootools

5.雅虎的14条优化规则？

1. 尽可能的减少 HTTP 的请求数 content

2. 使用 CDN（Content Delivery Network） server

3. 添加 Expires 头(或者 Cache-control ) server

4. Gzip 组件 server

5. 将 CSS 样式放在页面的上方 css

6. 将脚本移动到底部（包括内联的） javascript

7. 避免使用 CSS 中的 Expressions css

8. 将 JavaScript 和 CSS 独立成外部文件 javascript css

9. 减少 DNS 查询 content

10. 压缩 JavaScript 和 CSS (包括内联的) javascript css

11. 避免重定向 server

12. 移除重复的脚本 javascript

13. 配置实体标签（ETags） css

14. 使 AJAX 缓存

6、Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

7. 前端页面有哪三层构成，分别是什么？作用是什么？

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

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

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

• 使用 (X)HTML 去搭建文档的结构。
• 使用 CSS 去设置文档的呈现效果。
• 使用 DOM 脚本去实现文档的行为

8. 如何居中一个浮动元素?

方法一：让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；

方法二：使用display: table;

方法三：直接使用table布局（使用太多table容易让结构看起来比较混乱，其实页面中使用少量的table，只要不要嵌套使用，还是可以实现使用少量CSS，达到最好的效果的），这种方法这里就不举例演示了。

9. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

1、css文件，以及js文件尽量分别都放在一个文件里，因为客户端请求服务器的次数就会减少。
   2、背景图尽量采用聚合技术，就是放在一个图片里，用background-position来定位；
   3、css文件里尽量都精简一些，比如说#sidebarcontent{}啥的，我们直接可以用#s-c{}因为这样整个文件的容量就会减少 ，同样的原理，在线也可以压缩js文件。容量变小些嘛 ；

10. 什么是DOM，什么是BOM？以及它们的用法？

BOM 即浏览器对象模型，浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”， 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

 

Window对象其实是BOM中所有的对象都源自window对象，有location对象，history对象，方法 有.Resize（）alert( ) .confirm( ).prompt( ).open().close().setInterval().setTimeout()。

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

 

DOM的文档对象模型，最顶级的对象是document。可以js通过操作DOM，就是一个接口，可以访问html的标准方法。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

11. HTTP协议的状态消息都有哪些?(如200、302对应的描述)国内外的JS牛人都知道哪些?

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器，

 

• “100″ : Continue（继续） 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）
• “101″ : Switching Protocols（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备进行切换。（HTTP 1.1新）
• “200″ : OK（成功） 一切正常，对GET和POST请求的应答文档跟在后面。
• “201″ : Created（已创建）服务器已经创建了文档，Location头给出了它的URL。
• “202″ : Accepted（已接受）服务器已接受了请求，但尚未对其进行处理。
• “203″ : Non-Authoritative Information（非授权信息） 文档已经正常地返回，但一些应答头可能不正确，可能来自另一来源 。（HTTP 1.1新）。
• “204″ : No Content（无内容）未返回任何内容，浏览器应该继续显示原来的文档。
• “205″ : Reset Content（重置内容）没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。
• “206″ : Partial Content（部分内容）服务器成功处理了部分 GET 请求。（HTTP 1.1新）
• “300″ : Multiple Choices（多种选择）客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
• “301″ : Moved Permanently（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应（作为对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
• “302″ : Found（临时移动）类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”，出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
• “303″ : See Other（查看其他位置）类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。
• “304″ : Not Modified（未修改）自从上次请求后，请求的网页未被修改过。原来缓冲的文档还可以继续使用，不会返回网页内容。
• “305″ : Use Proxy（使用代理）只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。（HTTP 1.1新）
• “307″ : Temporary Redirect（临时重定向）和 302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）
• “400″ : Bad Request（错误请求）请求出现语法错误。
• “401″ : Unauthorized（未授权）客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
• “403″ : Forbidden（已禁止） 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
• “404″ : Not Found（未找到）无法找到指定位置的资源。
• “405″ : Method Not Allowed（方法禁用）请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）禁用。（HTTP 1.1新）
• “406″ : Not Acceptable（不接受）指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。
• “407″ : Proxy Authentication Required（需要代理授权）类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）
• “408″ : Request Time-out（请求超时）服务器等候请求时超时。（HTTP 1.1新）
• “409″ : Conflict（冲突）通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）
• “410″ : Gone（已删除）如果请求的资源已被永久删除，那么，服务器会返回此响应。该代码与 404（未找到）代码类似，但在资源以前有但现在已经不复存在的情况下，有时会替代 404 代码出现。如果资源已被永久删除，那么，您应当使用 301 代码指定该资源的新位置。（HTTP 1.1新）
• “411″ : Length Required（需要有效长度）不会接受包含无效内容长度标头字段的请求。（HTTP 1.1新）
• “412″ : Precondition Failed（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。（HTTP 1.1新）
• “413″ : Request Entity Too Large（请求实体过大）请求实体过大，已超出服务器的处理能力。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头。（HTTP 1.1新）
• “414″ : Request-URI Too Large（请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法进行处理。
• “415″ : Unsupported Media Type（不支持的媒体类型）请求的格式不受请求页面的支持。
• “416″ : Requested range not satisfiable（请求范围不符合要求）服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）
• “417″ : Expectation Failed（未满足期望值）服务器未满足”期望”请求标头字段的要求。
• “500″ : Internal Server Error（服务器内部错误）服务器遇到错误，无法完成请求。
• “501″ : Not Implemented（尚未实施） 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。
• “502″ : Bad Gateway（错误网关）服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。
• “503″ : Service Unavailable（服务不可用）服务器由于维护或者负载过重未能应答。通常，这只是一种暂时的状态。
• “504″ : Gateway Time-out（网关超时） 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）
• “505″ : HTTP Version not supported（HTTP 版本不受支持）不支持请求中所使用的 HTTP 协议版本。

 

国内的比较牛的人：淘宝网UED官方博客。灵玉，大成小胖，承玉，拔赤

 

常去的技术论坛：博客园，

11.JSON和JSONP的区别？JSONP的原理？

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

 

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

　　2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

　　3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

　　4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

　　5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

　　6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

12.如何让ie6,7,8，兼容html5的标签？

我一直使用公司里的提供的jqside插件，里面就是把html5的标签放到字符串，用字符串的split的方法变为数组，用while的方法，变量减减，用dom的createElement方法进行再ie678里创建标签。

if( $.isIE678 ){

var html5 = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,‘),

i = html5.length;

while(i--) document.createElement(html5[i]);

}

13.WEB前端的开发工具？

Yslow，雅虎开发工具，判断网页里哪个运行的慢，基于网页查找。

Firebug：火狐开发工具，也用过一段时间，挺好用的，只是不习惯。

Chrome：谷歌开发工具，比较适用于移动端和网页的调试。

14.web前端的管理工具？

Svn，git

15.如何解析json？

用ajax去请求json数据，在回调函数里，把数据传过到函数里。通过用一个for循环，用innerHTML和jQuery的方法html（）的方法，渲染到页面里。

-------CSS--------

1．常见ie6的浏览器兼容bug（3-5个）？

1.文字本身的大小不兼容。

同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie6下是会被内容撑大，高度限定失效,ie7,8,9都不会撑大。所以不要轻易给容器定义height。解决方案用：height！important；min-height：100px；max-height： 200px

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

6.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

7.img 下的留白，如下代码：

<div>
<img src=“1.jpg” />
</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>
<img src=”1.jpg” /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

8. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。

解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

9.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

10.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。

解决方案：给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

11.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的

12.浮动元素之后跟着一个元素之间的有3像素的差距？

解决方案：浮动的元素：overflow：hidden；后面的元素设置_margin-left：-3px，

2. 在Css中那个属性会影响dom读取文档流的顺序？

Float

3. 行内元素有哪些？块级元素有哪些？CSS的盒模型？

Css的盒模型：从外到里，margin，border，padding，content。

块元素在页面里，占一行，可以设定宽和高，可以容纳块元素和行内元素。常见的块元素有div，p，h1-h6，ul等。

行内元素没有宽和高的属性但可以与其他元素同一行，一般不可以包含块元素，行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a，b，span，strong，em等。

4. CSS引入的方式有哪些? link和@import的区别是?

  内联引用CSS。可灵巧应用样式於各标签中。方便于编写代码时的使用。没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难。

内部引用CSS

将样式规则写在<STYLE>...</STYLE>标签之中。

外部引用 link 标签引用CSS

将样式规则写在.css的样式文件中，再以<link>标签引入。

这样引入该css样式表文件以后，就可以直接套用该样式档案中所制定的样式了。

外部引用 @import 引用CSS

跟link方法很像，但必须放在<STYLE>...</STYLE> 中： 

<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>

可以灵活的引入css文件对xhtml元素进行控制。有时候也用来编写某些css hack。
这种方法的缺点：在个别文件或元素的灵活度不足

老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加 载，而@import引用的CSS会等到页面全部被下载完再被加载。

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

使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

5. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

ID 和 CLASS

Class 可继承

伪类A标签可以继承

列表 UL LI DL DD DT 可继承

优先级就近原则，样式定义最近者为准

载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag ]  

Important 比 内联优先级高

 

1. CSS层叠是什么?介绍一下？

CSS翻译过来叫做层叠样式表。运用到层叠的时候，主要就是靠CSS的组合与子选择器。去编辑样式。。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

 

1. html的意义？

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签

 

-------HTML5------

1. 手机浏览器独有的三个事件？

onTouchmove，ontouchend，ontouchstart，ontouchcancel。

2. 为什么要用Zepto?

jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。所以移动端开发首选框架，个人推荐zepto.js。

jq mobi，zepoto手机跨平台的手机框架。

3. 介绍HTML5和CSS3(对比)?

   HTML 5 还包含了新的语义化的元素标签，比如：<nav>, <header>, <footer>，<aside> 以及 <figure> 等等 。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。canvas 元素用于在网页上绘制图形。

HTML5 支持内联 SVG（矢量图形）

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

HTML5 Geolocation（地理定位）用于定位用户的位置。在谷歌地图上显示您的位置。

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

4. 如何区分多个终端（zepto）？

用detece来判断：

// general device type

$.os.phone

$.os.tablet

 

// specific OS

$.os.ios

$.os.android

$.os.webos

$.os.blackberry

$.os.bb10

$.os.rimtabletos

 

// specific device type

$.os.iphone

$.os.ipad

$.os.touchpad

$.os.kindle

 

// specific browser

$.browser.chrome

$.browser.firefox

$.browser.silk

$.browser.playbook

 

// Additionally, version information is available as well.

// Here‘s what‘s returned for an iPhone running iOS 6.1.

!!$.os.phone         // => true

!!$.os.iphone        // => true

!!$.os.ios           // => true

!!$.os.version       // => "6.1"

!!$.browser.version  // => "536.26"

5.border-image原理？

1.调用边框图片

border-image的url属性，通过相对或绝对路径链接图片。

2，边框图片的建裁

border-image的数值参数剪裁边框图片，形成九宫格。

3..剪裁图片的边框

边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。

4.执行重复属性

被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。

5、完成绘制，实现效果

6 自定义手机UI组件？如何实现的？

Input,button,radio,checkbox.

 把本身的input隐藏掉，给后面的label进行样式，并且用label的for属性，去指定input的id。去点击label的时候，css3的：chcked和：disabled去确定状态，样式用css精灵去排版。

7.图片切换的实现思路?

以全局监听的方式通过a标签的描点进行view动态切换页面，只要把a标签带有id的href属性的值指到锚点，用CSS3的动画进行切换页面.

8. HTML5都有哪些新的JS API?

◆二维绘图API，可以用在一个新的画布（Canvas）元素上以呈现图像、游戏图形或者其他运行中的可视图形。

◆一个允许web应用程序将自身注册为某个协议或MIME类型的API。

◆一个引入新的缓存机制以支持脱机web应用程序的API。

◆一个能够播放视频和音频的API，可以使用新的video和audio元素。

◆一个历史纪录API，它可以公开正在浏览的历史纪录，从而允许页面更好地支持AJAX应用程序中实现对后退功能。

◆跨文档/跨域的消息传递，它提供了一种方式，使得文档可以互相通信而不用考虑它们的来源域，在某种程度上，这样的设计是为了防止跨站点的脚本攻击。

◆一个支持拖放操作的API，用它可以与draggable特性相关联。

◆一个支持编辑操作的API，用它可以与一个新的全局contenteditable特性相关联。

◆一个新的网络API，它支持web应用程序在本地网络上互相通信，并在它们的源服务器上维持双向的通信。

◆使用JavaScript API的键/值对实现客户端的持久化存储，同时支持嵌入的SQL数据库。

◆服务器发送的事件，通过它可以与新的事件源（event-source）元素关联，新的事件源元素有利于与远程数据源的持久性连接，而且极大地消除了在Web应用程序中对轮询的需求。

 

---- PHP，SQL,AJAX ---

1. 简述下cookie的操作，还有cookie的属性都知道哪些？

Session是由应用服务器维持的一个服务器端的存储空间，用户在连接服务器时，会由服务器生成一个唯一的SessionID,用该SessionID 为标识符来存取服务器端的Session存储空间。

Cookie是客户端的存储空间，由浏览器来维持。

如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。

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

同步和异步的区别?

Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。

优点很明显，利于用户体验，不会打断用户的操作，在不刷新页面的情况下更新内容，减小服务器压力也是它很硬性的一个优点；而缺点，除了倍受追捧的SEO问题，安全问题、前进后退（这个虽然可以用其他方法解决，但AJAX本身的机制还是没变）、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。

readyState五种状态：

1. 请求未初始化，还没有调用 open()。
2. 请求已经建立，但是还没有发送，还没有调用 send()。
3. 请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
4. 请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
5. 响应已完成；您可以获取并使用服务器的响应了。

status常见的几种状态 

1. 100——客户必须继续发出请求
2. 101——客户要求服务器根据请求转换HTTP协议版本
3. 200——成功
4. 201——提示知道新文件的URL
5. 300——请求的资源可在多处得到
6. 301——删除请求数据
7. 302------缓存问题
8. 404——没有发现文件、查询或URl
9. 500——服务器产生内部错误

3.正则表达式有系统学习过吗(看书或网上教程)?有的话就问问简单点的邮箱验证、URL验证， 或者问问 贪婪匹配与懒惰匹配 的理论知识？

验证邮箱

function isEmail(str){

var reg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;

     return reg.test(str);

}

验证日期格式

function testReg(reg,str){

    return reg.test(str);

}

var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;

字母和数字的组合

function istrue(str){

  var reg=/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;

  return reg.test(str);

}

正则匹配价格

function checkPrice( me ){

 if( !( /^(?:\d+|\d+\.\d{0,2})$/.test(me.value) ) ){

   me.value = me.value.replace(/^(\d*\.\d{0,2}|\d+).*$/,‘$1‘);

 }

}

电话号码正则 

telReg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/

当正则表达式中包含能接受重复的限定符时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。

 

1. SQL是什么？

SQL 是用于访问和处理数据库的标准的计算机语言。

• SQL 指结构化查询语言
• SQL 使我们有能力访问数据库
• SQL 是一种 ANSI 的标准计算机语言

SQL 是一门 ANSI 的标准计算机语言，用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。

SQL 能做什么？

• SQL 面向数据库执行查询
• SQL 可从数据库取回数据
• SQL 可在数据库中插入新的记录
• SQL 可更新数据库中的数据
• SQL 可从数据库删除记录
• SQL 可创建新数据库
• SQL 可在数据库中创建新表
• SQL 可在数据库中创建存储过程
• SQL 可在数据库中创建视图
• SQL 可以设置表、存储过程和视图的权限

1. PHP的意义？

PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。

PHP 是免费的，并且使用非常广泛。同时，对于像微软 ASP 这样的竞争者来说，PHP 无疑是另一种高效率的选项。PHP 极其适合网站开发，其代码可以直接嵌入 HTML 代码。

PHP 语法非常类似于 Perl 和 C。PHP 常常搭配 Apache (web 服务器) 一起使用。不过它也支持 ISAPI，并且可以运行于 Windows 的微软 IIS 平台。

 

什么是 PHP？

• php 指 PHP:超文本预处理器（译者注：PHP: Hypertext Preprocessor，递归命名）
• PHP 是一种服务器端的脚本语言，类似 ASP
• PHP 脚本在服务器上执行
• PHP 支持很多数据库（mysql、Informix、Oracle、Sybase、Solid、PostgreSQL、Generic ODBC 等等）
• PHP 是一个开源的软件（open source software，OSS）
• PHP 可免费下载使用
• MySQL 是一种数据库服务器
• MySQL 支持标准的 SQL
• MySQL 可在许多平台上编译
• MySQL 可免费下载使用

什么是 MySQL？

PHP + MySQL

PHP 与 MySQL 的组合是跨平台的（意思是您可以在 Windows 环境进行开发，而在 Unix 平台上提供服务）

 

为什么要使用 PHP？

• PHP 可在不同的平台上运行（Windows、Linux、Unix）
• PHP 与目前几乎所有的正在被使用的服务器相兼容（Apache、IIS 等）
• PHP 可从官方的 PHP 资源免费下载：www.php.net
• PHP 易于学习，并可高效地运行在服务器端

1. AJAX 同步和异步的区别？ajax的交互流程？

同步的时候，当加载页面的时候，它会等待后台服务器响应，会打断用户的操作，电脑也会变白一会，而异步，则不打断用户操作，自行加载数据。