本文转载自动力节点 ,如有侵权及时联系。

001 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、hr、link、input、img、meta

002 jpg和png格式的图片有什么区别?

jpg是有损压缩格式,png是无损压缩格式。所以,相同的图片,jpg体积会小。比如我们一些官网的banner图,一般都很大,所以适合用jpg类型的图片。但png分8位的和24位的,8位的体积会小很多,但在某些浏览器下8位的png图片会有锯齿。

003 a标签在新窗口打开链接怎么加属性?

<a target="_blank">链接</a>

target用法:_blank表示在新窗口打开被链接的文档;_self表示在相同的框架中打开被链接文档,这也是默认值;_parent表示在父框架打开被链接文档;_top表示在整个窗口中打开被链接文档。

004 strong与em的异同?

strong:粗体强调标签,强调,表示内容的重要性;
em:斜体强调标签,更强烈强调,表示内容的强调点;

005 说一下src和href的区别?

● src是引入外部资源下载到文档,会暂停其他资源的下载
● href是链接外部资源,不会暂停其他资源的下载

006 请写出完整的注册表单。

<form action="http://localhost8080/xxx/register" method="post">
        用户名<input type="text" name="username" />
    密码<input type="password" name="userpwd" />
    确认密码<input type="password" />
    性别<input type="radio" name="sex" value="male" checked="checked" />男
        <input type="radio" name="sex" value="female" />女<br />
    兴趣爱好<input type="checkbox" name="hobby" value="singing" />唱歌
           <input type="checkbox" name="hobby" value="dancing" />跳舞
           <input type="checkbox" name="hobby" value="running" checked="checked" />跑步
           <input type="checkbox" name="hobby" value="swimming" />游泳
           <input type="checkbox" name="hobby" value="climbing" />攀爬<br />
    学历<select name="education">
           <option value="gz">高中</option>
           <option value="dz">大专</option>
           <option value="bk" selected="selected">本科</option>
           <option value="ss">硕士</option>
           <option value="bs">博士</option>
        </select><br />
    简介<textarea rows="5" cols="30" name="briefIntroduction"></textarea><br />
    <input type="submit" value="注册" />
    <input type="reset" value="重置" /><br />
</form>   

007 请写出具有表格标题为"bjpowernode"的2行3列表格结构。

<tableborder="1"width="100%">
    <!-- 补全代码 -->
    <caption>bjpowernode</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>

008 请写出具有标题属性和代替文本属性的图片标签。

<img alt="img" src="xxx" title="title" />

009 CSS选择器有哪些?

CSS2选择器:元素选择器,id选择器,群组选择器,类选择器,*通配符选择器,后代选择器
CSS2伪类选择器:a:link/visited/hover/active
CSS3选择器:空格 > +相邻兄弟选择器 ~通用选择器(查找后面所有)

010 什么是CSS盒子模型?

一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容)
默认情况下,盒子的width和height属性只是设置content(内容)的宽和高
盒子真正的宽应该是:内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是:内容高度+上下填充+上下边距+上下边框;

011 position的属性值有何区别?

position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、"top”、"right"以及"bottom” 属性使用。  
1]static:默认位置,(static 元素会忽略任何top、bottom、left 或right 声明)一般不常用。
2]relative:位置被设置为relative 的元素,偏移的top,right,bottom,left 的值都以它原来的位置为基准偏移。注意relative 移动后的元素在原来的位置仍占据空间。
3]absolute:位置设置为absolute 的元素,可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position 属性,并且position 的属性值为absolute 或者relative,那么就会依据父容器进行偏移。如果其父容器没有设置position 属性,那么偏移是以body为依据。注意设置absolute 属性的元素在标准流中不占位置。
4]fixed:位置被设置为fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以body 为依据的。注意设置fixed 属性的元素在标准流中不占位置。
总结:position设置为absolute和fixed的元素都脱离了文档标准流;

012 px,rem,em的区别?

px实际上就是像素,用PX设置字体大小时,比较稳定和精确。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em的值并不是固定的;
em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,相对的是HTML根元素。

013 JS 的内置类型有哪些?

基本类型:null、undefined、boolean、number、string、symbol
对象(Object):引用类型(也称为复杂类型)
注意: NaN 也属于 number 类型,并且 NaN 不等于自身。

014 NaN是什么?NaN == NaN吗?

NaN(Not a Number,非数字)是计算机科学中数值数据类型的一类值,表示未定义或不可表示的值。
虽然 NaN 是"Not a Number”,但是它的类型还是数值类型

console.log(typeof NaN === "number"); //true
NaN 和任何东西都不相等——甚至是它自己本身!

