本文详细介绍了前端开发中常见的技术问题及其解决方案，包括jQuery、DOM操作、CSS布局、JavaScript编程技巧等内容，帮助开发者提高工作效率。
1问题：jQuery的美元符号$有什么作用？
回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器
2问题：body中的onload()函数和jQuery中的document.ready()有什么区别？
回答：onload()和document.ready()的区别有以下两点：
(1)、我们可以在页面中使用多个document.ready()，但只能使用一次window.onload(),。
(2)、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。
3.问题：jQuery中有哪几种类型的选择器？
回答：从我自己的角度来讲，可以有3种类型的选择器，如下：
1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。
2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素
3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。
4.问题js的组成部分
bom dom ecma
5.问题 如何优化代码
代码复用
6.问题清除浮动的方法
margin塌陷，用border；
clear：both；
overflow：hidden
7.问题css的盒子模型
margin ，padding ，content ，border
8..渐进增强：先从低版本浏览器开始设计页面，然后逐渐满足高版本
优雅降级：先满足高版本浏览器的效果，再往低版本做兼容；
ie6-ie8不兼容css3,所以我们要单独给他们去设置样式
9.++在前先自加，++在后先运算在自加
10.js的添加，删除，插入到某个接点的方法？
11.网页制作的会用到的图片格式
Webp,Jpg,gif,icon,tif,svg
Webp的大小比jpg小40%;
12.js的内置对象
string,Date,Math,regexp,location
Array,Boolean,Number
13.Ajax的原理
new(),实例化mlxhttprequest();
open(),传三个参数 get/post,url,true; 使用get的时候放到url后面，
send(),使用post方法穿参数的时候，要把参数放到send里面
14.如何居中一个浮动的元素
绝对定位，left：50%,margin-left:-子盒子的宽的一半
top：50%，margin-top:-子盒子的高的一半
15.for(var j=0,k=0;j<10,k<5;j++,k++){
alert(j+k);0,2,4,6,8;
};
16面向对象包括三个
1.多态：重载和重写，
覆盖，是指子类重新定义父类的虚函数的做法。 重载，是指允许存在多个同名
函数，而这些函数的参数表不同（或许参数个数不同，或许参数类型不同，或许
两者都不同）。
2.封装 封装最好理解了。封装是面向对象的特征之一，是对象和类概念的主要
特性。 封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方
法只让可信的类或者对象操作，对不可信的进行信息隐藏。
封装函数：把过程和数据包括起来，对数据的访问只能通过已经定义的界面；
封装保证了模块具有较好的独立性，是程序维护修改较为容易，对于应用程序的
修改仅限于类的内部，可以将应用程序修改带来的影响减少到最少到最低限度。
3.继承 面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承可以使用
现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。
封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块（类）
；它们的目的都是为了——代码重用。而多态则是为了实现另一个目的——接口重用！
多态的作用，就是为了类在继承和派生的时候，保证使用“家谱”中任一类的实例的
某一属性时的正确调用。
17.
var x = 1;
Action action = () =>
{
var y = 2;
var result = x+y;
Console.Out.WriteLine("result = {0}", result);
};
action();
这里我们首先定义了一个变量“x”，值为1。
然后我们定义了一个匿名函数(一个lambda表达式)赋给类型Action。
Action没有参数，没有返回值，但如果你观察“action”里的定义，
你会发现它使用了“x”变量。这是变量是被action“捕获”或“携带”的，
自动被添加到了action的运行环境中了。
当我们执行action时，它输出了我们预期的结果。请注意，
当我们执行时，原始的“x”此时已经脱离了它当初的变量环境，但它仍然能用。
18.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
em有如下特点：
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
19.同步与异步
同步 指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系。
异步 的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。
alert弹框和文字，异步是你做你的我可以做我的，同步是先弹框在出现字
20.什么是CSS hack?
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识
别不同的符号（什么样的浏览器识别什么样的符号是有标准的，
CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的
21.一次完整的HTTP事务是怎样一个过程？
域名解析 -->
发起TCP的3次握手 -->
建立TCP连接后发起http请求 -->
服务器响应http请求，浏览器得到html代码 -->
浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） -->
浏览器对页面进行渲染呈现给用户
22.图片设置到最佳位置
<!--<imgs src="yourimage.jpg"-->
<!--data-positionx="right"-->
<!--data-positiony="top"/> -->
23.标准盒模型和ie盒模型的区别
1.标准 w3c 盒子模型的范围包括 margin、border、padding、content，
并且 content 部分不包含其他部分。
2.ie 盒子模型的范围也包括 margin、border、padding、content，
和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
3.标准盒模型:就是在网页的顶部加上 doctype 声明。
24.私有前缀
-webkit- 谷歌,苹果
-ms- ie
-moz- 火狐
-o- 欧朋
1.ie和dom事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
5.ie采用冒泡型事件流,Netscape使用捕获型事件,dom采用先捕获后冒泡型事件
6.冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.闭包的特性及优缺点
1.闭包就是一个函数引用另外一个函数的变量
2.*优点:比较灵活,利于封装
*缺点:会造成空间浪费,消耗性能
闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样
3.如何进行数据的交互
（1）HTML赋值（2）使用JS获取（3）JS赋值 （4）script填充JSON
（5）AJAX获取JSON （6）WebSocket实时传输数据
4.如何进行网站的优化(雅虎14条)
1. 减少HTTP请求次数
2.使用CDN(Content Delivery Network, 内容分发网络)
3. 增加Expires Header
4. 压缩页面元素
5. 把样式表放在头上
6. 把脚本文件放在底部
7. 避免CSS表达式
8. 把JavaScript和CSS放到外部文件中
9. 减少DNS查询次数
10. 最小化JavaScript代码
11. 避免重定向 重定向的主要问题是降低了用户体验。
12. 删除重复的脚本文件
13. 配置ETags
14. 缓存Ajax
5.浏览器内核 navigatior.userAgent浏览器标识符
IE:?trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
6.ie低版本中z-index应该注意那些细节
1.元素添加position属性（如relative，absolute等）;
2.清除浮动
7.disabled和readonly的区别
1.Readonly只针对input(text / password)和textarea有效
2.disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
3.但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，
这个元素的值不会被传递出去，而readonly会将该值传递出去
8.window.location下面的参数
location对象 含有当前URL的信息. 属性 href 整个URL字符串.
protocol 含有URL第一部分的字符串,如http:
host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
hostname 包含URL中主机名的字符串.如http://www.cenpok.net ;
port 包含URL中可能存在的端口号字符串.
pathname URL中"/"以后的部分.如~list/index.htm
hash "#"号(CGI参数)之后的字符串.
search "?"号(CGI参数)之后的字符串.
9.原生ajax
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
var oAjax=null;
if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
oAjax.open('GET', url, true);true异步，false同步
//3.发送请求
oAjax.send();
//4.接收服务器的返回
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
fnFaild(oAjax.status);
}
}
};
}
10.typeof返回类型
string,object,function,undefined,boolean,number
11.预加载的几种方式
onload()和document.ready()的区别有以下两点：
(1)、我们可以在页面中使用多个document.ready()，但只能使用一次window.onload(),。
(2)、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。
12.如何让一个DIV水平居中
定位position:relative，
left:50%，margin-left:-div*50%;
top:50%，margin-left:-div*50%;
13.c3的三栏布局
通过定位来布局，给父盒子一个相对定位，然后子盒子一个left:0;另一个right0；中间的margin:0 w右 0 w左
14.transform:属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate:元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
animate:规定动画的名称,规定动画的时长
15.文本3px慢移
zoom:1;
向相反方向移动3px;
16.清除浮动的方法
clear:both;
overflow:hidden;
添加伪类after,设置clear:both;
17.css3定义动画的方法？
阶段划分：0%–100%，从0%到100% ，from...to..
@keyframe tutsFade{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
或者：
@keyframe tutsFade{
from{
opacity:1;
}
to{
opacity:0;
}
}
17.音乐标签的使用
<!--<embed>谷歌 和 <bgsound>ie 和<param>火狐-->
18.数组去重
var aa=[11,5,6,2,3,3,5,7]
var bb=[];
for(var i=0;i< aa.length ;i++){
if(bb.indexOf(aa[i])<0){
bb.push(aa[i]);
}
}
alert(bb);
19.jq里面的循环
each遍历循环
20.追加删除插入节点的操作
appendChild()
removeChild()
insertBefore()
21.用css写一个小三角形
.ss{
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
22.rgba背景透明内容不透明
R：红色值;G：绿色值;B：蓝色值;A：透明度。取值0~1之间
fillter:(opacity=50)
24scrollTop:
方法返回或设置匹配元素的滚动条的垂直位置。
谷歌和ie是wheel.delta
火狐是detail
25页面分为那三层
结构层、行为层，表示层
26阻止事件冒泡
cancelBubbel=true
27css塌陷
1.为父DIV加个边框
2.为父DIV添加overflow:hidden
3.为父DIV添加padding,或者至少添加padding-top;
28 clientX和pageX的区别
可视区的X位置,页面的X位置
29.JSON.parse()和JSON.stringify()
parse()是从一个一个字符串中解析json对象;
stringty是从一个json对象中解析成字符串;
30.HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头
200：表示成功，正常结果；
302：表示重定向，转到别的站点；
304：表示未修改；
400自身错误，文件，代码等错误
400：请求出错
403：文件传输请求错误；
500服务器的错误
31.响应式布局定义的两种方式
@media 和 bootstrap,
32.事件绑定
$(".box").one("click",function(){alert(1)})只能弹一次
$(".box").bind("click",function(){alert(1)}) unbind解除时间绑定
$(".box").live("click",function(){alert(1)})
$(".box").on("click",function(){alert(1)})
$(".box").delegate("li",click,function(){alert(1)})事件委托,
33.
$(function () {
$("<li>121212</li>").appendTo($(".box"));//正确
$(".box").appendTo($("<li>121212</li>"));//错误
})
34.get 传输数据量小:不超过2kb, get方式不安全,
post 相对于安全 通常来说，对数据量无限制
35.link和@import
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
36.call和apply的区别
call方法:?
语法：call(thisObj，Object1,Object2...)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。也就是改变当前的this指向的问题
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。?
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。?
apply方法：?
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。?
说明：?
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。?
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
37.html语义化是什么？
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
38.行内元素有哪些?块级元素有哪些?CSS的盒模型?
答：块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
39.html新特性:
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
40.如下代码：
var obj=JSON.parse('{"name1":"tom","name2":"jack"}')
console.log(obj)会输出什么
41.创建一个表单面板(2个中型输入框在一排显示，还有一个类似select框静态数据交互;
当点击获取值的时候会获取带对应的输入框的值)
42.box-sizing有什么属性？每一个属性代表什么意思？
border-box:包含padding
content-box:单纯的，不包含padding
43.对this的理解
1.函数自运行this指向window对象，
2.$("aa").click(function()),this指向aa
1. 不像C#，this一定是指向当前对象
2. this 一般情况下，都是指向函数的拥有者。
3. 在函数自执行里，this 指向的是 window 对象。
(1)使用标签属性注册事件，此时this 指向的是 window 对象。
(2)对于1，要让 this 指向 input，可以将 this 作为参数传递。
(3)使用 addEventListener 等注册。此时this 也是指向 input。
44.eval有什么作用
把字符串转化为执行语句，注意参数不能使用原始的字符串
45.javascript的同源策略
在同一域名或同一端口下所执行的数据操作
46.截取字符串abcdefg的efg
alert('abcdefg'.substring(4));
indexOf()查找的下标
47.JavaScript中如何检测一个变量是一个String类型？请写出函数实现 isNaN()判断数字
function a(obj){
return typeof(obj)=="string";
}
alert(a(123));
alert(a("abc"));
48.如何实现字符串的逆序排列？
var str=...;
str.split('').reverse(str).join();
slice是截取,前留后不留
49.console.log(1)
setTimeout（function(){//是异步执行加载
console.log(2)
},0)
console.log(3)
会依次输出什么？1 3 2
setTimeout是一个闭包，会延迟时间加载
50.json的好处
1、方便于传输，较少冗余的字符。
2、方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法。
3、易于阅读。json代码的良好结构，可以很直观地了解存的是什么内容。
51.width的问题
52.写一个面向对象的例子写一个面向对象的例子
function person(){
this.age=age;
}
function xiaoming(){
}
new object();
xiaoming.prototype.name=function(){
}
53.var fun=function(){
this.name="tom";
return{
name:"jack";
}
}
var p=new fun()
说出p.name的值 jack
54.var fun=fucntion(){
this.name="tom";
return "jack";返回的一个字符串，没有说返回哪里
}
var p=new fun()
说出p.name的值 tom
55.var fun=function(){}
fun.prototype={
info:{
name:"tom",
age:25,
}
}
var a=new fun()
var b=new fun()
a.info.name="tom"
b.info.name="jack",
说出a.info.name和b.info.name的值 jack,jack
56.function fn(){
//函数的优先级比变量的优先级高，但是赋值还是原有赋值
function a(){}
console.log(a)
var a=2;
console.log(a)
}
fn(1)
以上代码输出的内容 function a(){},2
57.列出css的hack等一系列写法
1、针对IE6、IE7、IE8 加*即可。
2、针对IE6 加_即可。
3、ie89 \0
4、针对ie6,ie7 +号
5、ie678 \9
58.http和https有什么区别？
https://前缀用来加密数据。 向二次握手和三次握手一样。
http网络协议，运用在客户端和传输数据中间的一种文明协议，里面包含一系列的状态值。
http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
59.js中null和undefined的区别？
undefined表示变量声明但未赋值，
null表示尚未定义的对象
60.如何解决跨域问题？
jsp callback
url:"/Handler/CourseHandler.ashx?action=show?callback"
61.列举出position中会出现的问题
1.层级问题
2.ie7中设置定位并且设置层级，不仅需要在当前元素身上定义层级，还需要在父级身上去定义层级
3.fixed在ie6中无效果，
1.什么是作用域连？原型连？
2.jq如何在dom上储存数据？
3.$.extend()的用法？
4.html5的储存方法？
62.闭包的作用及原理
当以内部函数作为返回值时，因为函数结束后内部变量的引用并未结束，所以函数的局部变量无法回收，函数的执行环境被保留下来，因而形成了闭包效果，可以通过该引用访问本该被回收的内部变量。
闭包还使得函数的局部变量成为“私有”变量，只能通过返回的内部函数访问，而无法通过其他任何手段去改变。
因此，闭包可用于维持局部变量和保护变量。
回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器
2问题：body中的onload()函数和jQuery中的document.ready()有什么区别？
回答：onload()和document.ready()的区别有以下两点：
(1)、我们可以在页面中使用多个document.ready()，但只能使用一次window.onload(),。
(2)、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。
3.问题：jQuery中有哪几种类型的选择器？
回答：从我自己的角度来讲，可以有3种类型的选择器，如下：
1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。
2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素
3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。
4.问题js的组成部分
bom dom ecma
5.问题 如何优化代码
代码复用
6.问题清除浮动的方法
margin塌陷，用border；
clear：both；
overflow：hidden
7.问题css的盒子模型
margin ，padding ，content ，border
8..渐进增强：先从低版本浏览器开始设计页面，然后逐渐满足高版本
优雅降级：先满足高版本浏览器的效果，再往低版本做兼容；
ie6-ie8不兼容css3,所以我们要单独给他们去设置样式
9.++在前先自加，++在后先运算在自加
10.js的添加，删除，插入到某个接点的方法？
11.网页制作的会用到的图片格式
Webp,Jpg,gif,icon,tif,svg
Webp的大小比jpg小40%;
12.js的内置对象
string,Date,Math,regexp,location
Array,Boolean,Number
13.Ajax的原理
new(),实例化mlxhttprequest();
open(),传三个参数 get/post,url,true; 使用get的时候放到url后面，
send(),使用post方法穿参数的时候，要把参数放到send里面
14.如何居中一个浮动的元素
绝对定位，left：50%,margin-left:-子盒子的宽的一半
top：50%，margin-top:-子盒子的高的一半
15.for(var j=0,k=0;j<10,k<5;j++,k++){
alert(j+k);0,2,4,6,8;
};
16面向对象包括三个
1.多态：重载和重写，
覆盖，是指子类重新定义父类的虚函数的做法。 重载，是指允许存在多个同名
函数，而这些函数的参数表不同（或许参数个数不同，或许参数类型不同，或许
两者都不同）。
2.封装 封装最好理解了。封装是面向对象的特征之一，是对象和类概念的主要
特性。 封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方
法只让可信的类或者对象操作，对不可信的进行信息隐藏。
封装函数：把过程和数据包括起来，对数据的访问只能通过已经定义的界面；
封装保证了模块具有较好的独立性，是程序维护修改较为容易，对于应用程序的
修改仅限于类的内部，可以将应用程序修改带来的影响减少到最少到最低限度。
3.继承 面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承可以使用
现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。
封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块（类）
；它们的目的都是为了——代码重用。而多态则是为了实现另一个目的——接口重用！
多态的作用，就是为了类在继承和派生的时候，保证使用“家谱”中任一类的实例的
某一属性时的正确调用。
17.
var x = 1;
Action action = () =>
{
var y = 2;
var result = x+y;
Console.Out.WriteLine("result = {0}", result);
};
action();
这里我们首先定义了一个变量“x”，值为1。
然后我们定义了一个匿名函数(一个lambda表达式)赋给类型Action。
Action没有参数，没有返回值，但如果你观察“action”里的定义，
你会发现它使用了“x”变量。这是变量是被action“捕获”或“携带”的，
自动被添加到了action的运行环境中了。
当我们执行action时，它输出了我们预期的结果。请注意，
当我们执行时，原始的“x”此时已经脱离了它当初的变量环境，但它仍然能用。
18.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
em有如下特点：
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
19.同步与异步
同步 指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系。
异步 的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。
alert弹框和文字，异步是你做你的我可以做我的，同步是先弹框在出现字
20.什么是CSS hack?
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识
别不同的符号（什么样的浏览器识别什么样的符号是有标准的，
CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的
21.一次完整的HTTP事务是怎样一个过程？
域名解析 -->
发起TCP的3次握手 -->
建立TCP连接后发起http请求 -->
服务器响应http请求，浏览器得到html代码 -->
浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） -->
浏览器对页面进行渲染呈现给用户
22.图片设置到最佳位置
<!--<imgs src="yourimage.jpg"-->
<!--data-positionx="right"-->
<!--data-positiony="top"/> -->
23.标准盒模型和ie盒模型的区别
1.标准 w3c 盒子模型的范围包括 margin、border、padding、content，
并且 content 部分不包含其他部分。
2.ie 盒子模型的范围也包括 margin、border、padding、content，
和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
3.标准盒模型:就是在网页的顶部加上 doctype 声明。
24.私有前缀
-webkit- 谷歌,苹果
-ms- ie
-moz- 火狐
-o- 欧朋
1.ie和dom事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
5.ie采用冒泡型事件流,Netscape使用捕获型事件,dom采用先捕获后冒泡型事件
6.冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.闭包的特性及优缺点
1.闭包就是一个函数引用另外一个函数的变量
2.*优点:比较灵活,利于封装
*缺点:会造成空间浪费,消耗性能
闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样
3.如何进行数据的交互
（1）HTML赋值（2）使用JS获取（3）JS赋值 （4）script填充JSON
（5）AJAX获取JSON （6）WebSocket实时传输数据
4.如何进行网站的优化(雅虎14条)
1. 减少HTTP请求次数
2.使用CDN(Content Delivery Network, 内容分发网络)
3. 增加Expires Header
4. 压缩页面元素
5. 把样式表放在头上
6. 把脚本文件放在底部
7. 避免CSS表达式
8. 把JavaScript和CSS放到外部文件中
9. 减少DNS查询次数
10. 最小化JavaScript代码
11. 避免重定向 重定向的主要问题是降低了用户体验。
12. 删除重复的脚本文件
13. 配置ETags
14. 缓存Ajax
5.浏览器内核 navigatior.userAgent浏览器标识符
IE:?trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
6.ie低版本中z-index应该注意那些细节
1.元素添加position属性（如relative，absolute等）;
2.清除浮动
7.disabled和readonly的区别
1.Readonly只针对input(text / password)和textarea有效
2.disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
3.但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，
这个元素的值不会被传递出去，而readonly会将该值传递出去
8.window.location下面的参数
location对象 含有当前URL的信息. 属性 href 整个URL字符串.
protocol 含有URL第一部分的字符串,如http:
host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
hostname 包含URL中主机名的字符串.如http://www.cenpok.net ;
port 包含URL中可能存在的端口号字符串.
pathname URL中"/"以后的部分.如~list/index.htm
hash "#"号(CGI参数)之后的字符串.
search "?"号(CGI参数)之后的字符串.
9.原生ajax
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
var oAjax=null;
if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
oAjax.open('GET', url, true);true异步，false同步
//3.发送请求
oAjax.send();
//4.接收服务器的返回
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
fnFaild(oAjax.status);
}
}
};
}
10.typeof返回类型
string,object,function,undefined,boolean,number
11.预加载的几种方式
onload()和document.ready()的区别有以下两点：
(1)、我们可以在页面中使用多个document.ready()，但只能使用一次window.onload(),。
(2)、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。
12.如何让一个DIV水平居中
定位position:relative，
left:50%，margin-left:-div*50%;
top:50%，margin-left:-div*50%;
13.c3的三栏布局
通过定位来布局，给父盒子一个相对定位，然后子盒子一个left:0;另一个right0；中间的margin:0 w右 0 w左
14.transform:属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
translate:元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
animate:规定动画的名称,规定动画的时长
15.文本3px慢移
zoom:1;
向相反方向移动3px;
16.清除浮动的方法
clear:both;
overflow:hidden;
添加伪类after,设置clear:both;
17.css3定义动画的方法？
阶段划分：0%–100%，从0%到100% ，from...to..
@keyframe tutsFade{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
或者：
@keyframe tutsFade{
from{
opacity:1;
}
to{
opacity:0;
}
}
17.音乐标签的使用
<!--<embed>谷歌 和 <bgsound>ie 和<param>火狐-->
18.数组去重
var aa=[11,5,6,2,3,3,5,7]
var bb=[];
for(var i=0;i< aa.length ;i++){
if(bb.indexOf(aa[i])<0){
bb.push(aa[i]);
}
}
alert(bb);
19.jq里面的循环
each遍历循环
20.追加删除插入节点的操作
appendChild()
removeChild()
insertBefore()
21.用css写一个小三角形
.ss{
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
22.rgba背景透明内容不透明
R：红色值;G：绿色值;B：蓝色值;A：透明度。取值0~1之间
fillter:(opacity=50)
24scrollTop:
方法返回或设置匹配元素的滚动条的垂直位置。
谷歌和ie是wheel.delta
火狐是detail
25页面分为那三层
结构层、行为层，表示层
26阻止事件冒泡
cancelBubbel=true
27css塌陷
1.为父DIV加个边框
2.为父DIV添加overflow:hidden
3.为父DIV添加padding,或者至少添加padding-top;
28 clientX和pageX的区别
可视区的X位置,页面的X位置
29.JSON.parse()和JSON.stringify()
parse()是从一个一个字符串中解析json对象;
stringty是从一个json对象中解析成字符串;
30.HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头
200：表示成功，正常结果；
302：表示重定向，转到别的站点；
304：表示未修改；
400自身错误，文件，代码等错误
400：请求出错
403：文件传输请求错误；
500服务器的错误
31.响应式布局定义的两种方式
@media 和 bootstrap,
32.事件绑定
$(".box").one("click",function(){alert(1)})只能弹一次
$(".box").bind("click",function(){alert(1)}) unbind解除时间绑定
$(".box").live("click",function(){alert(1)})
$(".box").on("click",function(){alert(1)})
$(".box").delegate("li",click,function(){alert(1)})事件委托,
33.
$(function () {
$("<li>121212</li>").appendTo($(".box"));//正确
$(".box").appendTo($("<li>121212</li>"));//错误
})
34.get 传输数据量小:不超过2kb, get方式不安全,
post 相对于安全 通常来说，对数据量无限制
35.link和@import
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
36.call和apply的区别
call方法:?
语法：call(thisObj，Object1,Object2...)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。也就是改变当前的this指向的问题
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。?
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。?
apply方法：?
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。?
说明：?
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。?
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
37.html语义化是什么？
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。
38.行内元素有哪些?块级元素有哪些?CSS的盒模型?
答：块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
39.html新特性:
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
40.如下代码：
var obj=JSON.parse('{"name1":"tom","name2":"jack"}')
console.log(obj)会输出什么
41.创建一个表单面板(2个中型输入框在一排显示，还有一个类似select框静态数据交互;
当点击获取值的时候会获取带对应的输入框的值)
42.box-sizing有什么属性？每一个属性代表什么意思？
border-box:包含padding
content-box:单纯的，不包含padding
43.对this的理解
1.函数自运行this指向window对象，
2.$("aa").click(function()),this指向aa
1. 不像C#，this一定是指向当前对象
2. this 一般情况下，都是指向函数的拥有者。
3. 在函数自执行里，this 指向的是 window 对象。
(1)使用标签属性注册事件，此时this 指向的是 window 对象。
(2)对于1，要让 this 指向 input，可以将 this 作为参数传递。
(3)使用 addEventListener 等注册。此时this 也是指向 input。
44.eval有什么作用
把字符串转化为执行语句，注意参数不能使用原始的字符串
45.javascript的同源策略
在同一域名或同一端口下所执行的数据操作
46.截取字符串abcdefg的efg
alert('abcdefg'.substring(4));
indexOf()查找的下标
47.JavaScript中如何检测一个变量是一个String类型？请写出函数实现 isNaN()判断数字
function a(obj){
return typeof(obj)=="string";
}
alert(a(123));
alert(a("abc"));
48.如何实现字符串的逆序排列？
var str=...;
str.split('').reverse(str).join();
slice是截取,前留后不留
49.console.log(1)
setTimeout（function(){//是异步执行加载
console.log(2)
},0)
console.log(3)
会依次输出什么？1 3 2
setTimeout是一个闭包，会延迟时间加载
50.json的好处
1、方便于传输，较少冗余的字符。
2、方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法。
3、易于阅读。json代码的良好结构，可以很直观地了解存的是什么内容。
51.width的问题
52.写一个面向对象的例子写一个面向对象的例子
function person(){
this.age=age;
}
function xiaoming(){
}
new object();
xiaoming.prototype.name=function(){
}
53.var fun=function(){
this.name="tom";
return{
name:"jack";
}
}
var p=new fun()
说出p.name的值 jack
54.var fun=fucntion(){
this.name="tom";
return "jack";返回的一个字符串，没有说返回哪里
}
var p=new fun()
说出p.name的值 tom
55.var fun=function(){}
fun.prototype={
info:{
name:"tom",
age:25,
}
}
var a=new fun()
var b=new fun()
a.info.name="tom"
b.info.name="jack",
说出a.info.name和b.info.name的值 jack,jack
56.function fn(){
//函数的优先级比变量的优先级高，但是赋值还是原有赋值
function a(){}
console.log(a)
var a=2;
console.log(a)
}
fn(1)
以上代码输出的内容 function a(){},2
57.列出css的hack等一系列写法
1、针对IE6、IE7、IE8 加*即可。
2、针对IE6 加_即可。
3、ie89 \0
4、针对ie6,ie7 +号
5、ie678 \9
58.http和https有什么区别？
https://前缀用来加密数据。 向二次握手和三次握手一样。
http网络协议，运用在客户端和传输数据中间的一种文明协议，里面包含一系列的状态值。
http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
59.js中null和undefined的区别？
undefined表示变量声明但未赋值，
null表示尚未定义的对象
60.如何解决跨域问题？
jsp callback
url:"/Handler/CourseHandler.ashx?action=show?callback"
61.列举出position中会出现的问题
1.层级问题
2.ie7中设置定位并且设置层级，不仅需要在当前元素身上定义层级，还需要在父级身上去定义层级
3.fixed在ie6中无效果，
1.什么是作用域连？原型连？
2.jq如何在dom上储存数据？
3.$.extend()的用法？
4.html5的储存方法？
62.闭包的作用及原理
当以内部函数作为返回值时，因为函数结束后内部变量的引用并未结束，所以函数的局部变量无法回收，函数的执行环境被保留下来，因而形成了闭包效果，可以通过该引用访问本该被回收的内部变量。
闭包还使得函数的局部变量成为“私有”变量，只能通过返回的内部函数访问，而无法通过其他任何手段去改变。
因此，闭包可用于维持局部变量和保护变量。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
