常用的HTML标签与含义
1:div，块级元素，类似于盒子，可以在里面存放内容
2:p，块级元素，存放一段话
3:h1~h6，块级元素，用来存放标题
4:span，行内元素，用来处理一段话中的若干个文字
5:table，用来创建表格的标签
6:input，行内元素，用来做输入的标签
7:hr，显示一行分割线
8:a标签，显示一个链接
9:img标签，显示一个图片
10:ul，宽级元素，显示列表
11:strong，显示粗体元素
12:title，显示当前标题
13:ol，创建一个标有数字的列表
下列动作的执行结果
function doSomething(){
alert(this);
}
1:element.onclick = doSomething;点击element之后显示什么？
展开：
element.onclick = function(){
alert(this);
}
此时我们看到这个是属于element的对象方法，所以此时返回的[Object element]
2:element.onclick = function() {doSomething()}， 点击element元素之后显示什么？
展开：
element.onclick = function(){
(function doSomething(){
alert(this);
})();
}
展开之后，我们可以看到，相当于在里面自执行了doSomething函数，不属于element的方法，所以默认的就是window的方法，所以返回的是[Object window]
3:直接执行doSomething，那就是属于全局函数，this指向window，所以返回[Object window]
Javascript实现排序
var arr = [1,2,3,4,5,6,10,12,13];
//直接调用sort会按照字符串排序，需要给函数指定判断标准
var result = arr.sort(function(a,b){
return a - b;
});
显示当前布局的UI
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#page { width: 520px; }
.main { width: 200px; float: left; padding-left: 110px; }
.main { border: 1px solid #000; }
.nav { width: 200px; float: right; }
.nav, .sub { border: 1px dashed #000; height: 300px; }
.sub { width: 100px; float: left; margin: 10px 0 10px -100px; }
.sub { height: 280px; }
</style>
</head>
<body>
<div id="page">
<div class="main">
<div class="sub"></div>
</div>
<div class="nav"></div>
</div>
</body>
</html>
分析一下，总的box是page，宽度520，两个直系child，左侧元素左浮动，右侧元素右浮动，然后看到左侧元素又一个padding-left的操作，然后里面的sub左浮动的时候有对应的padding阻挡，所有又一个margin的左侧拉回。所以最后的样子如下：
代码功能描述
if (window.addEventListener) {
var addListener = function(el, type, listener, useCapture) {
el.addEventListener(type, listener, useCapture);
};
}else if (document.all) {
addListener = function(el, type, listener) {
el.attachEvent("on" + type, function() {
listener.apply(el);
});
};
}
1:代码功能，实现事件注册
2:优点：实现多浏览器的事件绑定，缺点：document.all的应用
3:listener.apply(el);作用：使得IE中listener的this 为 el，与其它浏览器一致
4:改进：document.all改成window.attachEvent; useCapture的默认
编写一个JavaScript 函数toRGB，它的作用是转换CSS中常用的颜色编码
要求示例如下：
alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)
alert(toRGB("invalid")); // 输出 invalid
alert(toRGB("#G00")); // 输出 #G00
看样例分析一下，对于invalid输出invalid，然后对于RGB表示的直接对应输出，对于六位十六进制表示的，输出对应的十进制
function toRGB(str){
if(str=="invalid"){
return "invalid";
}
var valid = /^#[0-9a-zA-z]{3}$/;
if(valid.test(str)){
return str; //符合三位RGB
}
result = []
for(let i = 1; i <= 6; i += 2){
let tmp = str.substr(i,2);
let no = parseInt(tmp, 16);
result.push(no);
}
return "rgb(" + result.join(',') + ")";
}
功能添加
var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
}
}
分析：Obj对象下面有msg属性和shout、waitAndShout方法。需求时隔五秒执行shout方法，那么肯定要用到setTimeout函数。然后如果我们直接在waitAndShout执行setTimeout的话，当前函数的调用者是window，所以需要把对象传递进去，交给setTimeout作为执行对象：
setTimeout(function () {
var self=this;
return function() {
self.shout();
}
}.call(this),5000);
当setTimeout里面的函数调用call的时候返回的是一个直接执行函数，所以返回一个函数进行执行
javascript判断有效邮件地址
function checkEmail(email){
var reg = /^\w+([\._]?\w+)*@\w+([\._]?\w+)*(\.\w{2,3})+$/;
var res = reg.test(email);
if(res){
return true;
}else{
return false;
}
}
console.log(checkEmail("9@9.com"));//true
console.log(checkEmail("9@9"));//false
分为三个部分，@前面的字母开头，中间任意数量字母或符号，@后面第一位规则一致，最后匹配后缀
各自语言的注释方法
html: <!-- -->
javascript: // /**/
css: /* */
java: // /* */
python: # ''' '''
某东商品的列表显示页的排版布局
<div class="item">
<div class="img">
</div>
<div class="desc">商品描述</div>
<div class="prime">¥8848</div>
</div>
Dom结构生成
目标：
<div id=”example”>
<p class=”slogan”>京东商城</p>
</div>
程序
var divEle = document.createElement("div");
divEle.id="example";
var pEle = document.createElement("p");
pEle.className = "slogan";
var tNode = document.createTextNode("京东商城");
pEle.appendChild(tNode);
divEle.appendChild(pEle);
document.body.append(divEle);
CSS定义p标签，要求实现以下效果: 字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)
p{
color:#00ff00;
+color: #ff0000;
_color: #000000;
}
通用事件注册函数
function addEvent(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvnet("on" + type, handler);
}else{
element["on" + type] = handler;
}
}
其中addEventListener是DOM2级函数，attachEvent是IE的，on+type是DOM0级函数
addEventListener可以添加多次，按顺序执行
attachEvent可以添加多次，逆序执行
on+type添加多次，只执行最后一个
Javascript中String的trim实现
String.prototype.trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
格式化URL的query参数为一个对象
function parseQueryString(url){
var keyList = url.split("?")[1].split("&");
var result = {};
var keyLen = keyList.length;
for(let i = 0; i < keyLen; ++i){
let k = keyList[i].split("=")[0];
let v = keyList[i].split("=")[1];
result[k] = v;
}
return result;
}
var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2&key3=3&key4=5";
var obj = parseQueryString(url);
console.log(obj.key0);//输出0
表格布局
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr><th>国家</th><th>网站名</th><th>URL</th><th>Alexa排名</th></tr>
</thead>
<tbody>
<tr><td>中国</td><td>淘宝名</td><td>www.taobao.com</td><td>38</td></tr>
<tr><td rowspan="2">美国</td><td>Ebay</td><td>www.ebay.com</td><td>22</td></tr>
<tr><td>Amazon</td><td>www.amazon.com</td><td>27</td></tr>
<tr align="right"><td colspan="4">Alexa.com</td></tr>
</tbody>
</table>
Javascript数组去重
Array.prototype.removeMore = function(){
let result = [];
let arrLen = this.length;
for(let i = 0; i < arrLen; ++i){
if(result.indexOf(this[i]) < 0){
result.push(this[i]);
}
}
return result;
}
看到个想法比较奇特的
Array.prototype.unique = function(){
var tmp = new Array();
for(var m in this){
tmp[arr[m]]=1;
}
//再把键和值的位置再次调换
var tmparr = new Array();
for(var n in tmp){
tmparr.push(n);
}
return tmparr;
}
请根据下面的描述，用JSON语法编写一个对象: “小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名小学老师。
{
"name":"小明",
"age": 22,
"from": "杭州",
"兴趣": ["看电影", "旅游"],
"sister":[
{"name":"小芬", "age":"25", "job":"护士"},
{"name":"小芳", "age":"23", "job":"小学老师"},
]
}
表单实现
<form>
<dl>
<dt>基本信息</dt>
<dd>姓名:<input type="text" name=""></dd>
<dd>
性别:
<select>
<option value="1" selected="selected">男性</option>
<option value="0">女性</option>
</select>
</dd>
<dt>设置密码</dt>
<dd>密码:<input type="password" name=""></dd>
<dd style="-webkit-margin-start: 9px;">再输一遍:<input type="password" name=""></dd>
</dl>
<input type="button" name="" value="确定">
<input type="button" name="" value="取消">
</form>
原文来自http://blog.csdn.net/lijiajun95/article/details/54783433?ref=myrecommend，感谢博主资料