console.log(NaN === NaN); //false

015 js中null与undefined区别?

undefined是undefined类型。表示"缺少值",就是此处应该有一个值,但是还没有定义
(1)作为函数的参数,表示该函数的参数不是对象。
(2)作为对象原型链的终点。
null是object类型,代表"空值”,代表一个空对象指针
(1)变量被声明了,但没有赋值时,就等于undefined。
(2)调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时或者return后面什么也没有,返回undefined。

016 什么是事件冒泡?

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对 象层次的最顶层,即document对象(有些浏览器是window)。
打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。

017 说一下同步和异步的区别?

同步会阻塞,异步不会阻塞
同步:程序运行从上而下,浏览器必须把这个任务执行完毕,才能继续执行下一个任务
异步:程序运行从上而下,浏览器任务没有执行完,但是可以继续执行下一行代码,当被调用者得到结果之后会通过回调函数主动通知调用者。

018 split()和 join() 的区别?

前者是切割成数组的形式,后者是将数组转换成字符串;

019 ""和"="的不同?

""会自动转换类型,因此直接判断两边的值
"
="先判断左右两边的数据类型,然后再判断两边的值

020 Javascript如何实现继承?

原型链继承,借用构造函数继承,组合继承,寄生式继承,寄生组合继承

021 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

如果说放在body的封闭之前,将会阻塞其他资源的加载;
如果放在body封闭之后,不会影响body内元素的加载;

022 documen.write和 innerHTML 的区别?

document.write 只能重绘整个页面;
innerHTML 可以重绘页面的一部分;

023 闭包是什么,有什么特性?

闭包就是能够读取其他函数内部变量的函数。
闭包的缺点:滥用闭包函数会造成内存泄露,因为闭包中引用到的包裹函数中定义的变量都永远不会被释放,所以我们应该在必要的时候,及时释放这个闭包函数。

024 已知ID的Input输入框,希望获取这个输入框的输入值,怎么做?

document.getElementById("ID").value;

025 获取到页面中所有的checkbox怎么做?

var domList = document.getElementsByTagName('input')
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length;  //缓存到局部变量
while (len--) {  //使用while的效率会比for循环更高
  if (domList[len].type == 'checkbox') {
      checkBoxList.push(domList[len]);
  }
}

026 设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色。

var dom = document.getElementById("ID”);
dom.innerHTML = "xxxx”;
dom.style.color = "#000”;

027 用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。

var iArray = [];
funtion getRandom(istart, iend){
    var iChoice = istart - iend +1;
    return Math.floor(Math.random() * iChoice + istart;
}
//Math.random()就是获取0-1之间的随机数(永远获取不到1)
for(var i=0; i<10; i++){
    var result= getRandom(10,100);
    iArray.push(result);
}
iArray.sort();

028 把两个数组合并,并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

029 怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点

createDocumentFragment(); //创建一个DOM片段
createElement(); //创建一个具体的元素
createTextNode(); //创建一个文本节点

2)添加、移除、替换、插入

appendChild();  //添加
removeChild();  //移除
replaceChild(); //替换
insertBefore(); //插入

3)查找

getElementsByTagName(); //通过标签名称
getElementsByName(); //通过元素的Name属性的值
getElementById(); //通过元素Id,唯一性

030 字符串反转,如将 '12345678' 变成 '87654321'

//思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 join() 转换为字符串

var str = '12345678';
str = str.split('').reverse().join('');

031 将数字 12345678 转化成 RMB形式 如: 12,345,678

//思路:先将数字转为字符, str= str + '' ;

//利用反转函数,每三位字符加一个 ','最后一位不加; re()是自定义的反转函数,最后再反转回去!
for(var i = 1; i <= re(str).length; i++){
    tmp += re(str)[i - 1];
    if(i % 3 == 0 && i != re(str).length){
        tmp += ',';
    }
}

032 生成5个不同的随机数;

//思路:5个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字!

var num1 = [];
for(var i = 0; i < 5; i++){
    num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
    for(var j = 0; j < i; j++){
        if(num1[i] == num1[j]){
            i--;
        }
    }
}

033 去掉数组中重复的数字方法一;

//思路:每遍历一次就和之前的所有做比较,不相等则放入新的数组中!

array.prototype.unique = function(){
    var len = this.length,
        newArr = [],
        flag = 1;
    for(var i = 0; i < len; i++, flag = 1){
        for(var j = 0; j < i; j++){
            if(this[i] == this[j]){
                flag = 0;        //找到相同的数字后,不执行添加数据
            }
        }
        flag ? newArr.push(this[i]) : '';
    }
    return newArr;
}

