&figure&&img src=&https://pic2.zhimg.com/v2-52ce95cf2ae61ff_b.jpg& data-rawwidth=&1324& data-rawheight=&609& class=&origin_image zh-lightbox-thumb& width=&1324& data-original=&https://pic2.zhimg.com/v2-52ce95cf2ae61ff_r.jpg&&&/figure&&p&相信各位小伙伴之前都听过一句话，叫做边玩儿边学。又有多少小伙伴被这句话给骗了呢，哪里来的玩儿呢，最后全部变成枯燥无味的学了！但是今天效率君给大家介绍的这款软件真的是让大家边玩儿边学，而且是你玩儿的越好就学的越好！他就是——CodeCombat！&/p&&figure&&img src=&https://pic2.zhimg.com/v2-52ce95cf2ae61ff_b.png& data-rawwidth=&1324& data-rawheight=&609& class=&origin_image zh-lightbox-thumb& width=&1324& data-original=&https://pic2.zhimg.com/v2-52ce95cf2ae61ff_r.jpg&&&/figure&&p&CodeCombat 是一款有趣的开源编程游戏，它使用代码来操控游戏人物，让你一边沉浸在游戏乐趣中一边学习编程技术(Javascript 、Python 等)。从最初小白入门级的单人关卡到后来高难度的多人对战，各个层次的程序猿都可以乐在其中并从各种战斗中不断吸取编程知识。&br&&figure&&img src=&https://pic2.zhimg.com/v2-7c47d0a14f11f_b.png& data-rawwidth=&1314& data-rawheight=&607& class=&origin_image zh-lightbox-thumb& width=&1314& data-original=&https://pic2.zhimg.com/v2-7c47d0a14f11f_r.jpg&&&/figure&&/p&&br&CodeCombat 的创始人 George 在开始学习编程时，也曾使用了知名的&a href=&http://link.zhihu.com/?target=https%3A//www.codecademy.com/zh& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Codecademy&/a&，但他还是觉得太乏味了然后放弃，他了解到自己的朋友们也遇到了这样的情况。后来他想明白了背后真正的原因：人们想要有趣且高效的学习，但得到的却是缓慢且乐趣不足的课程。&br&&br&因此，George 和小伙伴们一起创造了 CodeCombat，希望能让想学习编程的人可以真正享受这一过程，而不是将编程当作枯燥的码代码！&figure&&img src=&https://pic4.zhimg.com/v2-dca1e37b4fd8b37a21de2d63ce514853_b.png& data-rawwidth=&1306& data-rawheight=&596& class=&origin_image zh-lightbox-thumb& width=&1306& data-original=&https://pic4.zhimg.com/v2-dca1e37b4fd8b37a21de2d63ce514853_r.jpg&&&/figure&&p&CodeCombat 整体的画风与效率君之前推荐的不思议迷宫很相似，可爱卡通风格看起来很棒，音效处理也非常带感。而且整个游戏关卡足足有九千多关，足够你玩。虽然是老外开发的，但是支持中文，小白都能玩儿的特别顺溜！不管是从玩游戏还是学习的角度来讲，都是一个非常棒的选择！&/p&&p&如果你迫不及待的想体验一番的话，请戳这儿→→→→→→→&a href=&http://link.zhihu.com/?target=https%3A//www.codecombat.cc/play/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodeCombat: Learn to Code by Playing a Game&/a&&/p&&p&对了，oeasy老师还录了关于CodeCombat的通关视频，有哪儿不会的也可以通过老师这儿来学！&a href=&http://link.zhihu.com/?target=http%3A//study.163.com/course/introduction.htm%3FcourseId%3D%23/courseDetail& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&玩游戏也能学编程-CodeCombat - 网易云课堂&/a&&/p&&p&&b&我是效率君，更多福利干货，欢迎关注我的公众号“我们都是效率控”！&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-e1e7e910b32e77bfc53cf2_b.jpg& data-rawwidth=&666& data-rawheight=&704& class=&origin_image zh-lightbox-thumb& width=&666& data-original=&https://pic3.zhimg.com/v2-e1e7e910b32e77bfc53cf2_r.jpg&&&/figure&
相信各位小伙伴之前都听过一句话，叫做边玩儿边学。又有多少小伙伴被这句话给骗了呢，哪里来的玩儿呢，最后全部变成枯燥无味的学了！但是今天效率君给大家介绍的这款软件真的是让大家边玩儿边学，而且是你玩儿的越好就学的越好！他就是——CodeCombat！Code…
&figure&&img src=&https://pic3.zhimg.com/v2-5a14b8aaedf836af505f52_b.jpg& data-rawwidth=&1348& data-rawheight=&506& class=&origin_image zh-lightbox-thumb& width=&1348& data-original=&https://pic3.zhimg.com/v2-5a14b8aaedf836af505f52_r.jpg&&&/figure&&h3&经常碰见pip install出现异常，安装不了一些python包。&/h3&&h3&收藏分享一个python库下载网站，可以先在上面直接下载到本地，然后进入对应的文件夹，pip install 一波，就能完美安装了。&/h3&&p&&a href=&https://link.zhihu.com/?target=http%3A//www.lfd.uci.edu/%7Egohlke/pythonlibs/%23lxml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&传送门 http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml&/a&&/p&&p&-------------------&/p&&blockquote&作者：施维而已 &br&博客专栏：&a href=&https://link.zhihu.com/?target=https%3A//ask.hellobi.com/blog/shiwei& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&施维而已的博客专栏&/a&&/blockquote&&br&&p&&b&大家也可以加小编微信：tszhihu （备注：Python），拉大家到 Python爱好者社区 微信群，可以跟各位老师互相交流。谢谢。&/b&&/p&&br&&p&也可以关注微信公众号：Python爱好者社区 (ID:python_shequ), 第一时间获取视频更新动态。&/p&
经常碰见pip install出现异常，安装不了一些python包。收藏分享一个python库下载网站，可以先在上面直接下载到本地，然后进入对应的文件夹，pip install 一波，就能完美安装了。-------------------…
&figure&&img src=&https://pic1.zhimg.com/v2-96f2b3ab72ab1a3719362_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&https://pic1.zhimg.com/v2-96f2b3ab72ab1a3719362_r.jpg&&&/figure&&p&&strong&1、DOM&/strong&&/p&&p&文档对象模型（Document Object Model，&strong&DOM&/strong&）是表示和操作HTML和XML文档内容的基础API。&br&当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。 &br&如下图： &figure&&img src=&https://pic4.zhimg.com/v2-65a17e89fc41b994c089e_b.jpg& data-rawwidth=&563& data-rawheight=&271& class=&origin_image zh-lightbox-thumb& width=&563& data-original=&https://pic4.zhimg.com/v2-65a17e89fc41b994c089e_r.jpg&&&/figure&&br&&/p&&p&上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。&/p&&p&节点有7种类型：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&Document：整个文档树的顶层节点
DocumentType：doctype标签（比如&!DOCTYPE html&）
Element：网页的各种HTML标签（比如&body&、&a&等）
Attribute：网页元素的属性（比如class=&right&）
Text：标签之间或标签包含的文本
Comment：HTML或XML的注释
DocumentFragment：文档的片段
Document和Element是两个重要的DOM类。
&/code&&/pre&&/div&&p&&strong&1.1节点之间的关系&/strong&&/p&&p&在一个节点之上的直接节点是其 父节点 ，在其下一层的直接节点是其 子节点 。在同一层上具有相同父节点的节点是 兄弟节点。在一个节点之下的所有层级的一组节点是其 后代节点 。一个节点的任何父节点、祖父节点和其上层的所有节点是 祖先节点 。&/p&&p&通用的Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格区别的。&br&Document类型代表一个HTML或XML文档，Element类型代表该文档中的一个元素。&br&HTMLDocument和HTMLElement子类只是针对于HTML文档和元素。&/p&&p&CharacterData通常是Text和Comment的祖先，它定义两种节点所共享的方法。&br&Attr节点类型代表XML或HTML属性。&br&Element类型定义了将属性当做“名/值”对使用的方法。&br&DocumentFragment类型在实际文档中并不存在的一种节点，它代表一系列没有常规父节点的节点。&/p&&p&&strong&1.2 选取文档元素&/strong&&/p&&p&在JavaScript中，有多种方法选取元素。&/p&&ul&&li&用指定的id属性&/li&&li&用指定的name属性&/li&&li&用指定的标签名字&/li&&li&用指定的CSS类&/li&&li&匹配指定的CSS选择器&/li&&/ul&&p&&strong&1.2.1 用指定ID选取元素&/strong&&/p&&p&任何HTML元素都可以有一个id元素，但在文档中该值必须唯一，即同一个文档中的元素不能出现有相同的ID。可以用Document对象的getElementById()方法选取特定ID的元素。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div id=&div&&&/div&
document.getElementById('div');
&/code&&/pre&&/div&&p&&strong&1.2.2 用指定名字选取元素&/strong&&/p&&p&一些HTML元素拥有name属性（比如&form&、&radio&、&img&、&frame&、&embed&和&object&等），非唯一，所以多个元素可能有相同的名字。&/p&&p&基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法，返回一个NodeList对象（类数组对象）。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&input name=&input&/&
var inputs = document.getElementsByName('input');
inputs[0].tagName
&/code&&/pre&&/div&&p&注意：getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML中不可用。&/p&&p&&strong&1.2.3 用指定标签名选取元素&/strong&&/p&&p&Document对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素，也是返回一个NodeList对象&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.getElementsByTagName('span')
// 选取所有span元素
&/code&&/pre&&/div&&p&给getElementsByTagName()传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。&/p&&p&在Element类中也同样定义了getElementsByTagName()方法，其原理和Document版本是一样的，不过它只选取调用该方法的元素的后代元素。&br&下面的代码就是查找文档中第一个&/p&&p&元素里面的所有元素。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var p = document.getElementsByTagName('p')[0];
var span = p.getElementsByTagName('span');
&/code&&/pre&&/div&&p&&strong&1.2.4 用指定CSS类选取元素&/strong&&/p&&p&HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。&/p&&p&在HTML文档和HTML元素上，我们可以调用getElementsByClassName()来选择指定CSS类的元素，它返回一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。&/p&&p&getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的class属性值包含所有指定的标识符时才匹配。&/p&&p&在Element类中也同样定义了getElementsByClassName()方法，其原理和Document版本是一样的，不过它只选取调用该方法的元素的后代元素。&/p&&p&&strong&1.2.5 通过CSS选择器选取元素&/strong&&/p&&p&Document对象的方法querySelectorAll()，它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.querySelectorAll('.div')
//匹配所有class名为div的元素
&/code&&/pre&&/div&&p&还有一个querySelector()方法，其原理和querySelectorAll()是一样的，不过它返回第一个匹配的元素（以文档顺序），如果没有匹配的元素就返回null。&/p&&p&它们支持复杂的CSS选择器。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&// 选中data-tip属性等于title的元素
document.querySelectorAll('[data-tip=&title&]');
// 选中div元素，那些class含ignore的除外
document.querySelectorAll('div:not(.ignore)');
&/code&&/pre&&/div&&p&但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。&/p&&p&这两个方法在Element节点上也有定义。&/p&&p&&strong&1.2.6 document.all[ ]&/strong&&/p&&p&document.all[ ]也可用来选择元素，不过已经废弃了。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.all[0]
//文档中第一个元素
document.all['navbar']
// id或name为“navbar”的元素
&/code&&/pre&&/div&&p&&strong&1.3 文档结构和遍历&/strong&&/p&&p&&strong&1.3.3 作为节点树的文档&/strong&&/p&&p&Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。&/p&&p&Node属性：&br&&strong&（1）parentNode&/strong& 该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。&/p&&p&&strong&（2）childNodes&/strong&&/p&&p&返回只读的类数组对象（NodeList对象），它是该节点的子节点的实时表。&br&注意：该属性还包括文本节点和评论节点。&/p&&p&&strong&（3）firstChild、lastChild&/strong&&/p&&p&该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null&br&注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。&/p&&p&&strong&（4）nextSibling、previousSibling&/strong&&/p&&p&该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点称为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表形式连接起来。&br&注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。&/p&&p&&strong&（5）textContent&/strong&&/p&&p&返回该节点和它的所有后代节点的文本内容。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div id=&div&&我是&span&textContent&/span&&/div&
document.getElementById('div').textContent
// 我是textContent
&/code&&/pre&&/div&&p&&strong&（6）nodeType&/strong&&/p&&p&该节点的类型。&br&9：Document节点&br&1：Element节点&br&3：Text节点&br&8：Comment节点&br&11：DocumentFragment节点&/p&&p&&strong&（7）nodeValue&/strong&&/p&&p&Text节点或者Comment节点的文本内容。只有Text节点和Comment节点的nodeValue可以返回结果，其他类型的节点一律返回null。&/p&&p&&strong&（8）nodeName&/strong&&/p&&p&元素的标签名，以大写形式表示。&/p&&p&&strong&nodeType和nodeName&/strong&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-dc61fdddc9f_b.jpg& data-rawwidth=&532& data-rawheight=&306& class=&origin_image zh-lightbox-thumb& width=&532& data-original=&https://pic2.zhimg.com/v2-dc61fdddc9f_r.jpg&&&/figure&&br&&p&使用这些node属性，我们可以便捷的得到各个节点的引用&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.childNodes[0].childNodes[1]
document.firstChild.firstChild.nextSibling
&/code&&/pre&&/div&&p&&strong&1.3.4 作为元素树的文档&/strong&&/p&&p&当我们的关注点在文档的元素上而非它们之间的文本上时，JavaScript提供了另外一个API，它将文档看做是E乐门头对象树，忽略部分文档：Text和Comment节点。&/p&&p&&strong&属性&/strong&&/p&&p&&strong&（1）children&/strong&&/p&&p&类似childNodes，返回一个NodeList对象，但children列表只包含Element对象。&/p&&p&&strong&注意&/strong&：Text和Comment节点没有children属性，意味着node.parentNode属性不可能返回Text或Comment节点。任何Element的parentNode总是另一个Element，或者，追溯到树根的Document或DocumentFragment节点。&/p&&p&&strong&（2）firstElementChild、lastElementChild&/strong&&/p&&p&类似firstChild和lastChild，但只代表子Element。&/p&&p&&strong&（3）nextElementSibling、previousElementSibling&/strong&&/p&&p&类似nextSibling和previousSibling，但只代表兄弟Element。&/p&&p&&strong&（4）childElementCount&/strong&&/p&&p&子元素的数量。返回的值和children.length值相等。&/p&&p&&strong&（5）offsetParent&/strong&&/p&&p&offsetParent属性返回当前HTML元素的最靠近的、并且CSS的position属性不等于static的父元素。如果某个元素的所有上层节点都将position属性设为static，则Element.offsetParent属性指向&body&元素。&/p&&p&&strong&1.4NodeList对象和HTMLCollection对象&/strong&&/p&&p&&strong&1.4.1 NodeList对象&/strong&&/p&&p&NodeList实例对象是一个类数组对象，它的成员是节点对象。比如node.childNodes、document.querySelectorAll()返回的都是NodeList实例对象。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.childNodes instanceof NodeList
&/code&&/pre&&/div&&p&NodeList实例对象可能是动态集合，也可能是静态集合。所谓动态集合就是一个活的集合，DOM树删除或新增一个相关节点，都会立刻反映在NodeList接口之中。Node.childNodes返回的，就是一个动态集合。&/p&&p&NodeList接口实例对象提供length属性和数字索引，因此可以像数组那样，使用数字索引取出每个节点，但是它本身并不是数组，不能使用pop或push之类数组特有的方法。&/p&&p&&strong&1.4.2 HTMLCollection对象&/strong&&/p&&p&HTMLCollection实例对象与NodeList实例对象类似，也是节点的集合，返回类数组对象。&/p&&p&在HTMLDocument类中，有一些快捷属性来访问各种各样的节点。比如：images、forms和links等属性指向类数组的&img&、&form&和&a&（只包含那些有href属性的&a&标签）元素集合。这些属性都是返回HTMLCollection实例对象。&/p&&p&HTMLDocument也定义了embeds和plugins属性，它们是同义词，都是HTMLCollection类型的&embed&元素的集合。anchors是非标准属性，它指代有一个name属性的&a&元素。&/p&&p&在HTML5中，加入了scripts，它是HTMLCollection类型的&script&元素的集合。&/p&&p&HTMLDocument对象还定义了两个属性，它们指代特殊的单个元素而非元素的集合。&br&document.body是一个HTML文档的&body&元素，document.head是&head&元素。&/p&&p&如果文档源代码未显式的包含&head&和&body&元素，浏览器将隐式的创建它们。&/p&&p&Document类的documentElement属性指代文档的根元素，在HTML文档中，它总是指代&html&元素。&/p&&p&&strong&HTMLCollection与NodeList的区别：&/strong&&/p&&ul&&li&HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。&/li&&li&HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合。&/li&&li&HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。&/li&&/ul&&p&HTMLCollection实例的item方法，可以根据成员的位置参数（从0开始），返回该成员。如果取不到成员或数字索引不合法，则返回null。&/p&&p&HTMLCollection实例的namedItem方法根据成员的ID属性或name属性，返回该成员。如果没有对应的成员，则返回null。这个方法是NodeList实例不具有的。&/p&&p&&strong&1.5 元素的内容&/strong&&/p&&p&&strong&1.5.1 作为HTML的元素内容&/strong&&/p&&p&&strong&（1）innerHTML&/strong&&/p&&p&读取Element的 innerHTML 属性作为字符串标记返回那个元素的内容。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div id=&div&&&p&123&/p&&/div&
var d = document.getElementById('div');
d.innerHTML
// &&p&123&/p&&
&/code&&/pre&&/div&&p&除了获取，还可以设置&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&d.innerHTML = '&span&99&/span&'
// &div id=&div&&&span&99&/span&&/div&
&/code&&/pre&&/div&&p&&strong&（2）outerHTML&/strong&&/p&&p&outerHTML属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&d.outerHTML
// &&div id=&div&&&p&123&/p&&/div&&
&/code&&/pre&&/div&&p&outerHTML属性是可读写的，当设置元素的outerHTML时，元素本身被新的内容所替换。&br&注意：只有Element节点有outerHTML属性，Document节点没有。&/p&&p&&strong&（3）insertAdjacentHTML()&/strong&&/p&&p&将任意的HTML标记字符插入到指定的元素“相邻”的位置。&br&传入两个参数：标记是该方法的第二个参数，并且“相邻”的精确含义依赖于第一个参数的值；第一个参数有以下值之一的字符串：“beforebegin”、“afterbegin”、“beforeend”和“afterend”。如下图：&br&&figure&&img src=&https://pic4.zhimg.com/v2-bdcbafba400077_b.jpg& data-rawwidth=&747& data-rawheight=&115& class=&origin_image zh-lightbox-thumb& width=&747& data-original=&https://pic4.zhimg.com/v2-bdcbafba400077_r.jpg&&&/figure&&br&&/p&&p&&strong&1.5.2 作为纯文本的元素内容&/strong&&/p&&p&当要查询纯文本形式的元素内容或在文档中插入纯文本（不必转义HTML标记中使用的尖括号后台&符号）时，我们使用node的textContent属性来实现：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div id=&div&&&p&123&/p&&/div&
var d = document.getElementById('div');
d.textContent
&/code&&/pre&&/div&&p&textContent属性就是将指定元素的所有后代Text节点简单的串联在一起。&br&textContent是可读写的：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&d.textContext = '&span&45&/span&';
//&span&45&/span&
&/code&&/pre&&/div&&p&上面代码在插入文本时，会将&span&标签解释为文本，而不会当作标签处理。&br&注意：在IE中，使用innerText替代textContent。&/p&&p&&strong&1.6 创建、插入和删除节点&/strong&&/p&&p&&strong&1.6.1 创建节点&/strong&&/p&&p&&strong&（1）createElement()&/strong&&/p&&p&创建新的Element节点可以使用Document对象的createElement()方法。给方法传递一个元素的标签名作为参数（对HTML文档来说该标签名是不区分大小写的）&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var span = document.createElement('span')
&/code&&/pre&&/div&&p&&strong&（2）createTextNode()&/strong&&/p&&p&创建一个Text节点，参数为所要生成的文本节点的内容。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var newnode = document.createTextNode('content')
&/code&&/pre&&/div&&p&&strong&（3）createAttribute()&/strong&&/p&&p&生成一个新的属性对象节点，并返回它。参数是属性的名称。&/p&&p&&strong&（4）cloneNode()&/strong&&/p&&p&用来复制已存在的节点。每个节点有一个cloneNode()方法，返回该节点的一个全新副本。传递一个可选的布尔值为参数，如果参数true则同时克隆该节点的所有后代节点，否则只克隆该节点，默认为false。&/p&&p&&strong&1.6.2 插入节点&/strong&&/p&&p&我们可以用node的方法appendChild()或insertBefore()来讲新节点插入到文档中。&/p&&p&&strong&（1）appendChild()&/strong&&/p&&p&接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&parentNode.appendChild(newNode)
&/code&&/pre&&/div&&p&&strong&（2）insertBefore()&/strong&&/p&&p&用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&parenNode.insertBefore(newNode,oldNode)
&/code&&/pre&&/div&&p&注意：调用上面两个方法时，如果要插入的节点是已存在文档中的，那个节点将自动从它当前的位置移除并在新的位置重新插入。&/p&&p&Node对象并不存在insertAfter方法，如果你要将新节点插入到该节点的后面时，可以这样写：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function insertAfter(parentNode,newNode,oldNode){
if(oldNode.nextSibling){
parentNode.insertBefore(newNode,oldNode.nextSibling);
parentNode.appendChild(newNode);
&/code&&/pre&&/div&&p&&strong&1.6.3 删除和替换节点&/strong&&/p&&p&&strong&（1）removeChild()&/strong&&/p&&p&从文档树中删除一个节点。&br&注意：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&n.parentNode.removeChild(n);
&/code&&/pre&&/div&&p&&strong&（2）replaceChild()&/strong&&/p&&p&删除一个子节点并用一个新节点替换它。也是在父节点上调用该方法，第一个参数是新节点，第二个参数是需要替代的节点。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var span = document.createElement('span');
n.parentNode.replaceChild(span,n);
&/code&&/pre&&/div&&p&&strong&1.6.4 DocumentFragment&/strong&&/p&&p&DocumentFragment（文档片段）是一种特殊的Node，它作为其他节点的一个临时的容器，并不存在于文档中。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var frag = docment.createDocumentFragment();
&/code&&/pre&&/div&&p&DocumentFragment是独立的，而不是任何其他文档的一部分。它的parentNode总是为null。但类似Element，它可以有任意多的子节点，也可以使用appendChild()等方法。&/p&&p&DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待。&/p&&p&&strong&1.7盒状模型&/strong&&/p&&p&&strong&1.7.1 文档坐标和视口坐标&/strong&&/p&&p&元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。&/p&&p&坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于其显示文档的视口的左上角。&/p&&p&视口：实际显示文档内容的浏览器的一部分，不包括浏览器“外壳”（如菜单、工具条和标签页）。&/p&&p&文档：是基于整个网页。&/p&&p&&strong&1.7.2 查询元素的几何尺寸&/strong&&/p&&p&我们可以调用getBoundingClientRect()方法来判定一个元素的尺寸和位置。它不需要参数，返回一个有width、height、left、right、top和bottom属性的对象。&/p&&p&getBoundingClientRect()方法返回元素在视口坐标中的位置。&br&getBoundingClientRect方法返回的rect对象，具有以下属性（全部为只读）。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&x：元素左上角相对于视口的横坐标
left：元素左上角相对于视口的横坐标，与x属性相等
right：元素右边界相对于视口的横坐标（等于x加上width）
width：元素宽度（等于right减去left）
y：元素顶部相对于视口的纵坐标
top：元素顶部相对于视口的纵坐标，与y属性相等
bottom：元素底部相对于视口的纵坐标
height：元素高度（等于y加上height）
由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将left属性加上window.scrollX，top属性加上window.scrollY。 注意：getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，width和height包括了元素本身 + padding + border。
&/code&&/pre&&/div&&p&&strong&1.7.2 判断元素在某点&/strong&&/p&&p&elementFromPoint()方法，传递X和Y坐标（使用视口坐标），该方法返回在指定位置的一个元素。&/p&&p&&strong&1.7.3 滚动&/strong&&/p&&p&Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。&br&如果要查看整张网页的水平的和垂直的滚动距离，要从document.body元素上读取。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.body.scrollLeft
document.body.scrollTop
&/code&&/pre&&/div&&p&这两个属性都可读写，设置该属性的值，会导致浏览器将指定元素自动滚动到相应的位置。&/p&&p&&strong&scrollTop()&/strong&&/p&&p&也可以调用window对象的scrollTop()方法来滚动，接受一个点的X和Y坐标（文档坐标），并作为滚动条的偏移量设置它们。&/p&&p&&strong&scrollBy()&/strong&&/p&&p&用于将网页移动指定距离，单位为像素。它接受两个参数：向右滚动的像素，向下滚动的像素。&/p&&p&&strong&scrollIntoView()&/strong&&/p&&p&该方法保证了元素在视口中可见。在默认情况下，它试图将元素的上边缘放在或尽量接近视口的上边缘。如果只传递false作为参数，它将试图将元素的下边缘放在或尽量靠近视口的下边缘。默认true。&br&类似锚点滚动。&/p&&p&&strong&1.7.4 属性&/strong&&/p&&p&所有文档元素都有下面的属性：&br&&strong&（1）clientWidth、clientHeight&/strong&&/p&&p&clientHeight 属性返回元素节点可见部分的高度， clientWidth属性返回元素节点可见部分的宽度。&br&所谓“可见部分”，指的是不包括溢出（overflow）的大小，只返回该元素在容器中占据的大小，对于有滚动条的元素来说，它们等于滚动条围起来的区域大小。&br&这两个属性的值不包括滚动条、边框和Margin，只包含内容和它的内边距，单位为像素。&/p&&p&对于整张网页来说，当前可见高度（即视口高度）要从document.documentElement对象上获取，等同于window.innerHeight属性减去水平滚动条的高度。&br&没有滚动条时，这两个值是相等的；有滚动条时，前者小于后者。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var rootElement = document.documentE
// 没有水平滚动条时
rootElement.clientHeight === window.innerHeight // true
// 没有垂直滚动条时
rootElement.clientWidth === window.innerWidth // true
&/code&&/pre&&/div&&p&对于&i&、&code&和&span&这些内联元素，clientWidth和clientHeight总是0&/p&&p&&strong&（2）clientLeft、clientTop&/strong&&/p&&p&clientLeft 属性等于元素节点左边框（left border）的宽度， clientTop属性等于网页元素顶部边框的宽度，单位为像素。&/p&&p&但是如果元素有滚动条，并且浏览器将这些滚动条放置在左侧或顶部（极少见），这两个属性就包括了滚动条的宽度，但不包括Margin和Padding。&/p&&p&如果元素是内联元素，clientLeft和clientTop属性总是为0。&/p&&p&&strong&（3）scrollWidth、scrollHeight&/strong&&/p&&p&scrollHeight属性返回某个网页元素的总高度， scrollWidth 属性返回总宽度，也就是元素的内容加上它的内边距再加上任何溢出内容的尺寸。这两个属性是只读属性。&/p&&p&它们返回的是整个元素的高度或宽度，包括由于存在滚动条而不可见的部分。默认情况下，它们包括Padding，但不包括Border和Margin。&/p&&p&&strong&（4）scrollLeft、scrollTop&/strong&&/p&&p&scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量， scrollTop 属性表示网页元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。&/p&&p&如果要查看整张网页的水平的和垂直的滚动距离，要从document.body元素上读取。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.body.scrollLeft
document.body.scrollTop
&/code&&/pre&&/div&&p&这两个属性都可读写，设置该属性的值，会导致浏览器将指定元素自动滚动到相应的位置。&/p&&p&&strong&（5）offsetWidth、offsetHeight&/strong&&/p&&p&offsetHeight 属性返回元素的垂直高度，offsetWidth 属性返回水平宽度。这两个属性值包括Padding和Border、以及滚动条，也就是说从边框的左上角开始计算，这也意味着，offsetHeight只比clientHeight少了边框的高度。它们的单位为像素，都是只读。 整张网页的高度，可以在document.documentElement和document.body上读取。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&// 网页总高度
document.documentElement.offsetHeight
document.body.offsetHeight
// 网页总宽度
document.documentElement.offsetWidth
document.body.offsetWidth
&/code&&/pre&&/div&&p&&strong&（6）offsetLeft、offsetTop&/strong&&/p&&p&offsetLeft 返回当前元素左上角相对于 offsetParent节点的垂直偏移， offsetTop 返回水平位移，单位为像素。通常，这两个值是指相对于父节点的位移。&/p&&p&&strong&1.8 其他文档特性&/strong&&/p&&p&&strong&1.8.1 Document&/strong&&/p&&p&&strong&Document属性&/strong&&/p&&p&&strong&（1）document.cookie&/strong&&/p&&p&用来操作浏览器Cookie&/p&&p&&strong&（2）domain&/strong&&/p&&p&返回当前文档的域名&/p&&p&&strong&（3）lastModified&/strong&&/p&&p&包含文档修改时间的字符串&/p&&p&&strong&（4）location&/strong&&/p&&p&与window对象的location属性引用同一个location对象&/p&&p&&strong&（5）referrer&/strong&&/p&&p&document.referrer属性返回一个字符串，表示当前文档的访问来源，如果是无法获取来源或是用户直接键入网址，而不是从其他网页点击，则返回一个空字符串。&/p&&p&&strong&（6）title&/strong&&/p&&p&文档的&title&和&/title&标签之间的内容，可读写。&/p&&p&&strong&（7）URL&/strong&&/p&&p&文档的URL。只读字符串而不是location对象。该属性值与location.href的初始值相同。&/p&&p&&strong&（8）doctype&/strong&&/p&&p&document对象一般有两个子节点。第一个子节点是document.doctype，它是一个对象，包含了当前文档类型（Document Type Declaration，简写DTD）信息。对于HTML5文档，该节点就代表&!DOCTYPE html&。如果网页没有声明DTD，该属性返回null。&/p&&p&&strong&（9）documentElement&/strong&&/p&&p&document.documentElement属性返回当前文档的根节点（root）。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。&/p&&p&&strong&（10）defaultView&/strong&&/p&&p&document.defaultView属性，在浏览器中返回document对象所在的window对象，否则返回null。&br&
document.defaultView === window // true&br&&/p&&p&&strong&（11）activeElement&/strong&&/p&&p&document.activeElement属性返回当前文档中获得焦点的那个元素。用户通常可以使用Tab键移动焦点，使用空格键激活焦点。比如，如果焦点在一个链接上，此时按一下空格键，就会跳转到该链接。&/p&&p&&strong&（12）characterSet&/strong&&/p&&p&document.characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。&/p&&p&&strong&（13）readyState&/strong&&/p&&p&document.readyState属性返回当前文档的状态，共有三种可能的值。&br&loading：加载HTML代码阶段（尚未完成解析） &br&interactive：加载外部资源阶段时 &br&complete：加载完成时&/p&&p&&strong&（14）compatMode&/strong&&/p&&p&compatMode属性返回浏览器处理文档的模式，可能的值为BackCompat（向后兼容模式）和CSS1Compat（严格模式）。&/p&&p&一般来说，如果网页代码的第一行设置了明确的DOCTYPE（比如&!doctype html&），document.compatMode的值都为CSS1Compat。&/p&&p&&strong&Document方法&/strong&&/p&&p&&strong&（1）document.write()、document.writeIn()&/strong&&/p&&p&document.write()方法会将其字符串参数连接起来，然后将结果字符串插入到文档中调用它的脚本元素的位置。当脚本执行结束，浏览器解析生成的输出并显示它。&/p&&p&document.writeIn()，类似document.write()，只是在其参数的输出之后追加一个换行符。&/p&&p&&strong&1.8.2 查询选取的文本&/strong&&/p&&p&标准的window.getSelection()方法返回一个Selection对象，后者描述了当前选取的一系列一个或多个Range对象。&/p&&p&&strong&1.8.3 可编辑的内容&/strong&&/p&&p&我们可以设置任何标签的HTML contenteditable属性或者用JavaScript设置对应元素的contenteditable属性，使得元素的内容变成可编辑。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div contenteditable=&true&&&/div&
&/code&&/pre&&/div&&p&当你让标签的内容变成可编辑时，有些浏览器会默认开启检查，如果你不需要时，可以这样设置：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div contenteditable=&true& spellcheck=&false&&&/div&
&/code&&/pre&&/div&&p&在当今的一些富文本编辑中，常常使用iframe来当文本框，只需将Document对象的designMode属性设置为字符串“on”就可使得整个文档可编辑（“off”将恢复只读文档）。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&iframe id=&editor&&&/iframe&
var editor = document.getElementById('editor');
editor.contentDocument.designMode = 'on';
&/code&&/pre&&/div&&p&由于designMode属性并没有对应的HTML属性，所以要使用contentDocument属性。&/p&&p&&strong&1.8.4 execCommand()方法&/strong&&/p&&p&Document对象的execCommand()方法可以让我们很方便的插入元素或者改变样式。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
&/code&&/pre&&/div&&p&参数&br&aCommandName：一个 DOMString ，命令的名称。&br&aShowDefaultUI：一个 Boolean 是否展示用户界面，一般为 false。Mozilla 没有实现。&br&aValueArgument：一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null。&/p&&p&document.queryCommandSupport()&br&传递命令来查询浏览器是否支持该命令&/p&&p&document.queryCommandEnabled()&br&查询当前使用的命令&/p&&p&document.queryCommandState()&br&判断命令当前的状态。&/p&&p&document.queryCommandValue()&br&查询该值。&/p&&p&document.queryCommandIndeterm()&/p&
1、DOM文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。 当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。 如下图： 上图中的每…
&figure&&img src=&https://pic1.zhimg.com/v2-4c2cabfc7e4c4c18fb64b5f3ade06ee3_b.jpg& data-rawwidth=&1083& data-rawheight=&655& class=&origin_image zh-lightbox-thumb& width=&1083& data-original=&https://pic1.zhimg.com/v2-4c2cabfc7e4c4c18fb64b5f3ade06ee3_r.jpg&&&/figure&&p&&b&福利来了。。。&/b&&/p&&p&进入三月，春招和实习生招聘也开始繁忙了起来（结尾有彩蛋）&/p&&p&为了帮助技术类大学生更好的备战春招和实习，&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/activity/MockExam2017%3Ffrom%3Dmnkslrj& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&牛客网&/a&联合腾讯、百度、网易、京东、华为等18家互联网IT名企一起推出了 —— &b&IT校招全国统一模拟考试&/b&（地址：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/activity/MockExam2017%3Ffrom%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IT校招全国统一笔试_牛客网&/a&）&/p&&p&&b&一、考试介绍&/b&&/p&&p&IT校招全国统一模拟考试，完全模拟名企校招，采用在线笔试的方式进行，旨在帮助同学们体验真实校招模拟笔试，通过测评快速查缺补漏，并积累考试经验。&b&参与考试，除了一些奖品，你还将收获&/b&：&/p&&ul&&li&&b&求职竞争力报告&/b&：根据你的模拟考试成绩，评估你的求职竞争力，并给出详细报告。&br&&/li&&li&&b&名企模拟面试机会&/b&：合作名企将会提供一些模拟面试机会，选取部分同学体验真实面试，让技术专家帮忙指正你的问题，给出学习建议。&br&&/li&&li&&b&名企春招/实习绿卡&/b&：合作名企将会给成绩优秀的考生提供春招/实习直通面试的绿卡。&br&&/li&&/ul&&br&&p&&b&二、考试安排&/b&&/p&&p&IT校招全国统一模拟考试，是一个系列活动，每月会有1-2场考试，用于大家自测检验自身的学习情况，以及学习变化情况，更好地指导大家的学习。&b&3月第一场考试安排如下：&/b&&/p&&p&考试时间：3月7日 19：00--21：00&/p&&p&报名截止：3月7日 18：00&/p&&p&报名地址：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/activity/MockExam2017%3Ffrom%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&IT校招全国统一笔试_牛客网&/a&&/p&&p&考试形式：在线笔试&/p&&p&考试方向：Java/C++/测试/运维/前端/Ios/安卓/大数据&/p&&p&题目类型：单选题+编程题&/p&&p&适合人群：17届/18届/19届技术类大学生和研究生&/p&&figure&&img src=&https://pic4.zhimg.com/v2-4c2cabfc7e4c4c18fb64b5f3ade06ee3_b.png& data-rawwidth=&1083& data-rawheight=&655& class=&origin_image zh-lightbox-thumb& width=&1083& data-original=&https://pic4.zhimg.com/v2-4c2cabfc7e4c4c18fb64b5f3ade06ee3_r.jpg&&&/figure&&p&备注1：本活动完全免费，参与考试的同学每人都会收到自己的求职竞争力报告。&/p&&p&备注2：报告和成绩仅考生自己知晓，用于记录你的学习情况，企业不会存档，不影响正式校招和找实习。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-4a794ea1a9f1c3b88fae0_b.png& data-rawwidth=&877& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&877& data-original=&https://pic1.zhimg.com/v2-4a794ea1a9f1c3b88fae0_r.jpg&&&/figure&&p&&b&三、附录：名企历年校招真题大放送（部分企业）&/b&&/p&&p&腾讯：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D138%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&阿里：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D134%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&百度：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D139%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&京东：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D151%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&网易：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D149%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&华为：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D239%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&360：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D157%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&美团点评：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D179%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&爱奇艺：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D166%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&滴滴出行：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D652%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&搜狐：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D148%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&搜狗：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D659%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&去哪儿：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D141%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&人人网：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D140%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&乐视：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D162%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题_牛客网&/a&&/p&&p&蘑菇街：&a href=&http://link.zhihu.com/?target=https%3A//www.nowcoder.com/contestRoom%3FmutiTagIds%3D654%26from%3Dmnks199%26from%3Dmnks199& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【IT题库】笔试练习_C++Java前端笔试面试题&/a&&/p&
福利来了。。。进入三月，春招和实习生招聘也开始繁忙了起来（结尾有彩蛋）为了帮助技术类大学生更好的备战春招和实习，联合腾讯、百度、网易、京东、华为等18家互联网IT名企一起推出了 —— IT校招全国统一模拟考试（地址：…
&figure&&img src=&https://pic1.zhimg.com/v2-e3b217a31cdb2b50af1f01b5ecdebb7b_b.jpg& data-rawwidth=&1275& data-rawheight=&714& class=&origin_image zh-lightbox-thumb& width=&1275& data-original=&https://pic1.zhimg.com/v2-e3b217a31cdb2b50af1f01b5ecdebb7b_r.jpg&&&/figure&&p&大家似乎都觉得在专业图表制作过程中，软件的选择极为重要。在“知乎”上曾看到一个关于科学专业图表制作软件的帖子，当有人问到用哪款软件能画出漂亮的专业图表时，网友们都给出了自己的答案：&a href=&http://www.zhihu.com/question/& class=&internal&&如何在论文中画出漂亮的插图？ - 科研&/a&。&br&&/p&总的来说，在科学图表的制作方面，Python、Matlab或Mathematica、R语言是比较主流的应用软件。你可能只看关于这四款软件的文字描述，没什么视觉上的差异。下面我使用相同的数据，分别应用Python，Matlab和R语言绘制散点图，图像效果如图1.2.1所示。&p&&b&图1.2.1(a) &/b&是在Python语言matplotlib中使用半透明的配色，显示出高手1所说的那高贵冷艳的风格。Python为了进一步提升自己的绘图能力，还开发了Prettyplotlib和Seaborn两个绘图包。Seaborn的绘图风格和R语言的ggplot2很类似。&br&&b&图1.2.1(b) &/b&是使用Matlab 2013a经调整和修饰展现的散点图，效果还不错。Matlab 2014b 推出了全新的Matlab图形系统。全新的默认颜色、字体和样式便于数据解释。被大家吐槽的线条锯齿的丑陋默认配色也都已经改进，抗锯齿字体和线条使文字和图形看起来更平滑。&br&&b&图1.2.1(c) &/b&是使用R语言ggplot2包绘制的散点图，灰色背景和白色网格线的搭配给人清新亮丽的感觉。ggplot2包的开发者还开发了绘图效果类似的gcookbook包。但是也如高手3所说，R语言并不能很好地展示三维立体图，这也是它最大的缺陷。&br&&figure&&img src=&https://pic4.zhimg.com/78c853a741e0b2a9eab15f76b4dbee0d_b.jpg& data-rawheight=&280& data-rawwidth=&611& class=&origin_image zh-lightbox-thumb& width=&611& data-original=&https://pic4.zhimg.com/78c853a741e0b2a9eab15f76b4dbee0d_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/3e287a14cd8cd316f03fb29_b.jpg& data-rawheight=&286& data-rawwidth=&610& class=&origin_image zh-lightbox-thumb& width=&610& data-original=&https://pic2.zhimg.com/3e287a14cd8cd316f03fb29_r.jpg&&&/figure&但是不管这三款绘图效果到底如何，这三款软件一个共有的特点就是它们需要编程才能实现绘图功能，对于大部分没有编程基础的学生来说，这是一个很大的绘图障碍。然而，你不需要担心，因为有一款不需要编程基础就能实现这些软件的绘图效果，它就是众所周知的Excel。&/p&&p&使用Excel 2016模仿图1.2.1绘制的散点图，如图1.2.2所示。Excel绘图效果是不是几乎跟这三款软件展示的效果一样？在绘制二维图像方面，我觉得Excel是当之无愧的剑中之屠龙宝刀，它不仅能绘制出各种软件所展示的图像效果，也能自由控制所有的图表元素。&/p&&p&Excel、Python、Matlab或Mathematica、R、Tableau、D3.js 是数据可视化领域中十分优秀的图表制作软件。Excel绘制科学图表的方法与配色可借鉴这几款软件。Python、R、Tableau和D3.js的图表风格和配色效果各有各的特点，都是值得深入学习并应用到Excel科学图表的绘制中。&/p&&p&Tableau 是桌面系统中最简单的商业智能工具软件，Tableau 没有强迫用户编写自定义代码，新的控制台也可完全自定义配置，是一款功能超级好用、效果超级美观的商业图表绘制软件，但它是一款商业软件，需要付费才能使用，而且主要应用于商业数据的分析与图表制作。&/p&&p&D3.js是最流行的可视化库之一。D3帮助你给数据带来活力通过使用HTML、SVG和CSS，D3重视Web标准为你提供现代浏览器的全部功能。D3.js是一款专业级的数据可视化操作编程库，是基于数据操作文档JavaScript库。所以它也需要编程才能实现，而且编程比Matlab、R和Python更复杂。&/p&&p&使用D3.js的d3.layout.cloud.js绘制数据可视化软件的标签云(Tag Cloud)，如图1.2.3所示。不知道你认识或熟悉的数据可视化软件有几款，但这些并不重要，只要你会使用Excel就足以解决一维和二维数据的可视化。&br&&figure&&img src=&https://pic3.zhimg.com/f868cc7bb4febe9ba5e11b6681cfa1a0_b.jpg& data-rawheight=&276& data-rawwidth=&294& class=&content_image& width=&294&&&/figure&&/p&&br&&p&另外，我们来看看不同软件绘制的效果图，包括常见的Origin、Sigmaplot、GraphPad、Matlab、Python。&/p&&p&&figure&&img src=&https://pic1.zhimg.com/v2-9ccf59ea6a59dcc9883fb_b.jpg& data-rawwidth=&1098& data-rawheight=&280& class=&origin_image zh-lightbox-thumb& width=&1098& data-original=&https://pic1.zhimg.com/v2-9ccf59ea6a59dcc9883fb_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-144be31e2e0e8f4a5e3445_b.jpg& data-rawwidth=&1099& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&1099& data-original=&https://pic3.zhimg.com/v2-144be31e2e0e8f4a5e3445_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-5dced7bd9ca54b07e78f18b_b.jpg& data-rawwidth=&1100& data-rawheight=&257& class=&origin_image zh-lightbox-thumb& width=&1100& data-original=&https://pic4.zhimg.com/v2-5dced7bd9ca54b07e78f18b_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/v2-54cda8f58fbad0edaafea5e0c0e45ed9_b.jpg& data-rawwidth=&1101& data-rawheight=&265& class=&origin_image zh-lightbox-thumb& width=&1101& data-original=&https://pic3.zhimg.com/v2-54cda8f58fbad0edaafea5e0c0e45ed9_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-14dfceb64dd19c2fdb68_b.jpg& data-rawwidth=&1080& data-rawheight=&259& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic4.zhimg.com/v2-14dfceb64dd19c2fdb68_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-54f723af59c0d4aadb34253_b.jpg& data-rawwidth=&1092& data-rawheight=&271& class=&origin_image zh-lightbox-thumb& width=&1092& data-original=&https://pic2.zhimg.com/v2-54f723af59c0d4aadb34253_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-f008c00f97b0b95dea51cb3_b.jpg& data-rawwidth=&1044& data-rawheight=&262& class=&origin_image zh-lightbox-thumb& width=&1044& data-original=&https://pic1.zhimg.com/v2-f008c00f97b0b95dea51cb3_r.jpg&&&/figure&最后，我想说，有一款平凡的软件能绘制这些软件图像的效果，但又不需要编程基础就能实现，它就是众所周知的 Excel。Excel才是王道！使用Excel仿制的Python、Matlab、R绘制的散点效果图，几乎没有差异。&/p&&br&&p&&b&EasyCharts团队出品&/b&&/p&&p&帅的人都关注了EasyCharts团队^..^~ &/p&&p&QQ交流群：&b&&/b&&/p&&p&微信公众号：&b&EasyCharts&/b&&br&&/p&&p&更多信息敬请查看: &u&&a href=&https://link.zhihu.com/?target=http%3A//easychart.github.io/post/Easycharts/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&easychart.github.io/pos&/span&&span class=&invisible&&t/Easycharts/&/span&&span class=&ellipsis&&&/span&&/a&&/u&&/p&
大家似乎都觉得在专业图表制作过程中，软件的选择极为重要。在“知乎”上曾看到一个关于科学专业图表制作软件的帖子，当有人问到用哪款软件能画出漂亮的专业图表时，网友们都给出了自己的答案：。 总的来说，在科学图表…
&figure&&img src=&https://pic1.zhimg.com/v2-77fd5efbf8e0ea4b556bf3_b.jpg& data-rawwidth=&366& data-rawheight=&314& class=&content_image& width=&366&&&/figure&&p&&i&这是之前我去面试滴滴时的一道面试题，它看起来可能不那么的偏前端，但我仍然觉得很有意思，我省略安全校验、意外错误处理等细节性的问题，单单来聊聊负载均衡相关的方面。当然了，我本身不是后端，这方面经验肯定不是十分足，欢迎各位赐教。&/i&&/p&&p&问题是这样的：&b&我们要实现一个利用 WebSocket 进行实时通讯的基于 Web 的即时通讯应用，假设未来用户量会很大，我们要用到多个服务器，那我们如何实现两个用户间的通讯呢？&/b&&/p&&br&&p&我们先来看看&b&只有一台机器时的情况&/b&。&/p&&p&在连接上 WebSocket 后，我们会获得一个 Socket 对象，我们将该 Socket 对象放到一张映射表上存起来。之后，我们就可以根据该 Socket 对象所对应的 user 的 uuid 来获取到。&br&&/p&&p&当 UserA 向 UserB 发送请求时，UserA 会在发送消息时携带上 UserB 的信息（比如 uuid），这样后端服务器就可以根据 UserA 提供的 UserB 的信息，从映射表中查到 UserB 对应的 Socket 对象，从而成功地向 UserB 发送消息。&/p&&p&用户量少的时候我们可以这样简单地用单台机器来处理，我们再来看看多台机器会遇到一些什么问题？&/p&&p&首先，我们面临的第一个问题就是：&b&如何知道另一个用户在哪台服务器上？&/b&&/p&&p&我们可能&b&第一个想法&/b&就是：所有机器都使用一张映射表，映射表里记录了每台机器都储存了哪些 Socket，当有新用户连接的时候，被负载均衡器分配到的服务器会向我们所有的其它服务器发送一条消息，以更新映射表，这样我们就成功地定位到了另一用户所在的服务器了。&/p&&p&但大家都会发现，这样的策略虽然简单，但非常的粗暴，&b&当用户数和服务器数很多的时候，每次更新用户上下线都是一种很大的压力&/b&。&/p&&p&于是我们有了&b&第二个想法&/b&：我们每台机器不再保存所有用户的映射，我们使用单台服务器（简称 S）来保存所有的用户映射，当某服务器需要寻找另一用户所在的服务器时，就向服务器 S 查询。&/p&&p&这样的策略显然是依赖单点服务器的，&b&性能的瓶颈会在这单台服务器上&/b&。&/p&&br&&p&回头一想，我们或许方向有点走错了，虽然我们要在单台机器上要依赖映射表，但在定位服务器时不一定也要用映射表啊！然后就是&b&第三个想法&/b&：&b&我们使用一种算法，来对 uuid 进行 hash，将得到的 hash 作为服务器的 ID 就可以了&/b&。&/p&&p&我们定义一个函数 hash，它接受一个参数 uuid，返回一个对应服务器的 ID：hash(uuid) =& serverId。hash 函数我们用最简单的算法 mod——也就是取模——来举例。比如我们有 6 台机器，uuid 为 7，那么我们的运算过程是这样的：hash(7) =& mod(7, 6) =& 1，于是我们就知道，uuid 为 7 的用户所在的服务器应该是 ID 为 1 的服务器。&/p&&p&&b&这种方法可以让我们不再依赖单个节点。但它引入了新的问题：当我增加或减少机器数量的时候，会导致取模时的除数发生变化，这意味着我们需要把所有的在线用户进行重新计算，运算量非常庞大。&/b&&/p&&p&那么这个时候，&b&杀手锏&/b&要来了：&b&一致性哈希&/b&。&br&&/p&&p&&b&一致性哈希简单来讲，就是我们建立无数个虚拟节点（比如 2^32 个），把它们围成一个环状。然后，我们把一些真实的服务器放置在这些节点上，在执行 hash(uuid) 时，其除数为虚拟节点数，于是我们会得出一个虚拟节点的 ID，我们根据这个虚拟节点所在的位置，往后查找真实服务器，从而定位到用户所对应的服务器中。在增减服务器时，我们只需要移动很少量的对象（很少量的缓存会失效）。&/b&&/p&&p&关于一致性哈希，我找到一篇由 &a href=&https://www.zhihu.com/people/f040bdd1bbff2df77c088a& data-hash=&f040bdd1bbff2df77c088a& class=&member_mention& data-editable=&true& data-title=&@刘梦馨& data-hovercard=&p$b$f040bdd1bbff2df77c088a&&@刘梦馨&/a& 写的《&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&聊聊一致性哈希&/a&》，这篇文章讲解得非常的通俗易懂，大家想了解更多关于一致性哈希的话建议大家去阅读。&/p&&br&&p&参考文献：&/p&&ul&&li&&a href=&https://link.zhihu.com/?target=https%3A//zh.wikipedia.org/wiki/%25E4%25B8%%%25E5%E5%25B8%258C& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一致哈希 - 维基百科&/a&&br&&/li&&li&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&聊聊一致性哈希 - 知乎专栏&/a&&/li&&li&题图：&a href=&https://link.zhihu.com/?target=http%3A//www.oschina.net/translate/zstack-stateless-clustering& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ZStack 的伸缩性秘密（第二部分）无状态服务&/a&&/li&&/ul&
这是之前我去面试滴滴时的一道面试题，它看起来可能不那么的偏前端，但我仍然觉得很有意思，我省略安全校验、意外错误处理等细节性的问题，单单来聊聊负载均衡相关的方面。当然了，我本身不是后端，这方面经验肯定不是十分足，欢迎各位赐教。问题是这样的：…
&figure&&img src=&https://pic2.zhimg.com/v2-f2ae75867ccb6e91a3d3dcfeecb538cd_b.jpg& data-rawwidth=&550& data-rawheight=&306& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&https://pic2.zhimg.com/v2-f2ae75867ccb6e91a3d3dcfeecb538cd_r.jpg&&&/figure&&p&最近Monkey同学在大话测试专栏发了篇文章谈“&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&作为一个面试官，我是怎么来面试测试人员的&/a&”，正好作为一个有多年面试和被面试经验的行业老人，从面试者的角度来说说怎么准备工程师的面试。&/p&&p&首先每个公司的侧重点不一样，所以没有什么以不变应万变的灵丹妙药，但要说到套路还是有一些的。我先简单讲一下我的几段面试经历。&/p&&p&微软：因为面的是基层岗位，所以二话不说上来就撸代码，撸完了就是各种关于复杂度和边界条件的问题，然后测试各种设计用例验证你的代码正确。全程英语，节奏很紧，并不是你一定要把所有题目都作对了，而是考察你的思考能力和代码实践能力，千万不要犯低级错误。虽然有好几题我没有给出最优解，但是最后还是通过了。&/p&&p&EMC：典型的传统大厂，虽然和开发交流了C++的几个坑爹问题，但那只是开胃小菜，面试主要还是关于测试流程、用例设计方面的，总体比较轻松。&/p&&p&阿里：阿里不同的部门差别很大，面云计算部门居然遇到了当年交大ACM冠军队的教练，各种算法细节被问得无言以对男默女泪...淘宝则相对轻松，虽然因为非互联网行业的关系，Java、前端、无线基本没搞过，但凭着之前比较丰富的项目经验、管理经验以及对阿里价值观的了解搞定了。&/p&&p&在EMC和阿里时，因为基本都是从头组建团队，所以不管是社招和校招，看了大量的简历，与无数的面试者进行了交流，所以自认为经验还是比较丰富的。下面的分享主要是针对有3到5年工作经验的应聘者，并不特别针对测试工程师，其它岗位也可以参考。&/p&&ol&&li&了解你的应聘对象。现在搜索引擎这么发达，很容易知道对方使用哪些技术和框架，对应聘岗位有什么样的要求。有人可能要问了，对方要求Java，可我只用过Python或PHP怎么办？一般情况下，只要是正规公司，既然安排你面试了，就说明对你简历上的情况已有一定了解，而且安排面试成本其实挺高的，更重要的目的是考察你的学习能力。这种情况下，利用网上资料，速成3到5天，基本也可以做到没吃过猪肉也见过猪跑的水平。比如应聘阿里巴巴，那么先找本《淘宝技术这十年》可以让你快速了解阿里当前使用的技术以及历史上遇到什么问题，如何演化的今天这个形态。对于分布式系统，即使没有做过，也可以先去学习一下开源的dubbo框架，虽然是内部HSF的先驱版本，但是设计思想已经充分体现了。对于测试技术，可以在网上搜索各种会议的文章，以及员工的博客，就可以有个大概了解有针对性的准备了。另外朋友圈也要利用起来，可以打听道更多的一手信息。&/li&&li&了解你的简历。可能有同学会比较奇怪，我自己写的简历还能不了解？然而事实确实如此，不少同学在简历上项目经历列了一大堆，看上去经验丰富，可是一问就缩水了，比如这个项目我只是负责沟通，我参与了讨论，时间太久记不得了，只是在别人的框架上做些修改...这个直接是负分啊！期望和实际落差太大了。一个忠告，没有价值的东西不要出现在简历上，写简历不是写网文，越长越好，我工作到现在十几年，简历中文一页，英文一页，话说我刚毕业找工作那会，啥都没干过简历能写个3-4页，现在想想都瀑布寒...针对每一段项目经历，我这里给一个推荐的框架来进行准备：&/li&&ol&&li&这个项目解决了什么问题，达成了什么目标，使用了什么技术&/li&&li&你在这个项目里面做了什么，你的模块解决了什么问题，达成了什么目标？&/li&&li&使用了什么技术，为什么使用这项技术，与其它技术相比是如何取舍的（这会是个开放性问题，平时面上的积累很重要），开发过程中遇到了什么难题，如何考虑解决的（思考过程很重要）？&/li&&/ol&&li&提高自己的表达能力！！！很多人花了很多时间专研技术，但是表达能力就呵呵了。实际在面试工作中不可能总是遇到懂你工作领域的人，一个服务端出身的技术经理来问你无线开发，一个行政出身的HR问你项目经历，怎么把他们说懂而且让他们觉得你是真的很能干才是关键。有的同学上来就陷入了技术细节，直接把人侃得云里雾里，造成面试官无法做出判断，根据保险的原则，扣了分再说。推荐做法是先谈疗效，也就是用数字说话，比如效率提高了多少，故障数降低了多少，在对方感兴趣的情况下，再慢慢展开到技术细节。这样做首先说人话，不管是否了解你这个领域，都对你的工作成果有了了解，更容易打分评估，而且层层展开，会认为你表达有条理，额外再加分。平时表达能力不好的同学没事可以练练朗诵，面试前可以找朋友来帮忙做个模拟面试。&/li&&li&价值观。说白了就是原意朝九晚五薪水稳定工作生活平衡，还是996夜夜加班可能暴富跨越阶级。这个没法说，一种是真心认同，一种是混日子，面试的时候看自己的选择，不要因为网上政治正确的忽悠在面试时较这个劲。&/li&&/ol&&p&最后扯得远一点，Monkey在文章中提到了有博客或github项目，重点不在于有没有，而是在于你如何建设。简单点说就是好记性不如烂笔头，通过平时点滴的积累构建自己的知识库和方法论。我看你的博客和github不是看转贴的，而是重点考察你自己的学习积累思考过程。&/p&&br&&p&广告贴：&a href=&https://link.zhihu.com/?target=http%3A//www.monstersay.cn/%3Fp%3D15& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2017年最新测试技术课程出炉，2门课套餐价3999&/a&！！！&/p&
最近Monkey同学在大话测试专栏发了篇文章谈“”，正好作为一个有多年面试和被面试经验的行业老人，从面试者的角度来说说怎么准备工程师的面试。首先每个公司的侧重点不一样，所以没有什么以不变应万变的灵丹妙药，…
&p&回答这个问题前，我们可能需要先理一下&b&测试工程师是什么&/b&。&/p&&p&度娘说：&/p&&p&测试工程师，软件质量的把关者，目前传统的软件行业还是以软件测试工程师为主，但是在新兴的互联网行业大多还是以QA来命名这个职位，也就是质量保证。&/p&&p&&b&以互联网产品的工作流程图为例&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/50/85aab3153d_b.jpg& data-rawwidth=&865& data-rawheight=&361& class=&origin_image zh-lightbox-thumb& width=&865& data-original=&https://pic4.zhimg.com/50/85aab3153d_r.jpg&&&/figure&&p&可以看到，测试的工作在开发之后，是产品上线前的最后一步。一般来说，当开发按照产品需求、交互设计、视觉设计完成软件开发后，就把完成版本提交给测试，测试人员再根据既定的测试用例进行功能测试、兼容性测试、性能测试等，逐渐收敛BUG，最后才能正式上线。&/p&&p&&b&测试的工作主要由四部分组成&/b&&/p&&p&&b&功能测试：&/b&功能测试就是对产品的各功能进行验证，根据功能测试用例，逐项测试，检查产品是否达到用户要求的功能。&/p&&p&&b&兼容性测试：&/b&指对所设计程序与硬件、软件之间的兼容性的测试，包括软件能否在不同操作系统、不同机型、不同应用软件上、以及向前向后等兼容性能。&/p&&p&&b&性能测试：&/b&通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试，以保证产品在大流量前提下都能正常运行，像我们熟知的负载测试和压力测试都属于性能测试，&/p&&p&&b&安全测试：&/b&以发现安全隐患为目标，防止产品上线后被攻击。&/p&&p&完成这些测试的步骤后，一款互联网产品就可以正式上线了。&/p&&p&因此，&b&测试既是产品的第一个体验者（最早从开发手中接过成型的产品），也是产品质量的最后一道防线守卫者（做各种测试，保证用户拿到的最终成品可用、易用）。&/b&因为测试的工作特性，他需要从用户的角度出发体验产品，这也决定了测试与开发、策划、设计等岗位交流、沟通的时间也会成为工作的一部分，甚至承担起整个产品的协调工作。这样看来，把测试称为QA（质量保证人员）也就一点不奇怪了。&/p&&p&&b&测试无用论？&/b&&/p&&p&即使前面废话了很多，对测试有偏见的人依然会说，&/p&&p&“测试的工作其实开发也能做啊，何必再设一个测试呢？”&/p&&p&或者“为什么互联网公司不开除测试，转而让大众来测，找到一个bug给100元？”&/p&&p&（&a href=&https://www.zhihu.com/question/& class=&internal&&为什么互联网公司不开除测试，转而让大众来测，找到一个bug给100元？ - 信息技术（IT）&/a&）&/p&&p&会产生这种想法也并不奇怪，毕竟隔行如隔山，不过这里我还是要指出，上面的论述的错误之处在于&/p&&p&（1）完全割裂了测试与开发工作&/p&&p&（2）测试的工作被简化成找BUG&/p&&p&事实上，找BUG只是测试最初级的阶段，虽然必须承认，测试的门槛低于开发，但优秀的测试人员工作量之大，专业度之高，绝非一般用户能替代。&/p&&p&就像我们每个人都会接触到的kpi指标一样，测试的每块工作内容也都有不同的能力等级划分：&/p&&p&（1）手工测试，发现BUG&/p&&p&（2）通过各种手段，确认这个BUG是一个需要解决问题，然后确定该BUG的重现步骤并尽可能简化&/p&&p&（3）了解被测产品框架，能从代码中定位BUG源头，并能给出可能的解决方法&/p&&p&（4）尝试找出该BUG发生的原因，并能找出检测同类BUG的方法（标准化）&/p&&p&（5）能在保障产品质量的基础上，协调起整个项目上线的时间和流程&/p&&p&&b&以上能力，是从授人以鱼向授人以渔递进的。&/b&&/p&&p&当你在执行前人的测试用例时，找BUG固然是工作要求，但最主要的用意是学习用例的编写思路和方法，从案例中总结出规律，进而开始自己编写标准化测试用例，以免同类问题生出千万条不同用例。&/p&&p&一个测试的能力，能达到的层级越高，团队中的开发、策划就能节省更多时间，团队运行也会更高效。而专业的测试，正常来说应该比开发对产品有更深入的理解，对于可能影响测试的因素，像Tomcat配置、数据库索引、多线程等都会有丰富的经验。&/p&&p&&b&从入门到精通测试，距离有多远？&/b&&/p&&p&我始终认为，每个专业的学习与进步，都有赖于三个因素：&/p&&p&&b&（1）坚持&/b&&/p&&p&&b&（2）资源&/b&&/p&&p&&b&（3）天赋&/b&&/p&&p&以第一个最重要，但第一个和第三个都不是外部可控因素，全靠自己，所以这边也只能列一些可以参考的资源。&/p&&p&&b&1&/b&&b&、书&/b&&/p&&p&&b&《软件测试》&/b&&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject/1097403/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&软件测试 (豆瓣)&/a&&/p&&figure&&img src=&https://pic4.zhimg.com/50/681acee9eca9d7d1e5aed1c2ddfbd440_b.jpg& data-rawwidth=&290& data-rawheight=&346& class=&content_image& width=&290&&&/figure&&p&这本书可以帮你快速了解测试的工作内容，像理论概念、测试流程、Bug管理、自动化测试等书中都有详细讲解，看完后应该会对“测试人员の一天”有大致了解，入门级必备吧。&/p&&p&&b&《软件测试经验与教训》&/b&&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject/1139061/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&软件测试经验与教训 (豆瓣)&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/50/b8b6ac4c62_b.jpg& data-rawwidth=&339& data-rawheight=&442& class=&content_image& width=&339&&&/figure&&p&测试界领军人物James Bach写的，从测试的角色入手，全方位剖析测试的方法技巧、职业发展，文中有很多话都被奉为测试界的经典箴言，不愧是一路被坑之后撰写而成的血泪史，不仅是测试入门的读物，更适合搭配实际工作经验一起食用，字字珠玑，常看常新。&/p&&p&&b&《鸟哥的Linux&/b&&b&私房菜.&/b&&b&基础学习篇（第三版）》&/b&&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject/4889838/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&鸟哥的Linux私房菜.基础学习篇（第三版） (豆瓣)&/a&&/p&&figure&&img src=&https://pic2.zhimg.com/50/5ab1f474ddfa3f899e097_b.jpg& data-rawwidth=&289& data-rawheight=&364& class=&content_image& width=&289&&&/figure&&p&前面也提到，因为测试的特殊性，必须对开发环境、程序语言也了解透彻，因此除了了解测试之外，也可以去看看其他著作。《鸟哥的Linux私房菜.基础学习篇（第三版）》作为遐迩闻名的 Linux 中文入门教材，行文浅显生动，深入浅出，读之往往令人欲罢不能，对于不喜欢啃晦涩大部头巨作，但又想入门Linux操作系统的，都可以去尝试。&/p&&p&&b&《深入浅出Java&/b&&b&》&/b&&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject/1504092/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&深入浅出Java (豆瓣)&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/50/56cbd7e34a1_b.jpg& data-rawwidth=&269& data-rawheight=&348& class=&content_image& width=&269&&&/figure&&p&别看近700页的大部头，但因为是基础书籍，翻来覆去都在用简单通俗的语言将概念理清楚。能把书写长不难，但能风趣幽默地把一堆概念准确明白的告诉小白读者，这才是最厉害的，对于JAVA初级入门者，强推此书。&/p&&p&&b&2&/b&&b&、网络资源&/b&&/p&&p&&b&TesterHome：&a href=&//link.zhihu.com/?target=https%3A//testerhome.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&testerhome.com/&/span&&span class=&invisible&&&/span&&/a&&/b&&/p&&p&&b&51testing：&a href=&//link.zhihu.com/?target=http%3A//bbs.51testing.com/forum.php& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&51Testing软件测试论坛&/a&&/b&&/p&&p&&b&测试之道：&/b&&a href=&//link.zhihu.com/?target=http%3A//www.testtao.com/portal.php& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&软件测试网-测试之道&/a&&/p&&p&三个测试交流的社区论坛，TesterHome更专注于移动App自动化测试，51testing比较老，有很多老牌测试，但不免与老版论坛一样变得平庸化，测试之道比较新。论坛的好处在于可以分享交流，还有很多经验之谈，虽然测试用例在变，在努力的方式往往相似。&/p&&p&如果想快速上手，可以直接去&b&网易云课堂、慕课网&/b&等搜索测试课程，前者的《测试工程师》微专业（&a href=&//link.zhihu.com/?target=http%3A//mooc.study.163.com/smartSpec/detail/.htm%3Futm_source%3Dutm_medium%3Dcps%26utm_campaign%3Daffiliate& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&mooc.study.163.com/smar&/span&&span class=&invisible&&tSpec/detail/.htm?utm_source=2045618&utm_medium=cps&utm_campaign=affiliate&/span&&span class=&ellipsis&&&/span&&/a&）是网易自己出品的，课程编排成体系化，授课老师是一线测试工程师，强调实践能力，而且会定期考核节课，有预算、且缺乏自制力的同学可以考虑。后者上的课程都是免费的，但比较零散，适合想要长线作战的同学入手。&/p&&p&另外，大公司的测试部门和测试大牛的博客都推荐大家去关注，大公司规范的流程、经验大部分都是经过了项目锤炼，能让新人学会很多。而大牛，也有很多经验之谈，避免走弯路，已经是成功的捷径了。&/p&&p&&b&谷歌测试部门博客（英文）：&a href=&//link.zhihu.com/?target=http%3A//googletesting.blogspot.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&googletesting.blogspot.com&/span&&span class=&invisible&&/&/span&&span class=&ellipsis&&&/span&&/a&&/b&&/p&&p&&b&网易测试部门博客：&a href=&//link.zhihu.com/?target=http%3A//qa.blog.163.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&qa.blog.163.com/&/span&&span class=&invisible&&&/span&&/a&&/b&&/p&&p&&b&阿里测试专家公直博客：&a href=&//link.zhihu.com/?target=http%3A//sdet.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&All about Testing&/a&&/b&&/p&&p&&b&51testing优秀版主陈永达博客：&a href=&//link.zhihu.com/?target=http%3A//www.cydtest.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&陈永达的软件测试&/a&&/b&&/p&&p&&b&51CTO博客之星柳记：&a href=&//link.zhihu.com/?target=http%3A//eilfei2000.blog.51cto.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&eilfei2000.blog.51cto.com&/span&&span class=&invisible&&/&/span&&span class=&ellipsis&&&/span&&/a&&/b&&/p&&p&&b&著名测试专家邰晓梅博客：&a href=&//link.zhihu.com/?target=http%3A//www.taixiaomei.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&taixiaomei&/a&&/b&&/p&&p&&b&专注于ios单元测试的优秀国外独立博客（英文）：&/b&&a href=&//link.zhihu.com/?target=http%3A//iosunittesting.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS Unit Testing&/a&&/p&&p&&b&3&/b&&b&、多练勤思&/b&&/p&&p&这大概是小学教师前经常会贴的一句话，但用在测试入门上也分毫不差，对于接受能力强的年轻人来说，本身门槛较低的测试入门不是难事。&/p&&p&有计算机基础的可以先去啃啃书考个&b&软考&/b&，也可以去投投简历&b&实习&/b&，大小公司都先可以，对重复的手动的测试工作上点心，总结规律，逐步提高，也跟前辈多多学习。&/p&&p&&b&先入门，再入行就不难了。&/b&&/p&
回答这个问题前，我们可能需要先理一下测试工程师是什么。度娘说：测试工程师，软件质量的把关者，目前传统的软件行业还是以软件测试工程师为主，但是在新兴的互联网行业大多还是以QA来命名这个职位，也就是质量保证。以互联网产品的工作流程图为例可以看到…
&p&Github 上有同学总结了一份 机器学习和深度学习资料列表 ,共两篇，总计接近 1000 条。&br&原文第一篇如下：&br&&a href=&//link.zhihu.com/?target=https%3A//github.com/ty4z2008/Qix/blob/master/dl.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Qix/dl.md at master · ty4z2008/Qix · GitHub&/a&&br&&/p&&blockquote&机器学习(Machine Learning)&深度学习(Deep Learning)资料(Chapter 1)&a class=& wrap external& href=&//link.zhihu.com/?target=https%3A//github.com/ty4z2008/Qix/blob/master/dl.md%23%25E6%25B3%25A8%25E6%259C%25BA%25E5%%25E5%25AD%25A6%25E4%25B9%25A0%25E8%25B5%%E7%25AF%%259B%25AE%25E4%25B8%%0%25E6%259D%25A1%25E7%25AF%%259B%25AE%25E4%25BA%258C%25E5%25BC%%25A7%258B%25E6%259B%25B4%25E6%& target=&_blank& rel=&nofollow noreferrer&&Qix/dl.md at master · ty4z2008/Qix · GitHub&/a&注:机器学习资料&a href=&//link.zhihu.com/?target=https%3A//github.com/ty4z2008/Qix/blob/master/dl.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&篇目一&/a&共500条,&a href=&//link.zhihu.com/?target=https%3A//github.com/ty4z2008/Qix/blob/master/dl2.md& class=&