// jQuery的入口函数
// 作用跟 window.onload 是一样的
// jQuery的入口函数 第一种形式
jQuery入口函数与js入口函数的区别（理解） js入口函数指的是：window.onload = function() {}; 区别一：书写个数不同 Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。 jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。 区别二：执行时机不同 Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。 文档加载的顺序：从上往下，边解析边执行。
jQuery对象和DOM对象的相互转换:
DOM对象此处指的是：使用js操作DOM返回的结果。
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。
jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。
（联想：手机和有手机壳的手机，手机就好比是DOM对象，有手机壳的手机就好比是jQuery对象）
var
</script>
几个自己经常分不清的选择器：
空格 后代选择器
// 后代选择器
// 符号：空格
// 作用：选择指定元素下面的所有 指定的元素（后代）
$("#ulItem li").css("background", "pink");
});
find(selector) 查找指定元素的所有后代元素（子子孙孙）
JQ02: toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。$(selector).toggleClass(“liItem”); 显示和隐藏 1 show方法 作用：让匹配的元素展示出来 // 用法一： // 不带参数，作用等同于 css(“display”, ”block”) /* 注意：此时没有动画效果 */ $(selector).show();
// 用法二：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);
// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数 切记这种设计思想 在执行完动画后的回调函数
$(selector).show(2000, function() {});
注意：
jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数是：可以是指定字符或者毫秒数
2 hide方法
作用：让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000); // 1000表示什么？
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();
一、滑入滑出动画 1滑入动画效果（联想：生活中的卷帘门） 作用：让元素以下拉动画效果展示出来 $(selector).slideDown(speed,callback);
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
$(selector).slideDown();
2 滑出动画效果
作用：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);
3滑入滑出切换动画效果
$(selector).slideToggle(speed,callback);
参数等同与隐藏和显示
二、淡入淡出动画 1 淡入动画效果 作用：让元素以淡淡的进入视线的方式展示出来 $(selector).fadeIn(speed, callback); 2 淡出动画效果 作用：让元素以渐渐消失的方式隐藏起来 $(selector).fadeOut(1000); 3淡入淡出切换动画效果 作用：通过改变不透明度，切换匹配元素的显示或隐藏状态 $(selector).fadeToggle('fast',function(){}); 参数等同与隐藏和显示
4改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
停止动画 //作用：停止当前正在执行的动画 $(selector).stop(); 为什么要停止动画？ 如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站） 动画队列里面的后续动画不会执行，直到第一个动画执行完成。 注意：如果一个元素的动画还没有执行完，此时调用sotp()方法，那么动画将会停止，回调函数也不会被执行。 有规律的体现： jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:0.4;} 这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。
自定义动画 注意：所有能够执行动画的属性必须只有一个数字类型的值。 比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
作用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);
jQuery节点操作
动态创建元素
// $()函数的另外一个作用：动态创建元素
var
添加元素 在元素的最后一个子元素后面追加元素：append()（重点） 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以） 如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。 如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。 常用参数：htmlString 或者 jQuery对象
// 在$(selector)中追加$node
$(selector).append(
不常用操作：（用法跟append()方法基本一致） 1 appendTo() 作用：同append()，区别是：把$(selector)追加到node中去 $(selector).appendTo(node);
2 prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
3 after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
4 before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
html创建元素（推荐使用，重点） 作用：设置或返回所选元素的html内容（包括 HTML 标记） 设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同 // 动态创建元素 $(selector).html(‘传智播客’); // 获取html内容 $(selector).html(); // 传入一个空字符串，表示清空内容 $(selector).html(“”);
清空元素 // 清空指定元素的所有子元素（光杆司令） // 没有参数 $(selector).empty(); // “自杀” 把自己（包括所有内部元素）从文档中删除掉 $(selector).remove();
复制元素 作用：复制匹配的元素 // 复制$(selector)所匹配到的元素 // 返回值为复制的新元素 $(selector).clone();
总结： 推荐使用.html(“”)方法来创建元素或者html("")清空元素
操作属性、值和内容 属性操作 设置属性： // 第一个参数表示：要设置的属性名称 // 第二个参数表示：改属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获取属性： // 参数为：要获取的属性的名称，改操作会返回指定属性对应的值 $(selector).attr(“title”);
移除属性： // 参数为：要移除的属性的名称 $(selector).removeAttr(“title”); 注意：checked、selected、disabled要使用.prop()方法。 prop方法通常用来控制DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。 细节参考：http://api.jquery.com/prop/
值和内容 val()方法： 作用：设置或返回表单元素的值，例如：input,select,textarea的值 // 获取匹配元素的值，只匹配第一个元素 $(selector).val(); // 设置所有匹配到的元素的值 $(selector).val(“具体值”);
text() 方法: 作用：设置或获取匹配元素的文本内容 //获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！） $(selector).text(); //设置操作带参数，参数表示要设置的文本内容 $(selector).text(“我是内容”);
sublime 设置打开浏览器： 选择preferences --- key binding --user 复制下面内容到json数组里面 //ie { "keys": ["f12"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files/Internet Explorer/iexplore.exe", "extensions": "." } }, //chorme { "keys": ["alt+f12"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "extensions": "." } }
JQ 事件绑定： 历程：简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on
简单事件绑定：
click(handler) 单击事件
blur(handler) 失去焦点事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
dbclick(handler) 双击事件
change(handler) 改变事件，如：文本框值改变，下来列表值改变等
focus(handler) 获得焦点事件
keydown(handler) 键盘按下事件
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
//事件响应方法
});
比简单事件绑定方式的优势：
可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){})
缺点：要绑定事件的元素必须存在文档中。
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库))
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click","span", function() {});
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
JQ事件解绑 unbind() 方式 作用：解绑 bind方式绑定的事件 $(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件 undelegate() 方式 作用：解绑delegate方式绑定的事件 $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件
off解绑on方式绑定的事件（重点）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, "**" );
JQ事件触发 简单事件触发 $(selector).click(); //触发 click事件 trigger方法触发事件 $(selector).trigger(“click”); triggerHandler触发 事件处理函数，不触发浏览器行为 比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);
jQuery事件对象 event.data 传递给事件处理程序的额外数据 event.currentTarget 等同于this，当前DOM对象 event.pageX 鼠标相对于文档左部边缘的位置 event.target 触发事件源，不一定===this event.stopPropagation()； 阻止事件冒泡 event.preventDefault(); 阻止默认行为 event.type 事件类型：click，dbclick… event.which 鼠标的按键类型：左1 中2 右3 event.keyCode 键盘按键代码
JQ链式编程： 原理---return this; 隐式迭代:在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。$(“li”).css(“font-size”); // 获取的是第一个li的样式
each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
多库共存 此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
// 模拟另外的库使用了 $ 这个变量
// 此时，就与jQuery库产生了冲突
var $ = { name : “itecast” };
解决方式：
// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法
$.noConflict();
举例：
<script>
/*var $ = 123;
console.log($);
// noConflict 释放对$符号的控制权
$.noConflict();
jQuery(function () {
jQuery("li").css("color", "red");
});*/
// 如果 $和jQuery这两个都被占用了，那么还可以用 noConflict
var J = $.noConflict();
console.log(J);
var $ = 123;
var jQuery = 456;
</script>
jQuery插件机制 jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。 jQuery是通过插件的方式，来扩展它的功能： 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用。 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。 （联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）
第三方插件
jQuery.color.js
animate()自定义动画：不支持背景的动画效果
animate动画支持的属性列表
jQuery.lazyload.js
使用步骤：
1. 引入jQuery文件
2. 引入插件
3. 使用插件
制作插件
如何创建jQuery插件：
http://learn.jquery.com/plugins/basic-plugin-creation/
给全局jQuery函数扩展方法
$.pluginName = function() {};
// 调用
$.pluginName();
给jQuery对象扩展方法
$.fn.pluginName = function() {};
$(“div”).pluginName();
jQueryUI jQueryUI专指由jQuery官方维护的UI方向的插件。 官方API：http://api.jqueryui.com/category/all/ 其他教程：jQueryUI教程 基本使用: 1. 引入jQueryUI的样式文件 2. 引入jQuery 3. 引入jQueryUI的js文件 4. 使用jQueryUI功能
// 函数声明 function aa() {} // 函数表达式 var func = function funcName (num1) { console.log(funcName); };
切记：
window.onload = function(){
var lis = document.getElementByTagName("li");
for(var i = 0 ; i < lis.length;i++) {
lis[i].onclick = (function(){
return function(){
alert(num);
}
})(i);
}
}
1.图标引入 网站名/favicon.ico 都可以下载到所有网站的图标 引入图标 比如www.jd.com/favicon.ico 1. 2. bitbug.net这个网站中有这句话 a) 绿色部分要删掉 2.小标签（s,del,em,I,u,ins…）我们做一些小的效果图，会很青睐他们 Font: 400 12px/12px “宋体”; 加粗，大小，行高，格式；（不行高，默认为0）。 s del : 删除线 em I : 倾斜 uins : 下划线 outline-style: none; 清除外边线（蓝色） text-decoration: none; 清除下划线，删除线。 Resize : none; 文本框禁止拖拽。 Font-weight: normal; 加粗变正常 Font-style: normal; 倾斜变正常。 3. 内外边距问题 Padding: 可以加背景色。 Margin： 不可以加背景色的。 Border: 不可以加背景色的。（你可以单独给他加边线的颜色） 行高和高度 行高：文字的高度。（给父盒子行高，子盒子不会有高度） 高度：盒子的高度。（给父盒子加高度，子盒子不继承。宽例外） 盒子稳定性 宽高：最稳定的。 Padding：比较稳定。（里面不能放内容，背景图除外） Margin：最不稳定。（1.不能放内容。2不能加背景。3.容易出现外边距合 并） 优点：用起来比较方便。 居中问题 盒子左右居中 Margin： 0 auto; 盒子上下居中 （父盒子给padding, 子盒子给margin。 定位）
文字左右居中： 1.text-align:center; 2.paddign: 0 10px;
文字上下居中： 1.line-height: 盒子的高度。 2.。。。
模拟鼠标 Cursor : pointer; 鼠标变成小手 Cursor : text; 鼠标变成插入条光标 Cursor : move; 鼠标变成四角箭头 Cursor : default; 鼠标变成白色箭头 小知识 背景图不会撑开盒子。 图片和文字会撑开盒子。（文字比较特殊） 在小标签（行内标签）的情况下：定位之后，不写left属性，默认的地方会出现的padding和a链接中的文字之后。 圆角矩形 border-radius: 1em; border-radius: 50%; border-radius: 宽高一半（px）; border-radius: 左上角 右上角 右下角 左下角;
清除浮动： 原因：父盒子高度为0，子盒子不占位置。 清除浮动目的：让父盒子有高度。 解决办法： a. clear: both ; 看图一 b. overflow: hidden ( 缺点：超出盒子的部分会被隐藏) 看图二 c. 单伪元素标签法 .clearfix:after { content: “”; height: 0; visibility: hidden; overflow: hidden; display: block clear: both; } .clearfix { *zoom: 1; /兼容IE678/ }
d.双伪元素标签法
.clearfix:after ,.clearfix:before {
content: “”;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼用IE678*/
}
盒子居中 左右居中：1.给盒子absolute定位，left=50%； 2.让盒子移动。 Margin-left: -自身宽度一半。 上下居中：1.给盒子absolute定位，top=50%； 2.让盒子移动。 Margin-top: -自身高度一半。 操作：定位—>absolute。 左右居中： left：50%； margin-left: 负盒子自身宽一半 上下居中： top： 50%； margin-top：负盒子自身高一半。
左右移动盒子 Margin正值的情况下。指的是给盒子外边距。 Margin负值的情况下。反方向移动盒子。（margin-left ： margin-top） 继承问题 宽度会被继承 行高会被继承 高度不会被继承 文字居中（text-align:center）可以被继承 浮动问题 不管两个盒子之间的关系是什么。只要不是父子关系。 他们相互都会受到浮动的影响。 解决方法：让子盒子，浮动的子盒子，不要超出父盒子。 Li和a的关系 如果鼠标放到空白处a链接变色，说明a链接撑开的li 。 如果鼠标放到空白处a链接不变色，说明li包含的a链接 。 属性冲突问题 定位中的left和right不冲突。以left为准。 定位中的top和bottom不冲突。以top为准 半透明 opacity: 0.5； 他可以让盒子半透明。（缺点：就是内容跟着一起半透明） background：rgba(255,255,255,0.5); C3透明度用法。 background：rgba(255,255,255, .5); C3透明度用法。 界面跳转 a 链接如果不想跳转，方法如下 javascript:; javascript:void(0); 宽度继承 是在加上padding值之后，和宽度的总和，等于父盒子的宽度。 层级 层级和占不占位置没有关系。（relative本身就是站位置的） 层级可以继承（拼爹）。（浮动和定位都是不能继承的） 定位的盒子是最高的。（相比的是标准流和浮动的盒子。） 只有定位的盒子才有层级。 如果都有定位，后续的盒子会压住前面的盒子。
// jQuery的入口函数
// 作用跟 window.onload 是一样的
// jQuery的入口函数 第一种形式
jQuery入口函数与js入口函数的区别（理解） js入口函数指的是：window.onload = function() {}; 区别一：书写个数不同 Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。 jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。 区别二：执行时机不同 Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。 文档加载的顺序：从上往下，边解析边执行。
jQuery对象和DOM对象的相互转换:
DOM对象此处指的是：使用js操作DOM返回的结果。
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。
jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。
（联想：手机和有手机壳的手机，手机就好比是DOM对象，有手机壳的手机就好比是jQuery对象）
var
</script>
几个自己经常分不清的选择器：
空格 后代选择器
// 后代选择器
// 符号：空格
// 作用：选择指定元素下面的所有 指定的元素（后代）
$("#ulItem li").css("background", "pink");
});
find(selector) 查找指定元素的所有后代元素（子子孙孙）
JQ02: toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。$(selector).toggleClass(“liItem”); 显示和隐藏 1 show方法 作用：让匹配的元素展示出来 // 用法一： // 不带参数，作用等同于 css(“display”, ”block”) /* 注意：此时没有动画效果 */ $(selector).show();
// 用法二：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);
// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数 切记这种设计思想 在执行完动画后的回调函数
$(selector).show(2000, function() {});
注意：
jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数是：可以是指定字符或者毫秒数
2 hide方法
作用：让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000); // 1000表示什么？
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();
一、滑入滑出动画 1滑入动画效果（联想：生活中的卷帘门） 作用：让元素以下拉动画效果展示出来 $(selector).slideDown(speed,callback);
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
$(selector).slideDown();
2 滑出动画效果
作用：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);
3滑入滑出切换动画效果
$(selector).slideToggle(speed,callback);
参数等同与隐藏和显示
二、淡入淡出动画 1 淡入动画效果 作用：让元素以淡淡的进入视线的方式展示出来 $(selector).fadeIn(speed, callback); 2 淡出动画效果 作用：让元素以渐渐消失的方式隐藏起来 $(selector).fadeOut(1000); 3淡入淡出切换动画效果 作用：通过改变不透明度，切换匹配元素的显示或隐藏状态 $(selector).fadeToggle('fast',function(){}); 参数等同与隐藏和显示
4改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
停止动画 //作用：停止当前正在执行的动画 $(selector).stop(); 为什么要停止动画？ 如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站） 动画队列里面的后续动画不会执行，直到第一个动画执行完成。 注意：如果一个元素的动画还没有执行完，此时调用sotp()方法，那么动画将会停止，回调函数也不会被执行。 有规律的体现： jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:0.4;} 这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。
自定义动画 注意：所有能够执行动画的属性必须只有一个数字类型的值。 比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
作用：执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);
jQuery节点操作
动态创建元素
// $()函数的另外一个作用：动态创建元素
var
添加元素 在元素的最后一个子元素后面追加元素：append()（重点） 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以） 如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。 如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。 常用参数：htmlString 或者 jQuery对象
// 在$(selector)中追加$node
$(selector).append(
不常用操作：（用法跟append()方法基本一致） 1 appendTo() 作用：同append()，区别是：把$(selector)追加到node中去 $(selector).appendTo(node);
2 prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
3 after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
4 before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
html创建元素（推荐使用，重点） 作用：设置或返回所选元素的html内容（包括 HTML 标记） 设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同 // 动态创建元素 $(selector).html(‘传智播客’); // 获取html内容 $(selector).html(); // 传入一个空字符串，表示清空内容 $(selector).html(“”);
清空元素 // 清空指定元素的所有子元素（光杆司令） // 没有参数 $(selector).empty(); // “自杀” 把自己（包括所有内部元素）从文档中删除掉 $(selector).remove();
复制元素 作用：复制匹配的元素 // 复制$(selector)所匹配到的元素 // 返回值为复制的新元素 $(selector).clone();
总结： 推荐使用.html(“”)方法来创建元素或者html("")清空元素
操作属性、值和内容 属性操作 设置属性： // 第一个参数表示：要设置的属性名称 // 第二个参数表示：改属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获取属性： // 参数为：要获取的属性的名称，改操作会返回指定属性对应的值 $(selector).attr(“title”);
移除属性： // 参数为：要移除的属性的名称 $(selector).removeAttr(“title”); 注意：checked、selected、disabled要使用.prop()方法。 prop方法通常用来控制DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。 细节参考：http://api.jquery.com/prop/
值和内容 val()方法： 作用：设置或返回表单元素的值，例如：input,select,textarea的值 // 获取匹配元素的值，只匹配第一个元素 $(selector).val(); // 设置所有匹配到的元素的值 $(selector).val(“具体值”);
text() 方法: 作用：设置或获取匹配元素的文本内容 //获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！） $(selector).text(); //设置操作带参数，参数表示要设置的文本内容 $(selector).text(“我是内容”);
sublime 设置打开浏览器： 选择preferences --- key binding --user 复制下面内容到json数组里面 //ie { "keys": ["f12"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:/Program Files/Internet Explorer/iexplore.exe", "extensions": "." } }, //chorme { "keys": ["alt+f12"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "extensions": "." } }
JQ 事件绑定： 历程：简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on
简单事件绑定：
click(handler) 单击事件
blur(handler) 失去焦点事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
dbclick(handler) 双击事件
change(handler) 改变事件，如：文本框值改变，下来列表值改变等
focus(handler) 获得焦点事件
keydown(handler) 键盘按下事件
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
//事件响应方法
});
比简单事件绑定方式的优势：
可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){})
缺点：要绑定事件的元素必须存在文档中。
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库))
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click","span", function() {});
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
JQ事件解绑 unbind() 方式 作用：解绑 bind方式绑定的事件 $(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件 undelegate() 方式 作用：解绑delegate方式绑定的事件 $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件
off解绑on方式绑定的事件（重点）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, "**" );
JQ事件触发 简单事件触发 $(selector).click(); //触发 click事件 trigger方法触发事件 $(selector).trigger(“click”); triggerHandler触发 事件处理函数，不触发浏览器行为 比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);
jQuery事件对象 event.data 传递给事件处理程序的额外数据 event.currentTarget 等同于this，当前DOM对象 event.pageX 鼠标相对于文档左部边缘的位置 event.target 触发事件源，不一定===this event.stopPropagation()； 阻止事件冒泡 event.preventDefault(); 阻止默认行为 event.type 事件类型：click，dbclick… event.which 鼠标的按键类型：左1 中2 右3 event.keyCode 键盘按键代码
JQ链式编程： 原理---return this; 隐式迭代:在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。$(“li”).css(“font-size”); // 获取的是第一个li的样式
each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
多库共存 此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
// 模拟另外的库使用了 $ 这个变量
// 此时，就与jQuery库产生了冲突
var $ = { name : “itecast” };
解决方式：
// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法
$.noConflict();
举例：
<script>
/*var $ = 123;
console.log($);
// noConflict 释放对$符号的控制权
$.noConflict();
jQuery(function () {
jQuery("li").css("color", "red");
});*/
// 如果 $和jQuery这两个都被占用了，那么还可以用 noConflict
var J = $.noConflict();
console.log(J);
var $ = 123;
var jQuery = 456;
</script>
jQuery插件机制 jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。 jQuery是通过插件的方式，来扩展它的功能： 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用。 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。 （联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）
第三方插件
jQuery.color.js
animate()自定义动画：不支持背景的动画效果
animate动画支持的属性列表
jQuery.lazyload.js
使用步骤：
1. 引入jQuery文件
2. 引入插件
3. 使用插件
制作插件
如何创建jQuery插件：
http://learn.jquery.com/plugins/basic-plugin-creation/
给全局jQuery函数扩展方法
$.pluginName = function() {};
// 调用
$.pluginName();
给jQuery对象扩展方法
$.fn.pluginName = function() {};
$(“div”).pluginName();
jQueryUI jQueryUI专指由jQuery官方维护的UI方向的插件。 官方API：http://api.jqueryui.com/category/all/ 其他教程：jQueryUI教程 基本使用: 1. 引入jQueryUI的样式文件 2. 引入jQuery 3. 引入jQueryUI的js文件 4. 使用jQueryUI功能
// 函数声明 function aa() {} // 函数表达式 var func = function funcName (num1) { console.log(funcName); };
切记：
window.onload = function(){
var lis = document.getElementByTagName("li");
for(var i = 0 ; i < lis.length;i++) {
lis[i].onclick = (function(){
return function(){
alert(num);
}
})(i);
}
}
-
常用正则表达式 一、校验数字的表达式 1 数字：^[0-9]$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9])$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$ 8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$ 9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 11 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$ 12 非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$ 13 非负整数：^\d+$ 或 ^[1-9]\d*|0$ 14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ 15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$ 16 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$ 17 正浮点数：^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$ 18 负浮点数：^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$ 19 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$ 二、校验字符的表达式 1 汉字：^[\u4e00-\u9fa5]{0,}$ 2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 3 长度为3-20的所有字符：^.{3,20}$ 4 由26个英文字母组成的字符串：^[A-Za-z]+$ 5 由26个大写英文字母组成的字符串：^[A-Z]+$ 6 由26个小写英文字母组成的字符串：^[a-z]+$ 7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$ 9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$ 10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$ 11 可以输入含有^%&',;=?$"等字符：[^%&',;=?$\x22]+ 12 禁止输入含有
的字符：[^~\x22]+ 三、特殊需求表达式 1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$ 2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? 3 InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$ 4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ 5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$ 6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7} 7 身份证号(15位、18位数字)：^\d{15}|\d{18}$ 8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 10 密码(以字母开头，长度在618之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$ 11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2} 13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$ 14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$ 15 钱的输入格式： 16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]$ 17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9])$ 18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9])$ 19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$ 20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$ 21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$ 22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})(.[0-9]{1,2})?$ 23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3}))(.[0-9]{1,2})?$ 24 备注：这就是最终结果了,别忘了"+"可以用""替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里 25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$ 26 中文字符的正则表达式：[\u4e00-\u9fa5] 27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1)) 28 空白行的正则表达式：\n\s\r (可以用来删除空白行) 29 HTML标记的正则表达式：<(\S*?)[^>]>.?</\1>|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力) 30 首尾空白字符的正则表达式：^\s|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式) 31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始) 32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字) 33 IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)密码的： /^[A-Z]{6,18}|[a-z]{6,18}|[0-9]{6,18}$/ 只有数字或者字母
/^([a-z].[A-Z])|([A-Z].[a-z])/ 有大小写的字母
/^([a-z].[0-9])|([A-Z].[0-9])|[0-9].*[a-zA-Z]/
/^[A-Za-z0-9]+[_][A-Za-z0-9]*$/
声明和使用 @正则的声明和使用 通过构造函数定义 var 变量名= new RegExp(/表达式/); 通过直接量定义（简单方便，我们一般用这个） var 变量名= /表达式/; 常用方法，可用于检测传入的字符串是否符合该规则并返回布尔值 exp.test("要检测的字符串") 预定义类 @预定义类和转义符 . [^\n\r] 除了换行和回车之外的任意字符 \d [0-9] 数字字符digit \D [^0-9] 非数字字符 \w [a-zA-Z0-9_] 单词字符(所有的字母数字和_) word \W [^a-zA-Z0-9_] 非单词字符 \s [\f\r\n\t\v] 不可见字符 space \S [^\f\r\n\t\v] 可见字符 转义符 \f 表示换页 form feed \t 表示水平制表符 table \v 表示垂直制表符 vertical table
\r,\n,\r\n的区别
在万恶的旧社会，打字机换行（\n newline）之后只会下移一行，需要回到一行的开头（\r return）才能继续打字
老式的操作系统也继承了打字机的这一特性，但用户换行之后一般都是要回到开头的，因此新式的操作系统为了方便将键盘上的Enter键的含义修改为\r\n
字符类 @字符类 简单类[abc] 表示该位置可以出现的字符 负向类[^abc] 表示该位置不可以出现的字符 范围类[a-e] 表示该位置可以出现的字符的范围 组合类[a-xA-E0-9] 范围类的组合
边界 量词 括号 @边界 ^ 会匹配行或者字符串的起始位置 ^只有在[]内才表示非 在外边表示开始 $ 会匹配行或字符串的结尾位置 ^$在一起 表示必须是这个（精确匹配） @量词 "*" 重复零次或更多 x>=0 "+" 重复一次或更多次 x>=1 "?" 重复零次或一次 x=(0||1) {n} n次 x=n {n,} 重复n次或更多 x>=n {n,m} 重复出现的次数比n多但比m少 n<=x<=m @括号总结 ()表示一组 []表示一个字符的位置 {}表示次数
常见项目的匹配 常见项目的匹配网上有很多（例如搜索常用正则表达式大全），无需记忆，能看懂即可 匹配国内电话号码： /^0\d{2,3}-\d{7,8}$/ 匹配姓名： /^[\u4e00-\u9fa5]{2,}$/ 匹配腾讯QQ号： /^[1-9]\d{4,10}$/ 匹配手机号： /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/ 匹配邮箱： /^\w+([+-.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/
封装自己的trim方法 replace() 方法 格式: 字符串对象.replace(正则式或字符串，替换的目标字符) 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的字符串 返回值: 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的 正则表达式的常见匹配模式 g 全局模式（Global），在匹配时查找所有字符串，而非发现一个就停止 i 忽略大小写模式（IgnoreCase），在匹配时忽略大小写 m 多行模式（multiline），在匹配至一行文本末尾后，还会继续匹配下一行 @封装自己的trim()方法 function trim(str) { return str.replace(/^\s+/,"").replace(/\s+$/,""); } @使用trim()方法检测用户输入 function trim(str) { return str.replace(/^\s+|\s+$/g, ""); }
var myTrim = function ( str ) {
if ( String.prototype.trim ) {
return str.trim();
} else {
return str.replace( /^\s+|\s+$/g, '' );
}
};x
面向对象： 对象 数据类型 基本数据类型 string number boolean null undefined 复杂数据类型 Object 什么是对象 对象其实就是一组数据和功能的集合 对象可以方便地描述和模拟客观事物
@对象的创建和使用
通过构造函数声明
var obj = new Object();
通过直接量声明
var obj = {};
创建对象 var obj = {}; obj.name = "刘德华"; obj.age = 55; obj.showName = function () { alert("Hi, my name is " + person.name); } obj.showAge = function () { alert("Hi, I'm " + person.age); }
使用对象 console.log(obj.name); // 调用属性 console.log(obj.age); obj.showName(); // 调用方法 obj.showAge();
面向对象OOP Object Orented Programming 面向对象的程序设计 因为对象可以方便地描述和模拟客观事物，使项目（尤其是大型项目）的开发能够模块化，便于大规模协同开发和维护，所以面向对象的开发语言和面向对象的程序设计越来越流行，这一点在后面的项目中大家会有深刻的体会。
工厂模式创建对象 为什么要优化创建对象的方式 因为对象在项目中被大规模的使用，所以每一点小小的改进都会对项目整体效率带来很大的提升，现阶段同学们还不可能有深刻的体会，只是让大家了解一下，后面讲项目大家自然就明白了。 @工厂模式 同类型对象，只是一些属性的值不同，通过对象字面量创建对象每次都要写那么多东西很费劲，我们可以将创建对象的过程封装进一个函数，只把发生变化的属性作为参数传入，从而简化对象创建的过程。 但是工厂模式只是创建出来一个普通的对象并将其返回，因此无法判断实例的具体类型。
构造函数模式创建对象 @this和new关键字 利用new 关键字可以声明新的对象 new运算符的作用是创建一个对象实例。这个对象可以是用户自定义的，也可以是带构造函数的一些系统自带的对象。 new 关键字可以让 this 指向新的对象 @构造函数模式 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。这样通过instanceof就可以判断实例的类型了。
原型模式创建对象 @原型prototype简介 每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用的时候，新创建的对象会从原型对象上继承属性和方法。使用prototype的好处是可以让所有对象实例共享它所包含的属性和方法。
原型的使用格式：
类名.prototype.属性名 = 属性值
类名.prototype.方法名 = function () {}
可以把那些不变的属性和方法，直接定义在prototype上，这样可以避免创建多个重复方法。
@原型模式
主要解决：函数因为使用非常非常多，重复执行效率太低。
Person.prototype.showName = function() { // 用的共同的父亲
alert("我的名字是"+ this.name);
}
什么是闭包 闭包是指有权访问另一个函数作用域中的变量的函数
@体验闭包 function outerFun() { var a = 0; function innerFun() { a++;//包的是变量 alert(a); }//这就是个包 return innerFun; //注意这里 } var obj = outerFun(); obj(); obj(); var obj2 = outerFun(); obj2(); obj2(); 函数变量被隐藏在作用域链内，看起来就像是函数将变量包裹了起来（所以叫闭包）（闭包包的是变量）
函数的内部变量是局部变量，局部变量一般是不可以被别人随便使用的
@局部变量外部不可用
但是如果另一个函数在这个函数的作用域链内，就可以访问了
@函数作用域链内可用
我们可以通过将函数作用域链内的函数返回的形式，让外部访问该函数内部的变量
@抛出函数作用域链内的函数
闭包的应用 闭包的主要应用就是特权方法，特权方法能够让外界对函数内部的私有变量进行受限制的访问。这一特性在某些项目的开发中会非常常见。 @通过特权方法访问私有变量 有时候有些属性不能直接暴露给外界直接访问，例如OA系统中的工资，只能本人才能查看这时我们需要将工资这个属性设置为私有变量，并让外界通过特权方法进行有条件的访问。 闭包的优点 ： 优点：不产生全局变量，实现属性私有化。 缺点：闭包中的数据会常驻内存，在不用的时候要手动删除，否则会导致内存溢出。
offset系列 offsetWidth和offsetHeight 用来得到对象的大小 @offsetHeight和style.height的区别 style.height是字符串，offsetHeight是数值 demo.style.height是用来获取和设置行内样式的，offsetHeight是只读属性 demo.style.height只能获取和设置行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取 因此，工作中一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度 @offsetHeight的构成 offsetHeight = height+padding+border 包括 自身高度 内边距 边框 不包括 外边距
offsetLeft和offsetTop 用来得到对象的位置（注意：没有offsetRight和offsetBottom） @offsetLeft的构成 到最近的（带有定位的）父元素的 左侧/顶部 的距离 如果所有父级都没有定位则以body 为准 offsetLeft 是自身border左侧到父级padding左侧的距离
@offsetLeft和style.left的区别 一、style.left只能获取行内样式 二、offsetLeft只读，style.left可读可写 三、offsetLeft是数值，style.left是字符串并且有单位px 四、如果没有加定位，style.left获取的数值可能是无效的 五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
offsetParent @offsetParent爸爸去哪 返回该对象距离最近的带有定位的父级 如果当前元素的所有父级元素都没有定位（position为absolute或relative），offsetParent为body 如果当前元素的父级元素中有定位（position为absolute或relative），offsetParent取最近的那个父级元素 另外注意offsetParent与parentNode的区别parentNode只找自己的上一级（亲爹）
不用死记，offset是计算偏移的，要算都算要不算都不算，只要记住和定位有关就行了，margin、border、padding要算都算要不算都不算，实在需要区分，用的时候自己写个div试一试或者网上一查就知道了。
Math对象 @Math对象常用方法 天花板 向上取整 负数取更大的 Math.ceil(x) 地板 向下取整 负数取更小的 Math.floor(x) 就近取整 四舍五入 Math.round(x) 取绝对值 Math.abs(x)
动画原理 @体验页面动画 动画原理公式 动画原理公式： leader = leader + step leader表示盒子当前位置 step表示步长 box.style.left = box.offsetLeft + 10 + "px"; 让setInterval不断执行某个函数修改盒子的位置属性最后就实现了动画的效果 动画函数封装 @动画函数封装 动画函数较为复杂，却又很常用对于这样的函数，我们一般都会进行封装 需求：能够让任意对象移动到指定位置。 动画函数改进 @动画函数改进 然而封装之后的函数还有很多问题，所以我们要对其进行进一步改进 判断运动方向 完善终点检测 终点清除定时器 手动设置对象位置到终点 调用开始先清理定时器，防止多次调用
缓动动画 原理公式 动画公式 leader = leader + step 匀速动画公式 step = 定值 leader = leader + step 缓动动画公式 step = ( target - leader ) / 10 leader = leader + step 缓动动画的好处 他的移动是有尽头的。不像基础匀速运动那样无限移动。 有非常逼真的缓动效果，实现的动画效果更细腻。 如果不清除定时器，物体永远跟着目标leader在移动。
document.documentElement --- 文档的根节点 文档的兼容模式 document.compatMode BackCompat 未声明DTD（怪异模式） CSS1Compat 已经声明DTD（标准模式） @窗体的滚动事件 窗体每滚动一像素都会触发该事件 window.onscroll = function () { 语句 }
scroll正传 @scrollHeight和scrollWidth 对象内部实际内容的高度/宽度 @scrollTop和scrollLeft 被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离 页面滚动座标 @页面滚动座标的兼容写法 页面滚动座标非常常用，但是有很大的兼容性问题 正常浏览器（除了ie678之外的浏览器） window.pageYOffset 已经声明DTD（标准模式） document.documentElement.scrollTop 未声明 DTD（怪异模式） document.body.scrollTop 可以合写为 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
client正传 @clientWidth和clientHeight： 偏移offsetWidth: width + padding + border 卷曲scrollWidth: width + padding 不包含border 内部内容的大小 可视clientWidth: width + padding 不包含border clientTop和clientLeft clientTop和clientLeft没用，他们通常指的就是border的距离（如果有滚动条会包含滚动条的宽度） 谁见过滚动条在顶部或者左侧的？！
网页可视区宽高 @网页可视区宽高的兼容写法 页面可视区宽高非常常用，但是有很大的兼容性问题 正常浏览器（包括IE9+） window.innerWidth 标准模式（包括IE9-） document.documentElement.clientWidth 怪异模式 document.body.clientWidth 因此，可以合写为 var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0; @封装自己的client() 由于非常常用，我们可以模仿JQuery封装一个自己的client()方法，返回可视区宽度和高度 @体会响应式布局原理 当我们的页面宽度 大于 960 像素的时候 页面为红色并显示computer 当我们的页面宽度 大于 640 小于 960 页面为绿色并显示tablet 剩下的页面为蓝色并显示mobile 三大系列总结 offsetWidth scrollWidth clientWidth offsetHeight scrollHeight clientHeight offsetLeft scrollLeft clientLeft offsetTop scrollTop clientTop offsetParent scroll() client()
获取样式属性
@访问属性的两种方式
对象有 属性和方法 属性不带括号
比如，有一个div我们想得到他的宽度，可以通过div.style.width
这样的写法虽然简单，但是不灵活，没有办法通过传参的形式获取属性
因此我们还有另外一种写法
div.style["width"]
@获取当前样式属性的方法
工作中我们经常需要获取一个盒子的最终样式
然而 通过 div. style.left 只能得到行内样式，而样式可能来自 内嵌 或者 外链 的样式表
我们前面学过的offsetLeft也只能得到距离offsetParent左侧的距离
那么如何到计算后的样式属性值呢：
IE
div.currentStyle.left或 div.current["left"]
w3c
window.getComputedStyle(元素,伪元素)["left"]
一般情况下没有伪元素，我们用 null 来替代。
@封装获取样式属性值的兼容方法
//需求 获取任意对象的任意属性
事件对象简介 @事件对象简介 在触发事件时，会产生一个事件对象event，这个对象中包含着与事件有关的信息。 所有浏览器都支持event对象，但支持的方式不同。 比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。 普通浏览器支持 传入参数 ie 678 支持 window.event @事件对象的兼容性写法 var event = event || window.event;
clientX clientY 当前窗口的左上角为基准点 pageX pageY 以当前文档的左上角为基准点 screenX screenY 当前屏幕的左上角为基准点
事件冒泡简介
当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
@冒泡的逻辑问题
阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation() propagation 传播
IE678是event.cancelBubble = true bubble 泡泡 冒泡
@阻止事件冒泡
兼容的写法：
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标准
} else {
event.cancelBubble = true; // ie 678 ie浏览器
}
事件目标 targetId 返回当前事件对象的id 火狐谷歌等 event.target.id IE678 event.srcElement.id 兼容性写法： var targetId = event.target ? event.target.id : event.srcElement.id;
简单数据类型。 String Number Boolean null undefined 字符串 数字 布尔 空 未定义 “” 0123 true/false 自己 还没有定义
String类型转换
1. 变量+ ''''
2. String(变量)
3. a++ a= a+1 不是一样的：a是String类型的时候后面的结果是a1;
Number类型
1、进制问题。
var result = 0xb; //表示十六进制
var result1 = 020;//表示八进制
2、丢失精度。
0.1+0.2 = 0.30000000000000004
3、数据类型转换
1. x-1 x*1 x/1 变成Number类型（只有String类型）
2. Number(变量)
如果变量中包含字母，返回一个NaN.
Boolean类型
1. 使用 !!（boolean值不变）
false、undefined 、null、0、“” 为 false
true、1、“somestring”、[Object] 为 true
2. Boolean();
任何数据类型，都可以转换成布尔类型。
null和undefined（任何数字和undefined相加(运算)都是NaN）
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
复杂数据类型。 对象（Object），函数(function)，数组（array），日期(Date)，正则........... 两个内置小方法 parseInt（）；取整 1、取整 parseInt(只能放一个值); 首个字符必须为数字。Or:NaN. 2、parseInt(变量，进制) ：这个方法能够让一个指定进制的数变为十进制。 十进制值=parseInt(a,进制) （你告诉我进制，我就敢给你转换成十进制） 指定进制的值 = number(十进制).toString(指定的进制); （你给我一个十进制的值，在告诉我进制，我就能转换成那个进制的值） 通过这两个方法我们可以完成，任意进制的转换。 parseFloat（）; 取小数 只有一个用法就是：取值（取小数）。
js丢失精度问题: 由于javascript是一种弱类型的语言，当我们进行小数运算时，会出现丢失精度的问题，如计算0.2 + 0.1，得到的结果不是0.3，而是0.30000000000000004
隐藏盒子 display： none; 隐藏盒子。（不占位置） visibility：hidden; 隐藏盒子。（占位置） overflow: hidden; 隐藏超出盒子的部分。
显示盒子 display： block; 显示盒子。 visibility：visible； 显示盒子。
Js加载问题 js的加载时和html同步。（顺序加载，加载到谁，就执行谁。） Css和html是不同步加载的。（先加载HTML，后加载css。）
label for id 请输入一个名人： label标签使用：点击label内容,插入条光标会调到for指定的id的标签中。 (为他人做嫁衣，为for指定的id所在的标签) oninput/onblur/onchange 区别与联系 oninput: 输入事件。 只要输入或删除字母或数字都会触动这个事件。 onblur: 失去焦点事件。 只要标签失去焦点，就会触动这个事件。 onchange: 改变事件。 只要事件源的值被改变，就会触动这个事件。 有一个input，值: 请输入... 1. 点击之后离开。 2.输入一个文字就离开。3.入一个文字在删除他在离开。
join 把数组变成字符串 作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。 调用者：数组本身。 有没有参数都行。 有返回值（string）。 把调用者数组中的元素按照参数链接成一个字符串，如果没有参数用逗号链接。 字符串 = 数组.join(可选); 数组中的元素链成字符串。
1．参数可选。指定要使用的分隔符。
2．如果省略该参数，则使用逗号作为分隔符。
3．如果想让数组中元素无缝链接，用“”；
4．如果你使用空格分隔，那么他真的给你用空格分隔啊！！！“”
split 把字符串变成数组。
split() 方法用于把一个字符串分割成字符串数组
调用者：字符串。 有没有参数都行。 有返回值（Array）。
把字符串按固定的方式分割成一个数组，参数1用什么字符分割，参数2数组最大长度。
数组 = 字符串.split(用什么分，分割成功后数组最大长度); 把字符串分割成数组。
参数 1。指定要使用的分隔符。
参数2，可选。该参数可指定返回的数组的最大长度。
数组切割完成后，用于切割的字符串不会出现在数组元素当中。（卸磨杀驴）
如果是空字符串，会把每一个字符全部当做数组中的元素来截取。
select标签本身的value值给了下面的标签option，所以option的value值就是select的value值。有selected这个属性的option标签是被选定或默认的标签。 onchange事件这个事件是在value值被更的时候触发的。一旦value值被更改就会触动这个事件。
兄弟节点 Sibling就是兄弟的意思。 Next：下一个的意思。 Previous:前一个的意思。 nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。 nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。 总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling 下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。 previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。 总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。 下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
单个子节点 firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。 firstElementChild:在火狐谷歌IE9都指的第一个元素节点。 第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。 lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。 所有子节点 childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （他还是W3C的亲儿子 ） 火狐 谷歌等高本版会把换行也看做是子节点 nodeType==1时才是元素节点(标签) nodeType == 1 表示的是元素节点 记住 元素就是标签 nodeType == 2 表示是属性节点 了解 nodeType == 3 是文本节点 了解 子节点数组 = 父节点.childNodes; 获取所有节点。 children：非标准属性，它返回指定元素的子元素集合。 但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。 children在IE6/7/8中包含注释节点 在IE678中，注释节点不要写在里面。 子节点数组 = 父节点.children; 用的最多。 补充 节点自己.parentNode.children[index];随意得到兄弟节点。
作为了解内容：
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。
只需要明白两个属性（！！！重点！！！） parentNode 和 children 这两个属性。 DOM节点操作 （！！！！！重点！！！！！） 节点的访问关系都是属性。节点的操作都是函数或者方法。 创建节点 使用方法是这样的document.createElement(); 新的标签（节点） = document.createElement(“标签名”); 插入节点（使用节点） 使用方法： 父节点.appendChild(); 父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法：父节点.insertBefore(要插入的节点，参考节点)；
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
删除节点
用法：用父节点删除子节点。
父节点.removeChild（子节点）；必须制定要删除的子节点
节点自己删除自己：
不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)
复制节点 （ oldNode.cloneNode（true） ）
想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
节点属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
注意：IE6、7不支持。
调用者：节点。 有参数。 没有返回值。
每一个方法意义不同。
获取日期和时间 getDate() 获取日 1-31 getDay () 获取星期 0-6（0代表周日） getMonth () 获取月 0-11（1月从0开始） getFullYear () 获取完整年份（浏览器都支持） getHours () 获取小时 0-23 getMinutes () 获取分钟 0-59 getSeconds () 获取秒 0-59 getMilliseconds () 获取毫秒 （1s = 1000ms） getTime () 返回累计毫秒数(从1970/1/1午夜)
返回距离1970/01/01毫秒数 var date = Date.now(); var date = +new Date(); var date = new Date().getTime(); 最常用 var date = new Date().valueOf();
字符串转换
1．字符串 = 变量+“”;
2．字符串 = String(变量)；
3．字符串 = 变量.toString()； (任何简单类型)
注意：
Number类型：
该进制值 = 十进制.toString（进制）
十进制值 = window.parseInt(数值，进制);
区别于：String类型中的toString()
charAt，获取相应位置字符（参数： 字符位置） 返回的字符 = str.charAt(索引)。获得索引处的字符。 注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。
charCodeAt获取相应位置字符编码（参数： 字符位置） 编码值 = str.charCodeAt(索引);指定位置的字符对应的编码值 charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符 区别：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值
indexOf，从前向后索引字符串位置（参数： 索引字符串） 索引值 = str.indexOf(字符); 从前往后查找。 从前面寻找第一个符合元素的位置。有多个返回值为第一个。 lastIndexOf，从后向前索引字符串位置（参数：索引字符串） 索引值 = str.lastIndexOf(字符); 从后往前查找。 从后面寻找第一个符合元素的位置 找不到则返回 -1
编码和解码 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码 decodeURIComponent() 函数可把字符串作为 URI 组件进行解码 var url = "http://www.itcast.cn?name=supperBrother&password=shuai"; //编码：将非标准字符全部编码 var enUrl = encodeURIComponent(url);//encodeURI(url); //解码：转换为原始形式 var deUrl = decodeURIComponent(enUrl);//decodeURI(enUrl);
字符串操作 concat，连接字符串（参数： 追加字符串，可以多个） 返回一个字符串 = str1.concat(str2); 把str1和str2链接起来
slice，截取字符串（参数：1，截取位置【必须】，2终结点） 字符串 = str.slice（参数1，参数2); 两个参数都是索引值。 (1).（2,5） 正常包左不包右。 (2). ( 2 ) 从指定的索引位置剪到最后。 (3).（-3） 从倒数第几个剪到最后. (4).（5,2） 前面的大，后面的小，空。
substr，截取字符串（参数：1，截取位置【必须】，2截取长度） 字符串 = str.substr（参数1，参数2); 1索引值,2长度。第一个参数为从索引位置取值，第二个参数返回字符长度。 (1). （2,4） 从索引值为2的字符开始，截取4个字符。 (2). （1） 一个值，从指定位置到最后。 (3). （-3） 从倒数第几个剪到最后. (4）不包括前大后小的情况。
substring 同slice 字符串 = str.substring（参数1，参数2); 两个参数都是索引值。 不同1：参数智能调转位置。 不同2：参数负值，将全部获取字符串。 （1）.（2,5） 正常包左不包右。 (2). ( 2 ) 从指定的索引位置剪到最后。 (3). （-3） 获取全部字符串. (4). （5,2） 前面的大，后面的小，不是空。（2,5）
转换大小写 toUpperCase，转换为大写（参数： 无） STR = str.toUpperCase(); 转换成大写 toLowerCase，转换为小写（参数：无） str = STR.toLowerCase(); 转换成小写
Number和Math Number number.toFixed(几位);四舍五入保留 Math Math.random(); (0-1随机数值) Math.round(); (四舍五入取整) Math.max(); (最大值和NaN) Math.max(1,3,"12ab")；Math.max(1,2,NaN)；Math.max(1,2,undefined); NaN Math.max(1,3,"12")；Math.max(1,3,null)； 12 3 Math.max(1,2,3); 3
arguments.callee == 函数名==函数体（不是执行这个函数） arguments.length == 实参的长度。 arguments == 实参数组。 arguments.callee == 所在的函数体。 == 调用函数名。(和this类似)
搭建HTTP服务 安装wampserver
注意事项： 1、检查网络是不是通的 ping 对方IP 2、检查防火墙是否开启，如果开启将不能正常被访问 3、检查访问权限 Allow from all 4、理解默认索引 5、确保端口没有被其它程序占用 6、“#”表示注释 7、修改配置要格外小心，禁止无意修改其它内容 将我们制作好的网页拷贝到配置好的根目录下，浏览器访问127.0.0.1即可 或者修改配置文件bin\apache\Apache2.2.21\conf\httpd.conf 设定根目录 DocumentRoot 配置根目录 <Directory 之后重启服务
配置虚拟主机 在一台Web服务器上，我们可以通过配置虚拟主机，然后分别设定根目录，实现对多个网站的管理。 具体步骤如下： 1、开启虚拟主机辅配置，在httpd.conf 中找到 #Virtual hosts #Include conf/extra/httpd-vhosts.conf 去掉前面的#号注释，开启虚拟主机配置 2、 配置虚拟主机，打开conf/extra/httpd-vhosts.conf 分别修改以下三项 DocumentRoot "E:/www/example" ServerName "example.com " ServerAlias "www.example.com" 其它项无需指定。 3、修改DNS（hosts）文件 注：修改hosts文件权限 打开C:\Windows\System32\drivers\etc\hosts 目录是固定的 4、重启Apache 5、浏览器访问www.example.com
PHP: 表单处理 表单name属性的是用来提供给服务端接收所传递数据而设置的 表单action属性设置接收数据的处理程序 表单method属性设置发送数据的方式 当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式 $_GET接收 get 传值 $_POST接收 post 传值 $_FILES接收文件上传 常用PHP函数 in_array() 是否在数组中 count() 计算数组长度 array_key_exists ()检测数组中是否存在key file_get_contents读取文件 ...还有很多
请求行 由请求方式、请求URL和协议版本构成 请求头 Host：localhost请求的主机 Cache-Control：max-age=0控制缓存 Accept：/ 接受的文档MIME类型 User-Agent：很重要 Referer：从哪个URL跳转过来的 Accept-Encoding：可接受的压缩格式 If-None-Match：记录服务器响应的ETag值，用于控制缓存 此值是由服务器自动生成的 If-Modified-Since：记录服务器响应的Last-Modified值 此值是由服务器自动生成的 请求主体 即传递给服务端的数据 注：当以post形式提交表单的时候，请求头里会设置 Content-Type: application/x-www-form-urlencoded，以get形式当不需要
响应/响应报文 响应由服务器发出，其规范格式为：状态行、响应头、响应主体。 状态行 由协议版本号、状态码和状态信息构成 响应头 Date：响应时间 Server：服务器信息 Last-Modified：资源最后修改时间 由服务器自动生成 ETag：资源修改后生成的唯一标识 由服务器自动生成 Content-Length：响应主体长度 Content-Type：响应资源的MIME类型 MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。 思考？客户端与服务器间传递数据时，是以什么形式传输的？ 客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以文本形式传输，这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。 响应主体 即服务端返回给客户端的内容； 状态码 常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误
协商缓存（性能优化） 此知识点属性扩展内容，不做具体分析 前端优化雅虎35条 http://www.tuicool.com/articles/J3uyaa 重绘&回流 http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/ 利用浏览器的缓存机制，可以有效的减少HTTP的请求，提高页面加载速度，增强用户体验，同时也能极大的减轻服务器的负担，结合HTTP协议，缓存协商就是根据HTTP协议实现缓存控制的一种机制。 问题：是否见过某些网站CSS地址后面会带有一些参数，通常为xxx.css?cache=20160106形式 这种做法是用来强制清除缓存的，实际开发过程中，每当新功能上线时最容易引起BUG的即CSS的缓存，但是浏览器的缓存能减少请求，如果每次都强制清除，会对性能有损失，所以控制浏览器缓存成为前端性能化的一个重点 1、Last-Modified时间精确到了秒，但如果1秒内修改了多次，并不能精确的更新缓存。 2、ETag则是判断文件内容任何改变后，便会由服务器自动生成一个唯一标识。 3、Expires 过期时间，HTTP1.0的规范，一个绝对的时间 4、Cache-Control HTTP1.1规范，设置过期时间，优先级高于Expires。
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
API详解 xhr.open() 发起请求，可以是get、post方式 xhr.setRequestHeader() 设置请求头 xhr.send() 发送请求主体get方式使用xhr.send(null) xhr.onreadystatechange = function () {} 监听响应状态 xhr.readyState = 0时，UNSENT open尚未调用 xhr.readyState = 1时，OPENED open已调用 xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息 xhr.readyState = 3时，LOADING 接收到响应主体 xhr.readyState = 4时，DONE 响应完成 不用记忆状态，只需要了解有状态变化这个概念 xhr.status表示响应码，如200 xhr.statusText表示响应信息，如OK xhr.getAllResponseHeaders() 获取全部响应头信息 xhr.getResponseHeader('key') 获取指定头信息 xhr.responseText、xhr.responseXML都表示响应主体 注：GET和POST请求方式的差异（面试题） 1、GET没有请求主体，使用xhr.send(null) 2、GET可以通过在请求URL上添加请求参数 3、POST可以通过xhr.send('name=itcast&age=10') 4、POST需要设置 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') 5、GET效率更好（应用多） 6、GET大小限制约4K，POST则没有限制
兼容性 IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP") var request ; if(XMLHTTPRequest) { request = new XMLHTTPRequest; } else { request = new ActiveObject("Microsoft.XMLHTTP"); }
封装AJAX工具函数
为了提升我们的开发效率，我们自已将XMLHttpRequest封装成一个函数。
jQuery中的Ajax
jQuery为我们提供了更强大的Ajax封装
模板引擎 原理剖析 其本质是利用正则表达式，替换模板当中预先定义好的标签。 正则表达式exec用法 http://www.w3school.com.cn/jsref/jsref_exec_regexp.asp
流行模板引擎 BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/ ArtTemplate：https://github.com/aui/artTemplate velocity.js：https://github.com/shepherdwind/velocity.js/ Handlebars：http://handlebarsjs.com/ http://blog.jobbole.com/56689/ artTemplate 1、引入template-native.js 2、<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式 3、<%= content %>为输出表达式
同源&跨域 同源 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。 跨域 不同源则跨域 例如http://www.example.com/
http://api.example.com/detail.html 不同源 域名不同
https//www.example.com/detail.html 不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 协议、域名不同
https://www.example.com:8080/detail.html 不同源 端口、协议不同
http://www.example.com/detail/index.html 同源 只是目录不同
跨域方案 1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com） 2、document.domain + iframe 3、window.name + iframe 4、location.hash + iframe 5、window.postMessage() 参考资料 http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html JSONP JSON with Padding 1、原理剖析 其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。 只能以GET方式请求 jQuery中的JSONP jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。 dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问 jsonp 可以指定服务端接收的参数的“key”值，默认为callback jsonpCallback 可以指定相应的回调函数，默认自动生成
/** * 连接符 * Javascript中用+号表示连接符 * PHP中使用.点号 */ $hello = 'hello'; $world = 'world';
echo $hello . $world; helloworld
// 输出的是详细信息
var_dump($hello); string 'hello' (length=5)
$arr = array('name'=>'itcast');
// 一般场景是用来设试代码使用
var_dump($arr); array 'name' => string 'itcast' (length=6)
/** * 分支控制语句、循环语句 * 与Javascript一样 * foreach 数组遍历函数，类似Javascript中的 for in */
// var arr = [1, 2, 3, 4];
// for(var i=0; i<arr.length; i++) {console.log(arr[i]);}
// 索引数组
// $arr = array(1, 2, 3, 4, 5, 6);
// echo count($arr);
// 需要获取数组长度，count($arr);
// for($i=0; $i<count($arr); $i++) {
// echo $arr[$i];
// }
// 关联数组
// $arr = array('name'=>'itcast', 'age'=>10);
// 用来遍历数组的
// foreach($arr as $key=>$val) {
// // echo $key;
// echo $val;
// }
// var obj = {name: 'itcast', age: 10}
// for(var key in obj) {console.log(obj[key])}
// $arr = array(1, 2, 3, 4, 5, 6);
// foreach($arr as $a=>$b) {
// // echo $a;
// echo $b;
// }
// 实际开发中用foreach来遍历数组
// 单/双引号号
$str = 'hello';
// 双引号可以解析变量
// echo "$str world"; hello world
// 单引号不会解析变量，会当字符串处理
echo '$str world';
echo $str . 'world!';
var xhr = new XMLHttpRequest; // var xhr = new XMLHttpRequest; xhr.open('get', '02.php?name=itcast&age=10'); // xhr.open('get','o2.php?name=itcast&age=10') // 当post形式必须要写请求头Content-Type，并且只能是application/x-www-form-urlencoded
// 当以get形式情况下可以不写Content-Type // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// POST数据放到请求主体中，但是不是必须要填写的 xhr.send(null);
// 监听响应状态 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }
var obj = '{"name": "itcast","age": 10}';
// JSON是一个内建对象
// 将字符串转成JS对象
obj = JSON.parse(obj); Object {name: "itcast", age: 10}
var objs = {"name": "itcast","age": 10};
objs = JSON.stringify(obj); "{"name":"itcast","age":10}"
// $obj = '{"name": "itcast", "age": 10}';
// echo $obj;
// 解码JSON
// json_decode();
// var_dump(json_decode($obj));
// 编码JSON
// json_endcode();
// 指定文档类型
// 可以不指定
header('Content-Type:application/json; charset=utf-8');
// 1、PHP连接数据库、读取数据
// 2、一般情况下会将读取的数据转成数组
// 3、需要通过json_encode() 来转成json
// 4、可以将json数据echo，返回给js 或其它语言
$result = file_get_contents('stars.json');
echo $result;
封装自已的Ajax库 var $ = { params: function (params) { var data = ''; // 拼凑参数 for(key in params) { data += key + '=' + params[key] + '&'; }
// 将最后一个&字符截掉
return data.slice(0, -1);
},
// Ajax实例
ajax: function (options) {
// 实例化XMLHttpRequest
var xhr = new XMLHttpRequest,
// 默认为get方式
type = options.type || 'get',
// 默认请求路径
url = options.url || location.pathname,
// 格式化数据key1=value1&key2=value2
data = this.params(options.data),
callback = options.success;
// get 方式将参数拼接到URL上并将data设置成null
if(type == 'get') {
url = url + '?' + data;
data = null;
}
xhr.open(type, url);
// post 方式设置请求头
if(type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
// 发送请求主体
xhr.send(data);
// 监听响应
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取响应类型
var contentType = xhr.getResponseHeader('Content-Type');
var data = xhr.responseText;
// 解析JSON
if(contentType.indexOf('json') != -1) {
data = JSON.parse(data);
}
// 调用success
// options.success(data);
callback(data);
} else {
options.error('请求失败!');
}
}
}
};
box-sizing: border-box; 代表计算宽高的时候会把boder 加上等于你现在样式里面设计的width
<script src="./js/jquery.min.js"></script> <script> var obj = { name: 'itcast', age: 10 } var opt = { name: 'web', age: 15, sex: '男' } // 合并两个对象，后面的 有则替换 无则添加 console.log($.extend(obj, opt)); </script>简单插件开发：
我是一个文字
<script src="./js/jquery.min.js"></script> <script> console.log($.fn); // $('p').addClass(); $.fn.test = function () { console.log(this); } $('p').test(); // 1、自已可以往$.fn上面添加一个自定义的方法 // 2、当我们在这个方法引用this，this指向的是当前DOM对象 // 3、调用的时候和普通的方法一样 // 换颜色 $.fn.setColor = function (color) { $(this).css('color', color); } $('p').click(function () { $(this).setColor('blue'); }); </script>封装的JQ插件：
;(function (
// 默认值及参数
var defalut = $.extend({
gap: 20
}, options);
// 初始化
var _this = $(this),
items = _this.children(),
width = items.width(),
height = 0,
// 计算可以放置几列
count = Math.floor(_this.width() / (width + defalut.gap)),
columns = [];
items.each(function (key, val) {
// 每个元素的高度
height = $(val).height();
// 第一行
if(key < count) {
// 每一列的高度
columns[key] = height;
// 设置定位坐标
$(val).css({
top: 0,
left: (width + defalut.gap) * key
});
} else {
var min_h = columns[0];
var min_k = 0;
// 取出最小列及下标
for(var i=0; i<columns.length; i++) {
if(columns[i] < min_h) {
min_h = columns[i];
min_k = i;
}
}
// 更新当前列的高度
columns[min_k] += height;
$(val).css({
top: min_h + defalut.gap,
left: (width + defalut.gap) * min_k
});
}
});
// 排序
columns = columns.sort(function (a, b) {
return b - a;
});
_this.css({
height: columns[0]
});
}
})(jQuery);
Jsonp 跨域： // jQuery中JSONP是通过$.ajax()，来实现的 $.ajax({ url: 'http://api.study.com/jsonp.php', type: 'get', // 这里需要将dataType 指定为jsonp dataType: 'jsonp', data: {name: 'itcast'}, // 以字符串形式将事先定义好的函数名传递进来 // jsonpCallback: 'test', // jsonp: 'call', success: function (data) { // console.log(data); }, error: function (err) { console.log(err); } });
H5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等， 可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。 语义标签 语义标签对于我们并不陌生，如
表示一个段落、
- 表示一个无序列表
表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签， 更有利于搜索引擎或辅助设备来理解HTML页面内容。 传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。 HTML5则是通过新增语义标签的形式来解决这个问题，例如、等，这样就可以使其具有通用性。
常用新语义标签
表示导航 表示页眉 表示页脚