034 什么是AJAX?

AJAX(Asynchronous Javascript And XML)其实就是异步的javaScript和XML。它是一组用于异步显示数据的相关技术。换句话说,它在不重新加载网页的情况下发送和检索数据。

035 简述AJAX的优点?

1.页面局部刷新。在读取数据的过程中,用户所面对的不是白屏,而是原来页面的转台,或者正在更新的信息提示状态,只有当接收到全部数据后才能更新相应的内容,而这种更新也是瞬间的用户几乎感受不到。
2.可以充分利用客户端闲置的处理能力,减轻服务器和网络传输的负担。
3.使得web中界面与应用相分离 也可以说是数据与呈现相分离。

036 简述AJAX的缺点?

1.AJAX干掉了Back和History功能,即对浏览器机制的破坏。
2.AJAX安全问题
3.对搜索引擎支持较弱
4.不好调试
5.违背了URL和资源定位的初衷
6.AJAX不是很好支持移动设备

037 AJAX如何处理网络请求?

AJAX模块在处理网络请求的时候包括以下四个步骤
①通过XMLHttpRequest类创建xhr对象
②为xhr对象添加属性与回调方法
③令xhr对象执行open()方法,指明请求被发往某处
④令xhr对象执行send()方法,发出请求。
补充:Ajax可以发出同步请求,也可以发出异步请求。但大多数情况下指的是异步请求,因为同步的Ajax请求对浏览器会产生'阻塞效应。

038 原生JS是如何实现AJax的?

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest(); //规定请求的类型、URL 以及是否异步处理请求。 
ajax.open('GET',url,true); //发送信息至服务器时内容编码类型 
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求 
ajax.send(null); //接受服务器响应数据 
ajax.onreadystatechange = function () { 
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
        //业务处理
    } 
};

039 AJAX几种请求方式?他们的优缺点?

常用的post,get,delete。不常用copy、head、link等等。
区别:
(1)post比get安全 (因为post参数在请求体中。get参数在url上面)
(2)get传输速度比post快 根据传参决定的。(post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
(4)get获取数据 post上传数据(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)。

040 同步和异步请求有什么区别?

同步请求会阻止用户,直到检索到响应,而异步不会阻止用户。

041 回调函数在AJAX中的作用是什么?

回调函数将函数作为参数传递给另一个函数。如果我们必须在网站上执行各种AJAX任务,那么我们可以创建一个用于执行XMLHttpRequest的函数和一个用于执行每个AJAX任务的回调函数。

042 调试AJAX应用程序的工具有哪些?

有几种用于调试AJAX应用程序的工具。
● 适用于Mozilla Firefox的Firebug
● 适用于IE的Fiddler(Internet Explorer)
● JavaScript HTML调试器
● MyEclipse AJAX工具
● 脚本调试器

043 AJAX中请求的准备状态有哪些?

在AJAX中有5个请求的就绪状态。
● 0:意味着未被发现
● 1:表示已打开
● 2:表示HEADERS_RECEIVED
● 3:表示装载
● 4:表示完成

044 jQuery的美元符号$有什么作用?

其实美元符号$只是jQuery的别名,它是jQuery的选择器

045 body中的onload()函数和jQuery中document.ready()有什么区别?

1.我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。

046 jQuery中有哪几种类型的选择器?

正常是有9中,但我们常用的就3种:
1.基本选择器:直接根据id、css类名、元素名返回匹配的dom元素。
2.层次选择器:也叫做路径选择器,可以根据路径层次来选择相应的DOM元素。
3.过滤选择器:在前面的基础上过滤相关条件,得到匹配的dom元素。

047 jQuery对象和DOM对象是怎样转换的?

jQuery对象是一个包含了dom对象的数组 可以通过jQuery对象[下标]获取dom对象
将dom对象放入$("")中转为jQuery对象

048 jQuery中的delegate()函数有什么作用?

如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:

$("ul").delegate("li","click",function(){$(this).hide();}) //当元素在当前页面不可用时,可以使用delegate()

049 使用jQuery将页面上的所有元素边框设置为2px宽的虚线?

<script language="javascript" type="text/javascript">
   $("*").css("border", "2px dotted red");
</script>

050 如何使用jQuery实现点击按钮弹出一个对话框?

<script type="text/javascript"> 
$(document).ready(function () { 
    $('#Button1').click(function () { 
        alert($('#inputField').attr("value")); 
    }); 
}); 
</script>

051 如何用jQuery禁用浏览器的前进后退按钮?

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    window.history.forward(1);
    //OR
    window.history.forward(-1);
});
</script>