Web前端开发面试题整理(带答案)

匿名网友 匿名网友 发布于: 2016-10-19 00:00:00
阅读 211 收藏 0 点赞 0 评论 0

1,行内元素有哪些,块级元素有哪些?

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

   行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  

                   
 

内联元素(行内元素)内联元素(inline element)
* a - 锚点* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

块元素(block element)
* address - 地址

* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

 
 

 
 

2  区别:

   1)块级元素会独占一行,其宽度自动填满其父元素宽度

        行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容         而变化

   2) 块级元素可以设置 width, height属性,行内元素设置width,  height无效

         【注意:块级元素即使设置了宽度,仍然是独占一行的】

   3) 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

 

  1. doctype的作用?严格模式和混杂模式如何区分?他们有何意义?

    (1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

     

    (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

     

    (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

     

    (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

    2.1 doctype的作用:<!doctype> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

    2.2 严格模式和混杂你模式如何区分:严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

    在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

    DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

    2.3 意义:DOCTYPE决定浏览器如何渲染网站(浏览器使用哪种规范去解析网页)

    触发:浏览器根据doctype是否存在和使用的是那种dtd来决定。

     

    doctype的作用: 浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,由此知道要使用HTML的哪个版本。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

    区别:严格模式是浏览器根据规范去显示页面,

    混杂模式/过渡模式是以一种向后兼容的方式去显示,允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。 

    意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)

    触发:浏览器根据doctype是否存在和使用的是那种dtd来决定。

     

     

    3你知道多少种Doctype文档类型?

    dcotype可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

    HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

    XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

    Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks

    (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

     

  2. 说说你对语义化的理解?

    1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构

    2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

    3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

    4,便于团队开发和维护,语义化更具可读性,是下一代网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

     

    5、HTML与XHTML——二者有什么区别

    xhtml比html更加严格,主要表现在以下方面:

    1.xhtml所有的标记都必须要有一个相应的结束标记

    2.xhtml所有标签的元素和属性的名字都必须使用小写

    3.xhtml所有的XML标记都必须合理嵌套

    4.xhtml所有的属性必须用引号””括起来

    5.xhtml把所有<和&特殊符号用编码表示

    6.xhtml给所有属性赋一个值

    7.xhtml不要在注释内容中使”–”

    8.xhtml图片必须有说明文字

     

    6、CSS中 link 和@import 的区别是?

    1 link属于HTML标签,而@import是CSS提供的;

    2页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

    3 import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

    4 link方式的样式的权重高于@import的权重.

     

    任务: 下载css基础课视频,本周末全部看完,一共只有几个小时,未来几天的问题都出自此视频:”我的网盘/珠峰培训/珠峰培训(分享)/实体直播(实体班腾讯课堂录像)/CSS基础课”

  3. position: relative和absolute分别是相对于谁进行定位的?

    absolute : 生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

    relative :生成相对定位的元素,相对于其在普通流中的位置进行定位。

    补充说明position的另外两个值fixed和static。

    fixed (老IE不支持): 生成绝对定位的元素,相对于浏览器窗口进行定位。

    static 默认值。没有定位,元素出现在正常的流中

     

  4. 列出display的值,说明他们的作用。并说出position:absolute和float属性的异同
  5. display的值:

    block 象块类型元素一样显示。

    none 缺省值。象行内元素类型一样显示。

    inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

    list-item 象块类型元素一样显示,并添加样式列表标记。

    2 相对定位和绝对定位共同点:

    对内联元素设置`float`和`absolute`属性,可以设置其宽高,可以覆盖页面中的其他元素。

    不同点:

    float仍会占据原来的位置,相对于自身在普通流中的初始位置进行定位。

    Absolute脱离文档流,绝对定位的位置与文档流无关,因此不占据空间。绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素,那么元素相对于初始包含块定位。根据用户代理的不同,初始包含块可能是画布或者html。

     

     

    9 面试题9:聊聊盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型有何不同。

    盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

    盒模型指定元素如何显示已经如何交互。 页面中的每一个元素被看做一个矩形框,这个框由元素的内容,内边距,边框和外边界组成。

    (2)盒模型有两种, IE 8以下盒子模型、标准 W3C 盒子模型;

    IE8以下的盒子模型 content的width和height包含了 border 和 padding;

    W3C标准盒子模型 content的width和height不包含border和padding

    10

    11 css sprite

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的”background-image”,”background- repeat”,”background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了`http2`。

    12 CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?

    12.1 css 选择符;

    1.id选择器( # myid)

    2.类选择器(.myclassname)

    3.标签选择器(div, h1, p)

    4.相邻选择器(h1 + p)

    5.子选择器(ul > li)

    6.后代选择器(li a)

    7.通配符选择器( * )

    8.属性选择器(a[rel = “external”])

    9.伪类选择器(a: hover, li:nth-child)

    12.2

    不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

    所有元素可继承:visibility和cursor。

    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

    终端块状元素可继承:text-indent和text-align。

    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

    表格元素可继承:border-collapse。

    12.3 不同权重的优先级为:!important > id > class > tag

    important 比 内联优先级高,但内联比 id 要高

    相同权重的优先级为:优先级就近原则,同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

     

  6. css3新增伪类有哪些?

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled :disabled 控制表单控件的禁用状态。

    :checked 单选框或复选框被选中。

     

    14、css3新特性

    1 CSS3实现圆角(border-radius)

    2 阴影(box-shadow),

    3 对文字加特效(text-shadow、)

    4 线性渐变(gradient)

    5 旋转(transform)transform: 旋转rotate(9deg) 缩放scale(0.85,0.90) 平移translate(0px,-30px) 倾斜 skew(-9deg,0deg);

    6 增加了更多的CSS选择器

    7 多背景

    8 rgba

    9 在CSS3中唯一引入的伪元素是::selection.

    10 媒体查询

    11 多栏布局

    12 border-image

    https://paran.io/css3-new-techniques/

     

  7. 面试题15: 为了兼容不同浏览器使用css3时前缀分别加什么?处理圆角的不同方式?

    15.1 使用css3样式时不同浏览器的前缀

    chrome和safari 前缀 -webkit

    Firefox 前缀 -moz

    IE 前缀 -ms

    Opera 前缀 -o

    15.2 处理圆角的三种不同方式

    1 css3 使用border-radius:5px 来设置四个角均为5px圆角的属性

    2 css2 插入带圆角的背景图片来实现圆角,外层盒子做相对定位,背景圆角图片相对于外层盒子绝对定位于盒子的边角。

    3 山顶角法(不推荐):css2 通过html标签模拟圆角,盒子内部插入几个高度为1px的div,每个div背景颜色相同,margin值不同, margin值从外到内依次递减1px。

    实现细节参见课程 http://www.imooc.com/learn/118

    16: border-radius,margin ,padding的属性值为1个值,2个值,3个值,4个值时分别代表设置哪个方位的属性。

    Border-radius一个值:四个角。两个值时:左上角 右下角 , 右上角 左下角。三个值时:左上角 , 左下角 右上角,右下角。四个值时:左上,右上,右下,左下

    Margin/padding:一个值时:上下左右。两个值时:上下 左右。三个值时:上下 左 右。

    四个值时:上 右 下 左

    17 对BFC规范的理解?

    BFC规范简明回答:

    BFC规范是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

    BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。

    BFC规范详细回答:

    什么是BFC?

    BFC的全称是Block Formatting Context,直译过来是:块级格式化上下文。

    在理解BFC时先理解三个概念:

    1、Block-level elements
    属于diplay: block;的元素,都是Block-level elements(块级元素);有可能会触发BFC。

    2、block boxes
    W3C规范原文的定义:”Block-level boxes that are also block containers are called block boxes.”可以作为block containers的块级元素,称为block boxes

    3、block container box
    原文:”a block-level box is also a block container box”。

    最后还有一句:”The three terms “block-level box,” “block container box,” and “block box” are sometimes abbreviated as “block” where unambiguous.”

    都简称为块级元素好了orz…为什么要纠结这个?主要是被规范的用词搞晕了,花了点时间才搞明白这三个词的意思。

    BFC的布局规矩:

    1、内部box在垂直方向,一个接一个的放置;2、box的垂直方向由margin决定,属于同一个BFC的两个box间的margin会重叠3、BFC区域不会与float box重叠(可用于排版);4、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。5、计算BFC的高度时,浮动元素也参与计算

    哪些元素或属性会触发BFC?

    1、根元素;2、float属性不为none;3、position为absolute或fixed;4、display为inline-block, flex, 或者inline-flex;5、overflow不为visible;

    18 什么是IFC(Inline formatting context)? BFC和IFC 有何区别?

    http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html?utm_source=tuicool

     

    19 你用过哪些浏览器,这些浏览器的内核分别是什么?

    1、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

    2、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

    3、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

    4、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版

     

     

    20解释下浮动和它的工作原理?清除浮动的技巧

    简化版(至少回答三种常见清除浮动技巧)

    浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

    1.使用空标签清除浮动。

    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

    2.使用overflow。

    给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

    3.使用after伪对象清除浮动。

    该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

     

    详细版(七种清除浮动的技巧)

    http://www.jb51.net/css/67471.html

     

    21 面试题21: 如何添加/彻底删除/临时删除断点,以及断点的分类?

    1 添加断点的六种方式:

    1.1 第一类添加手动断点的方式:在需要添加断点的行号前点击

    1.2 第二类添加手动断点的方法:在需要添加断点的行输入 debugger 关键词

    1.3 第三类添加条件断点(DOM变化事件断点)的方法:控制台的第一个页卡 Elements,随便选中一个html元素标签,右键弹出的菜单选择”break on”, 弹出三个子菜单”Subtree modifications”(修改子节点), “Attributes modifications,”(修改元素的属性)or “Node removal.”(删除节点),选中其中一个比如Subtree modifications,那么修改子节点时,会触发断点。

    1.4 第四类添加条件断点(XMLHttpRequest断点),切换到控制台sources面板,找到右下角的工具栏的”XHR Breakpoints”,点击”+”号添加一个字符串比如data.txt,当URL包含该字符串时会触发断点。

    1.5 第五类添加条件断点(javascript事件监听断点),切换到控制台sources面板,找到右下角的工具栏的”    Event Listener Breakpoints”,点击”箭头”符号展开,选择一个事件,比如 mouse click(鼠标单击事件),当鼠标单击时会触发断点。

    1.6 第六类添加条件断点(捕获异常断点),切换到控制台sources面板,找到右侧的”等号”图标,会在任何捕获异常初触发断点。

    2 彻底删除断点

    2.1 第一类删除手动断点的方式:在需要删除断点的行号前点击则取消断点

    2.2 第二类删除手动断点的方式:在右侧的工具栏找到 Breakpoints 可以看到已添加的手动断点列表,在需要删除的断点列表上点右键弹出菜单选择”remove breakpoint”

    2.3 第三类删除手动断点(debugger)的方式:在js脚本里直接删除debugger这个关键词。

    2.4 关于四类删除断点的方法,反向操作,取消之前已选择的即可,其中XMLHttpRequest断点删除之前输入的字符串,回车即可清空.

    3 临时删除断点

    3.1 第一类临时删除手动断点的方式:在右侧的工具栏找到 Breakpoints 可以看到已添加的手动断点列表,取消勾选在需要临时删除的断点前的对勾.

    3.2 第二类临时删除手动断点debugger的方式:在包含debugger 关键词的行上单击右键,选择”Never pause here” 则会忽略debugger。

    4 断点的分类

    4.1 手动断点

    手动断点分两种方式:直接在行号上点击和添加debugger关键词。

    4.2 条件断点

    条件断点分四类:DOM断点、XMLHttpRequest断点、javascript事件监听断点

    、捕获异常断点。

     

    22 如何调试第一类手动断点

    1 以下是chrome的调试快捷键

    F11逐语句调试,一行一行的执行,每一行都不放过。

    F10逐过程,一个函数一个函数的执行,如果遇上自定义函数,不会执行到这个函数内部。

    F8 逐断点,一个断点一个断点的执行,不在断点处的表达式,直接跳过。

    那一句表达的背景色变深,表示即将执行这一行,尚未执行。

    2 选中变量名或完整的条件表达式,右键”add to watch” ,在右侧工具栏可以的watch菜单下可以看到对应变量的值变化。

    3 注意事项:chrome浏览器,按F11时进行逐行调试时,如果遇到浏览器内置函数,按F11会打开并跳转到内置函数的定义文件里, 此时无法继续调试。

    此时应该按F5则退出内置函数并重新刷新页面,按F10进行调试,则可以避免跳转到内置文件。

     

    23 谷歌控制台调试相关图标和相关快捷键的功能

     

     

     

     

     

     

     

     

     

     

     

     

    Sources面板中,可能会用到以下快捷键帮助调试:

    图标

    Windows/Linux

    功能

    F8 Ctrl+/

    逐断点调试,按F8运行到下一个断点处暂停,如果没有下一个断点,则结束调试。

    单击长按图标,则出现下拉菜单可以切换到图标跳过断点,程序瞬间执行完成变成图标

    使断点不可用,立刻结束调试,使程序继续正常完成执行下面的代码。方便快速跳过断点立刻结束调试。例如,假设循环次数为10000次,按10000F8才能结束循环中的断点调试,而只需按一次就能立刻结束调试。

    F10 Ctrl+’

    逐行单步调试,不进入函数体内部

    F11 Ctrl+;

    逐行单步调试,进入函数体内部

    Shift+F11 Shift+Ctrl+;

    跳出当前函数

    Ctrl+F8

    使所有的断点暂时不可用,程序正常运行。

    程序在捕获到异常的地方暂停,并进入调试状态。

     

     

     

    24: 参考谷歌官方文档分别写出同步函数执行(调用堆栈call stack),异步函数执行(异步调用堆栈async call stack),黑箱脚本执行(call stack工具栏中不显示第三方函数)的示例代码,同时在控制台右侧工具栏观察call stack区域的变化过程。附上代码html 代码文件和截图(截图需要看到左侧代码区添加断点的行,右侧工具栏call stack的完整列表)

     

    25:在chrome浏览器中,如何使控制中的sources和console面板出现在同一个页面中?调试过程中,如何修改变量的值?比如循环次数为100次的for循环,刚进入调试时i=0,如何使得watch中i的值立刻变成98。

     

    26 引入css的方式有哪些?引入js的方式有哪些,外链式引入js文件时script标签之间的js代码是否有效?浏览器加载和渲染html的顺序?

     

    27 js的命名规范?关键字有哪些?保留字有哪些 ?如何定义全局变量和局部(私有)变量?Js在页面中输出信息的方法有哪些?

    任务:看视频2js20150822, 看《javascript高级程序设计》第三版中文版第三章第19~23页,3.1语法,3.2关键字和保留字,3.3变量,

    任务:看视频3js20150823, 看《javascript高级程序设计》第三版中文版第三章第23~36页3.4数据类型,第四章第68~72页4.1基本类型和引用类型的值,第五章引用类型83~137页(第三章3.4和第四章4.1两节需要精读细看,第五章先概览章节目录以后再细看)

     

     

    28 数据类型的分类?基本数据类型和引用类型的特点?如何检测数据类型?其他数据类型转换成Boolean类型的规律?其他数据类型转换为Number类型的规律?其他数据类型转换为String类的规律?

     

    29 如何创建对象?如何操作对象的属性(增删改查)?每种语句的语法规则?

    任务:看视频4js20150823, 看《javascript高级程序设计》第三版中文版第3章第54~62页3.5 语句,第5章第83~85页5.1Object类型.

    任务:看视频1js20150823, 看《javascript高级程序设计》第三版中文版第3章第36~39页3.5.1一元操作符。

    30 内置方法window.onload和 jQuery方法$(document).ready(function () { })的区别?举例说明三元运算符、if语句和switch语句之间如何等价转换?递增和递减操作符遵循哪些规则?一元加和一元减操作符遵循什么规则?

     

    任务:看视频2js20150823, 再看一遍《javascript高级程序设计》第三版中文版第3章第54~62页3.5 语句,再看一遍面试题29答案。

     

    31 将”3、变颜色.html”中的代码用with语句化简?’var bgColor = oDiv.style.backgroundColor; bgColor=”red” ‘,这段代码能否将oDiv元素的背景颜色设置为红色,为什么?’var oStyle= oDiv.style; oStyle.backgroundColor=”red” ‘,这段能否将oDiv元素的背景颜色设置为红色,为什么?通过调试深入理解for循环四部曲,举例说出for循环的执行步骤?举例说明break和continue的区别,说出”4、循环.html”中面试题的分析步骤?举例说明for in 语句的用法,并列举出通过属性名获取属性值的有效办法。

     

    任务:看视频3js20150823, 再看一遍《javascript高级程序设计》第三版中文版第5章第110~118页5.5 Function类型。

     

    32 写一个完整的隔行变色效果html文档?定义函数的有哪些方式?函数声明和函数表达式的区别?写一个方法sum来实现任意数求和的功能?

     

    任务:看视频4js20150823, 再看一遍《javascript高级程序设计》第三版中文版第5章第110~118页5.5 Function类型。

     

    33 写一个对象对象排序方法,可以按对象的属性排序?举例说说函数内部属性arguments和argument.callee的用法?arguments.caller和函数名.caller有啥区别?函数内部属性this的规则?写一个选项卡案例?

     

    任务:看视频1js20150829, 看《javascript高级程序设计》第三版中文版第3章第39~44页3.5.2 位操作符。看http://www.360doc.com/content/11/0308/14/5327079_99222581.shtml

    看视频http://www.iqiyi.com/w_19rtlqrjz5.html

    34 十进制和二进数字如何互相转化?把3.5.2位操作符”1按位非”中的num1=25换成其他数字,算出按位非后的结果?把3.5.2位操作符”5左移”中oldValue=2换成其他数字,算出左移后的结果?

     

    任务:看视频2js20150829, 看《javascript高级程序设计》第三版中文版第3章第44~4页3.5.3 位操作符。

     

    35 逻辑与、或、非的规则

     

    任务:看视频3js20150829, 看《javascript高级程序设计》第三版中文版第3章第47~50页3.5.8 相等操作符、3.5.9赋值操作符和3.5.10逗号操作符。

     

    36 乘法、除法、求模、加法、减法操作符的规则。

     

    任务:看视频1js20150830, 看《javascript高级程序设计》第三版中文版第3章第50~53页3.5.8 关系操作符和3.5.7相等操作符。

     

    37 关系操作符和相等操作符的规则。

    任务:看视频1js20150830, 看《javascript高级程序设计》第三版中文版第3章第53~54页3.5.8 相等操作符、3.5.9赋值操作符和3.5.10逗号操作符。

     

    37 关系操作符和相等操作符的规则。

    38 相等、赋值、逗号操作符的语法形式

    任务:看视频2js20150830, 看《javascript高级程序设计》第三版中文版第3章第19~21页3.1 语法。

     

    39 写一个九九乘法表?什么是严格模式?

     

    40 尝试用加自定义属性、闭包、获取当前元素在兄弟元素中的索引等方式写选项卡,对比不同方法之间的性能差异?

    任务:看视频3js20150830

     

    任务:看视频4js20150830,看看《javascript高级程序设计》第三版中文版第1章1~9页

    41 Javascript由哪几部分组成?ECMAScript的简介?ECMAScript5的新特性以及浏览器支持情况?ECMAScript6的新特性以及浏览器支持情况?

    http://www.jianshu.com/p/b6d76160889d

     

    任务:看视频1js20150904,看看《javascript高级程序设计》第三版中文版第12章12.1.1访问元素的样式,第313~316页

    42 定义样式、获取样式、设置样式有哪些不同的方法,并列举具体的用法?

     

    任务:看视频2js20150904,看看《javascript高级程序设计》第三版中文版第4章73~78页

    43 什么是执行环境以及执行环境的类型?什么是作用域链,如何延长作用域链?声明变量时变量被添加到执行环境中的规则?在作用域链中查找标识符的过程?

     

    任务:看视频3js20150904,看看《javascript高级程序设计》第三版中文版第5章5.1Array类型第86~98页

    44 自执行函数有哪些写法?数组有哪些方法,写出数组方法的参数,数组方法的返回值,执行数组方法后数组的值是否发生改变?

     

    任务:看视频4js20150904,看看《javascript高级程序设计》第三版中文版第5章5.6.3 String类型第122~130页, 5.7.2 Math对象第134~137页,

     

    45 Math类的常用方法有哪些?如何获取[n,m]之间的随机数?字符串有哪些方法,写出字符串方法的参数,数组方法的返回值,执行字符串方法后字符串的值是否发生改变?

     

     

    任务:看视频1js20150905,看看《javascript高级程序设计》第三版中文版第10章10.1节点层次第147~173页,

     

    46 Node类型的节点关系和操作节点的方法?Document类型如何获取文档子节点和查找元素的方法?Element类型如何取得特性和设置特性,以及创建元素的方法?Text类型如何创建文本节点和规范化文本节点?Comment类型如何获取注释的内容?综合比较不同类型的nodeType,nodeName,nodeValue,parentNode,以及子节点。

     

     

    任务:看视频2js20150905,看看《javascript高级程序设计》第三版中文版第11章第11.1选择符API和第11.2节元素遍历第286~289页,

    46 DOM选择符API有哪些及其用法?如何进行元素便利?

     

    任务:看视频3js20150905,看看《javascript高级程序设计》第三版中文版第5章第5.3Date类型和第5.4节RegExp类型第98~109页,

    48 Date类型的常用属性和方法,比如如何获取年、月、日、时、分、秒?如何用语句和字符串拼接格式化日期?如何用正则格式化日期?

     

    任务:看视频4js20150905

    49 setTimeout()和setInterval()的区别?二者如何等价转换?如何清除定时器?写一个倒计时应用。

     

    任务:看视频1js20150908和2js20150908,复习面试题28(数据类型)答案、面试题44(数组)答案和面试题46(DOM)答案。

    50 完成js20150908文件夹下word文档《珠峰培训2015年javascript免费课上机测试题(加强版)》中的题目。

     

     

     

     

     

    任务:看视频3js20150908和4js20150908,再次复习面试题28(数据类型)答案和面试题44(数组)答案,看教材文件夹下的word文档《珠峰培训JS基础课教材》

    51 什么是预解释?window全局作用域下带var和不带var的变量有何区别?什么是作用域?函数执行的步骤?什么是私有变量?写出面试题50中第四大题(考察数据类型转换规则的填空题)和第九大题(360面试题)的分析步骤。

     

    第三大题复制数组少些了两种方法filter(function(){return true;}); 和map(function(){return arguments[0];});方法。

    第五大题去重方法算是最优,但是自定义排序方法采用了排序算法中效率最低也是最简单的冒泡排序算法并非最优。在计算时间复杂度时,理论上插入排序算法优于冒泡排序算法,而快速排序算法有又优于插入排序算法。故我列举了相对常见又高效的快速排序算法的具体是实现,排序算法很多,等学习数据结构与算法课程后再深入讨论。

     

    任务:看视频1js20150909和2js20150909,复习《面试题36 乘法、除法、求模、加法、减法操作符的规则》答案,看教材文件夹下的word文档《JavaScript变量定义预解释闭包专题教材_珠峰培训》

    52 什么是闭包?预解释的机制?在作用域链中查找私有变量的过程?如何判断上一级作用域是谁?作用域的销毁机制?利用属性和闭包等多种方法实现投票计数器,分析每种方法的优劣?

     

    快速排序,随便从数组中选择一个元素作为基准,将较小的元素放在基准左边,较大的放在基准右边。

     

    举个例子将数组ary=[3,2,1]按照从小到大排序

    先看第一轮最外层函数执行

    选择var p =ary[0]; 即3作为基准

    var left=[]

    数组中比3小的元素有1和2,则循环中按顺序执行left.push(2),left.push(1), 则left=[2,1].

    var right=[]

    数组中没有比3大的元素,所以right依然为 right=[]

    返回qSort(left).concat([p],qSort(right)).

    外层qSort()函数内部调用同名函数qSort,就是典型的递归。

    外层函数执行后第一轮排序,right=[] , qSort(right)就是qSort([]),我没必要对一个空数组进行快速排序,所结束函数,返回[].

    qSort(left).concat([p],qSort(right)).等价于qSort(left).concat([p],[])等价于qSort(left).concat([p])

    右侧数组为空,直接不用计算了。

    第二轮内部函数执行,qSort(left) ,由于left=[2,1], 所以qSort([2,1])

    ary=[2,1]

    选择var p =ary[0]; 即2作为基准

    var left=[]

    数组中比2小的元素有1,则循环中一次执行left.push(1), 则left=[1].

    var right=[]

    数组中没有比2大的元素,所以right依然为 right=[]

    返回qSort(left).concat([p],qSort(right)).

    等价于qSort([1]).concat([2],qSort([])).

    左侧只有一个元素,显然返回本身[1]与基准2数组拼接变成[1,2]。再与右侧数组[]拼接依然是[1,2]

    第二轮内部循环最终返回[1,2]

     

    即外层第一轮循环中qSort(left)–>qSort([2,1])—>返回{1,2]

    qSort(left).concat([p])—>[1,2].concat([3])—->返回[1,2,3]

    qSort(left).concat([p],qSort(right).)—>[1,2].concat([3],[])—->返回[1,2,3]

     

    原数组 [3, 2, 1]

    第一轮 执行 qSort([3,2,1])

    左侧 qSort([2,1]) 基准点[ 3] 右侧qSort([])

    返回 qSort([2,1])拼接[3]再拼接qSort([])

    右侧数组长度为0,qSort([])直接返回[]

    返回值等价于qSort([2,1])拼接[3]再拼接[]

    由于任何数组跟空数组[]拼接都为原数组本身

    返回值等价于qSort([2,1])拼接[3]

    第二轮 执行 qSort([2,1])

    右递归结束,只需要计算左递归。

    左侧[1] 基准点[2] 右侧[]

    返回 qSort([1])拼接[2]再拼接qSort([])

    返回值等价于[1,2]

    结果 将第二轮的返回值带入第一轮返回值

    qSort([2,1])拼接[3] 等价于[1,2]拼接[3] 结果为[1,2,3]

    最终完成排序返回结果[1,2,3]

    任务:看视频3js20150909和4js20150909,复习《面试题43 什么是作用域链,如何延长作用域链?》答案,看《javascript高级程序设计》第三版中文版第4章第78~82页4.3 垃圾收集。

    53 什么是this?如何区分this?什么是标记清除?什么是引用计数?总结基本数据类型和引用数据类型的特点?总结执行环境(作用域)?Js的垃圾收集机制?

     

    任务:看视频1js20150910和4js20150910

    54 完成20150909文件夹中的《正式课第一周测试题.doc》的第二大题(10道选择题)和第三大题(6道问答题)。选择题要写出分析步骤。

     

    任务:看视频3js20150910和4js20150910, ,看《javascript高级程序设计》第三版中文版第6章第138~144页6.1理解对象和6.2.1工厂模式

     

    55 写一个单例模式,说明其作用和弊端?写一个工厂模式说明其作用和弊端?面向对象的特性有哪些?什么是对象、类、实例?列举你所知道的内置类?

     

    任务:看视频1js20150912和2js20150912,

    看http://www.zhufengpeixun.cn/course/22/lesson/list 《前端开发VIP精品课程(2016)

    》课时1到课时5。

     

    56 《前端开发VIP精品课程(2016)

    》课时1到课时5,把其中的代码敲一遍(注释可以写可不写,也可以按照自己的语言组织要点)。

     

    任务:看视频3js20150912和4js20150912,

    看http://www.zhufengpeixun.cn/course/22/lesson/list 《前端开发VIP精品课程(2016)

    》课时6到课时10。

     

    57 《前端开发VIP精品课程(2016)

    》课时6到课时10,把其中的代码敲一遍。

     

    任务:看视频1js20150913和2js20150913, ,看《javascript高级程序设计》第三版中文版第6章第138~147页6.1理解对象和6.2.1工厂模式和6.2.2构造函数模式

     

    58 写一个惰性单例,对比简单单例模式有何优点?面向对象的特性有哪些,工厂模式利用了面向对象的哪些特写,js语言是否存在重载?举例说明构造函数模式的用法和书写规范,构造函数模式和工厂模式有何区别,调用构造函数经历哪些步骤,以及构造函数模式的优缺点?

     

     

     

    任务:看视频3js20150913和4js20150913, ,看《javascript高级程序设计》第三版中文版第6章第147~158页6.2.3原型模式和第162~167页6.3.1原型链和第169~171页6.3.4原型式继承

     

    59 typeof 和instanceof方法的应用场景?In 和 hasOwnProperty的用途?写一个方法用来检测某一个属性attr是否为obj这个对象的公有属性?prototype、constructor、__proto__分别是谁的属性?如何批量在原型上设置属性?如何实现基于原型的继承?基于原型获取和设置私有或公有属性的规则?什么是js的重写,与重载有何不同?

     

    任务:看http://www.zhufengpeixun.cn/course/22/lesson/list 《前端开发VIP精品课程(2016)

    》课时11到课时19。

     

    60 举例说明常用的六种继承方法?《前端开发VIP精品课程(2016)

    》课时11到课时19,把其中的代码敲一遍。

     

    任务:再看一遍《课时18 深入扩展-原型链模式(常用的六种继承方式)》http://www.zhufengpeixun.cn/course/22/learn#lesson/600,看《javascript高级程序设计》第三版中文版第6章面向对象的程序设计第138~175页。

    61 什么是可枚举性?Object.create() 的用法?总结书中六种继承方式的原理及优缺点?

     

    任务:看视频1js20150915和2js20150915, 复习面试题59答案

    62 如何批量在自定义类的原型上设置属性和方法?同时获取公有属性和私有属性的方法、只获取私有属性的方法、只获取公有属性的方法?内置类原型上的属性和方法能否被修改,如何基于原有的内置类增加方法?对象如何调动内置类的自带方法?画一个原型链继承图(包含Object和Function原型之间的关系)?通过”构造函数名.prototype.属性名”、在构造函数体内部通过”this.属性名”、通过”实例.属性名”或者”var 实例={属性名:属性值}”三种方式分别添加的属性是公有属性还是私有属性,谁可以访问?

     

    关于可枚举行,哪些方法可以获取原型上的属性?哪些方法可以获取不可枚举属性?再看一下。

    关于Object.create(arg1,arg2);第一个参数能否省略,表示什么,可以传递什么数据类型?第二个参能否省略,表示什么,可以传递什么数据类型?再看一下。

     

    《Javascript高级程序设计第3版》和珠峰培训中的六种继承方式对比分析

    1 共同点:都有4中继承方式

    1.1 原型链继承

    1.2 借用构造函数继承(call继承或apply继承)

    《Javascript高级程序设计第3版》叫做借用构造函数。

    珠峰培训叫做call继承,实际上与借用构造是同一种继承方法。

    1.3 组合继承(混合继承)

    《Javascript高级程序设计第3版》叫做组合函数。

    珠峰培训叫做混合继承,实际上与组合继承是同一种继承方法。

    但是珠峰培训的”混合继承 原型+call”这句话错误,组合继承是”原型链+call”继承的组合,而不是”原型+call”继承的组合。

    原型链继承和原型继承是两种完全不同的继承方式,由于珠峰培训只讲过原型链继承却没有讲过原型继承,不知道一字之差造成的巨大区别。

    1.4 寄生组合式继承方法。

    2 Javascript高级程序设计第3版》讲到,但珠峰培训没有讲到的2中继承方式

    2.1 原型继承

    2.2 寄生式继承

    3 珠峰培训讲到,但Javascript高级程序设计第3版》没有提过的两种继承

    3.1 冒充对象继承

    所谓的冒充对象继承,其实是借用构造函数继承(call继承或apply继承)的兼容写法,冒充对象继承和构造函数继承的原理及优缺点一样。

    现在所有浏览器(只要IE5以上版本)都内置call或apply方法,因此完全可以用借用构造函数继承(call继承或apply继承)取代冒充对象继承。

    3.2 中间件继承(周氏继承)

    所谓的中间件继承,官方以及历史中根本没有这种继承方法,而是周啸天自己起的名字。

    中间件继承只有IE11版本浏览器才支持,这意味着使用此方法后导致大部分IE用户都会抛出异常,兼容性太差不能用,除非所有人都不用IE了。

    中间件继承可以完全用原型链继承取代,因为优点跟原型链继承相同,缺点却比原型链继承多。

    4 总结

    4.1 最常用的继承方法时组合继承

    4.2 最完美的继承方法是寄生组合继承

    4.3 六种继承方式以Javascript高级程序设计第3版》为准,珠峰培训的有些继承方法叫法不官方或者过时或者兼容性太差,仅作为拓展

     

    任务:看视频3js20150915和4js20150915

    63 call和apply的作用、call和apply的区别、二者在严格模式和非严格模式下的语法区别?写一个获取最大值得方法,采用尽可能多的方法?实现同功能的 call或apply方法,叫做myCall或myApply,当调用myCall或myApply方法时,可以实现与call或apply方法同样的效果(比如传入第一个参数可以修改this指向,第二个参数开始被当做普通参数传入方法)?

     

     

    任务:看视频1js20150916和2js20150916

    64 图解20150916目录下的《原型练习.html》?写一个求平均值方法?自定义方法mySlice实现数组元素slice的功能?

     

    任务:看视频3js20150916和4js20150916

    65 实现表格排序?通过appendChild方法在父元素的末尾追加页面已经存在(比如通过getElemenByXXX[index]获取的元素)的元素时实现元素的复制还是移动,页面中元素总数是否发生改变?通过appendChild方法在父元素的末尾追加页面不存在(比如通过creatElement新创建的元素)的元素时实现元素的复制还是移动,页面中元素总数是否发生改变?实现按对象的某个属性排序或实现按多维数组的某一维度排序?实现按汉字排序?String类的内置方法localeCompare的用法?

     

    任务:看视频1js20150917和2js20150917,看看《javascript高级程序设计》第三版中文版第20章JSON第562~570页,

     

    66 JSON语法可以表示哪几种类型的值?JSON表示简单值与Javascript简单值的区别?

    JSON对象与Javascript字面量的区别?JSON如何表示数组?JSON的意义?JSON.stringty()的作用和语法?JSON.parse()的作用和语法?把数据绑定到HTML页面中有几种方式,各自的优缺点?document.createDocumentFragment()方法的作用和语法?前后端处理大数据的流程?

     

     

    任务:看视频3js20150917和4js20150917

    67 写一个复杂表格排序方法,当点击每行表头时,可以来回切换按升序或降序排列?

     

    任务:看视频1js20150919和2js20150919,

    看http://www.zhufengpeixun.cn/course/22/lesson/list 《前端开发VIP精品课程(2016)

    》课时20到课时25。

     

    68 《前端开发VIP精品课程(2016)

    》课时20到课时25,把其中的代码敲一遍并总结。函数的三种角色?Call、apply和bind的区别。

     

    任务:看视频3js20150919和4js20150919,

    看http://www.zhufengpeixun.cn/course/22/lesson/list 《前端开发VIP精品课程(2016)

    》课时26到课时30。

     

    69 《前端开发VIP精品课程(2016)

    》课时26到课时30,把其中的代码敲一遍并总结。

     

    任务:看视频1js20150920和2js20150920

    70 完成20150920目录下的《珠峰培训第二周作业》,总结学过的检测数据类型方法(要能够检测引用数据类型的细分)

     

    任务:看视频3js20150920和4js20150920,看教材目录下《JavaScript字符串方法 .doc》和《珠峰培训_正则深度教材_150608版.doc

    71 字面量和实例创建正则有何区别?正则修饰符有哪些及其含义?正则元字符有哪些及其含义?正则原型上的方法有哪些及其用法?字符串原型上与正则有关的方法有哪些及其用法?捕获和分组捕获,以及捕获时候的贪婪性和懒惰性的解决办法?

    任务:任务:下载网盘 《珠峰培训/第二周2 正则表达式》 目录,并看完目录下的视频。看《javascript高级程序设计》第三版中文版5章103~109页第5.4节 RegExp类型。

     

     

    76 正则的 3个标志(修饰符)的用法及举例? RegExp实例属性用法及举例,通过每次执行exec方法,观察lastIndex值得变化规律?RegExp构造函数属性,及$n的用法举例?分组引用\n的用法及举例,str=”11113555554999922222255555″去掉重复数字?

     

    任务:看视频1js20150920和2js20150920

    77 写出所有的量词元字符、特殊元字符、普通元字符?总结问号的作用?具有特殊意义的元字符?[]需要注意的细节知识点?分组的三个作用?

    完成下列正则:

    1 邮编

    2 手机号或 固话

    3 身份证号

    4 时间

    5 求一个字符串中出现次数最多的字符?

    6 把一个字符串中所有单词的首字母大写。

    7 将小写的中文数字替换成大写的中文数字

    8 模拟模板引擎的实现

    9 通过网址获取queryURLParameter

    var str = “http://www.caoxiaohan.com/index.htm?name=cxh&id=2004001”;

    把URL中的参数都获取到,并且保存成如下格式:

    var obj = [name: “cxh”, uid: “20140001”};

     

    78 面试题

    一、完善面试题77中的正则练习题1

    1 邮编

    邮箱规则,邮箱的@之后的后缀其实是由网址域名演变而来的

            //1.1 @之前的邮箱用户名,以qq邮箱为例,要么是全数字4-11位首字母不能为0。要么首字符是字母,最后一位字符是字母或数字。只能包含数字、字母、下划线,中横线、点,长度为3-18位。

            //1.2 最后两位为国别域名可有可无,如.cn表示中国,.us表示美国。 用?表示0到1次。

            //1.3 国别名之前是域名后缀,如.com,.company. 目前可注册的域名后缀有2-7位字母,2-3位汉子。邮箱后缀只能为字母。

    //1.4 域名后缀比如.com之前是域名qq

    //英文际域名域名英文字母阿拉伯数字及杠”-”组达67字符(包括缀)并且字母大小写没区别,每层不能超22字母内,国内域名三级域名度不超20字。”-“只能出现在中间。域名最短为1位数字或字母。

    2 手机号或固话

    //2.1 手机号,11位数字,首位是1,第2位目前支持3、4、5、7、8

    //2.2 固话,3-4位区号,7-8位直播号码,1-4位分机号,直播号码首位不能为0和1

    3 身份证号

    /*
     *
    身份证15位编码规则:dddddd yymmdd xx p
     * dddddd
    6位地区编码
     * yymmdd:
    出生年(两位年)月日,如:910215
     * xx:
    顺序编码,系统产生,无法确定
     * p:
    性别,奇数为男,偶数为女
     * 
     *
    身份证18位编码规则:dddddd yyyymmdd xxx y
     * dddddd
    6位地区编码
     * yyyymmdd:
    出生年(四位年)月日,如:19910215
     * xxx
    :顺序编码,系统产生,无法确定,奇数为男,偶数为女
     * y:
    校验码,该位数值可通过前17位计算获得

    */

     

    4 时间

    使用replace方法

    “2015-9-22 13:10:0” –> “2015年09月22日 13时10分00秒”

    5 将每个单词的首字母转换成大写,非首字母转换成小写。

     

    二 、正则补充练习题2

    1 匹配数字,可以是正负数、整数、小数

    2 匹配HTML标记,比如<br/>或者<div>abc</div>

    3 匹配网址URI,比如http://www.caoxiaohan.com

    4 匹配QQ号码

    5 匹配中国邮编

    6 匹配IP地址,比如192.168.0.1

    7 匹配MAC地址

    8 匹配一年的12个月

    9 匹配一个月的28~31天

     

    三、Freecodecamp练习题3

    要求在freecodecamp.cn网页上验证通过

    1 https://freecodecamp.cn/challenges/caesars-cipher

    2 https://freecodecamp.cn/challenges/search-and-replace

    3 https://freecodecamp.cn/challenges/pig-latin

    4 https://freecodecamp.cn/challenges/spinal-tap-case

    5 https://freecodecamp.cn/challenges/validate-us-telephone-numbers

     

    79 图解盒模型的常用属性?标准浏览器获取样式的方法及其用法?IE浏览器获取样式的方法及其用法?写一个兼容各种浏览器的获取样式的方法?图解盒模型偏移量?如何判断浏览器类型和版本?写一个兼容各种浏览器的计算盒模型偏移量的方法?

     

    任务:看视频1js20150923和2js20150923

    80 写一个工具类包一些共用方法(网页属性的兼容性、类数组转换成数字、字符串转换成JSON格式、获取样式的兼容写法、获取offsetLeft/offsetTop的兼容写法)?图解scroll相关属性?scrollWidth/scrollHeight 可读写吗,scrollTop/scrollLeft可读写吗及其取值范围?写一个滚动事件ele.onScroll=function(){console.log(ele.scrollTop);},轻轻滑动最小一步滚动条对应的方法执行几次,scrollTop/scrollLeft的变化频率及规律?写一个回到顶部效果示例?写一个进入可视区域零界点时切换文字效果(DIV原来不在可视区域,当向下滑动滚动条使DIV的的底部边框与可视窗口底部重合时,DIV中原来的文字变成其他文字的效果)?

     

    任务:看视频3js20150923和4js20150923

    81 仔细看视频4js20150923第1小时:04分,在老师写的代码《6、仅供参考.html》在IE7浏览器中演示时部分图片无法加载,老师始终没有修复这个bug,自己写一个延迟加载程序兼容IE6-8使得所有图片正常显示。

     

    任务:看视频1js20150926和2js20150926

    82 总结元素常用样式的默认值?处理获得样式对象的兼容性的几种写法?如何判断不存在的属性或变量?伪元素的用法举例?默认情况下所有的元素的offsetParent是什么,offsetParent和parentNode之间有什么关系,什么情况下offsetParent会改变不再是body?写一个兼容所有浏览器的计算元素上边框到浏览器最顶部或最左侧的offset方法?

     

    任务:看视频3js20150926和4js20150926

    83 总结ele.style,getComputedStyle(ele,null),ele.currentStyle的作用和区别?offsetWIdth/offsetHeight/offsetLeft/offsetTop/offsetParent, clientWidth/clientHeight/clientLeft/clientTop,scrollWidth/scrollHeight/scrollLeft/scrollTop之间的关系,他们是元素的属性还是样式style的属性,应该出现在console.dir(ele)列表中还是应该出现在console.dir(getComputedStyle(ele)列表中?如何判断滚动到达底部,循环滚动文字的原理?如何判断图片刚好完全显示,临时占位图片刚好完全显示时替换成真实图片的原理?不同的浏览器如何设置透明度?图片延迟加载的原理?修复《7多张张图片加载–加闭包的.html》中的bug,使得滚动页面时已经开始加载但还未加载完的图片不再重复加载?

     

    任务:看视频1js20150927和2js20150927,复习《面试题46答案》和《面试题47答案》

    84 总结DOM的兼容性问题?获得某一个元素的所有兄弟节点(返回数组)?获得某一元素的所有哥哥节点(返回的是一个数组)?获得某一元素的所有弟弟节点(返回数组)?获得某一元素唯一的哥哥节点(返回一个DOM元素)?/获得某一元素唯一的弟弟节点(返回一个DOM元素)?获得某一元素相邻的哥哥和弟弟(最多是两个,返回的数组)?获取当前元素在兄弟元素中的索引的方法?

     

    任务:看视频3js20150927和4js20150927。把《面试题兼容性问题1》中的例子在不同浏览器下验证一遍。

    85 按照《面试题84答案》的示范补充举例DOM的兼容性问题?获得一个元素所有子元素的方法(返回数组)?通过类名获取元素的方法(返回数组)?给元素添加类的方法(?给元素删除类的方法?判断元素是否有某个类(返回布尔值)?在某个元素之后插入一个元素?在第一元素的的第一个子节点处插入元素?利用兼容的添加类、删除类、获取索引方法实现选项卡?

     

    任务:看视频http://www.zhufengpeixun.cn/course/22 第三章第1节:盒子模型和盒子偏移量课时48-课时55.

    86 跟着视频练习一遍自己总结?写一个跑马灯效果?举例说明同步编程和异步编程的不同?完成《第一周考试题.zip,第二大题求运行结果要给出分析过程?

     

    任务:看视频http://www.zhufengpeixun.cn/course/22 第三章第2节:盒子模型和盒子偏移量课时56-课时58.

    87 跟着视频练习一遍自己总结?完成《珠峰培训第二周作业.doc》?完成《第二周考试题.png》?

    任务:再看一遍《20151026github入门》,看《1js20151027》。熟悉github网站上的操作。

    89 注册一个github账号,在自己的电脑上安装git?什么是版本控制系统?Git是集中式还是分布式,二者的区别?Git的基本工作流?如何创建版本库,如何初始化目录?如何添加文件?如何提交文件?Git包含那三个区域,如何查看状态?都学会了哪些命令,每个命令的作用?

     

    任务:看《20151027git详细讲解.mp4/3js201510274js20151027.mp4》。看http://school.zhufengpeixun.cn/course/31连接下的
    《第三章历史穿越和
    第四章分支管理
    》,第三章和第四章的命令需要全部亲自尝试并把git命令行操作和文件变化电脑截图下来成为word实验报告。

     

    90 如何 比较版本差异和查看版本库状态?如何进行版本库回退到指定版本?如何查看工作区和版本库里面最新版本的区别?如何撤销工作区中的修改,如何撤销暂存区的修改,如何撤销历史区的修改?如何删除文件?Git中分支的作用?如何创建和合并分支?如何解决冲突?分支合并时Fast forward模式和普通模式的区别,如何开启普通模式?如何“储藏”当前工作现场

     

    任务:看”我的网盘–> 珠峰培训 –> github教程”目录下的《git实用开发指南》课时6~课时9。看http://school.zhufengpeixun.cn/course/31连接下的
    《第七章自定义git
    第八章深入原理》,第七章和第八章的命令需要全部亲自尝试并把git命令行操作和文件变化电脑截图下来成为word实验报告。把《面试题91答案》step开头的每步执行一遍,重现截图中的代码

     

    92 git 配置的三种级别,三种查看帮助的方式,git配置的增删该查?如何自定义git?如何忽略特殊文件?如何配置别名?git最佳实践?git原理分析, 执行git init后自动生成的.git文件夹中的子文件夹及子文件的含义?创建一个github个人博客?

     

    任务:看”我的网盘–> 珠峰培训 –> github教程”目录下的《序-git&github日常管理》和《使用GitHub发布项目》,要求命令行操作和文件变化电脑截图下来成为word实验报告。。把《面试题92答案》step开头的每步执行一遍,重现截图中的代码.

     

    93 如何更新代码到远程仓库?多注册几个github账号列出小号的github地址?用多个github账号模拟分组提交作业?如何添加别人为自己的项目成员,项目组成员有哪些操作仓库的权限?作为非项目组成员如何修改别人远程仓库的代码,并贡献自己的修改发起采纳请求?如何用github发布一个网站项目,要求网站有动态交互效果?

     

    任务:再看一遍《20151026github入门》,看《1js20151027》。熟悉github网站上的操作。

    94 总结github网站上每个常用按钮的用法,尽可能多地尝试?

    任务:看视频1js201509292js20150929

    95 整理之前学过的DOM.jsutils.js,延迟加载动画,选项卡发布到github上。要有注释说明,README.md文件要说明发布内容的明细?如何用webstorm来管理github.md文件支持的markdown常用语法规则?

     

    任务:看视频3js201509294js20150929,

    96 改进《2、动画.html》,要求点向右走时走到浏览器屏右边界时停下来?首先简化《3、自动反弹.html》中的方法,然后把左右方向反弹改为上下反弹,最后setTimeout方法换成setInterval方法?给《4、弹出层》加上打开按钮和关闭按钮,在原始层点击打开按钮打开弹出层,在弹出层点关闭按钮关闭弹出层回到原始层?

    任务:看视频1js201510014js20151002

    97 实现不同方向运动的动画?实现平面几何形状变形动画?实现物体透明度变化的动画?参考https://daneden.github.io/animate.css/页面,将针对同一个物体的多个动画放在下拉列表中以供选择,点确定按钮可以在线观看不同的动画效果?参考https://caoxiaohan.github.io/animate/页面,把之前的针对不同物体的多个动画页面推送到同一个仓库中,并可以通过网页观看效果?

评论列表
文章目录