知识点css和JavaScript

CSS知识点

1  选择器的优先级

(1)最高优先级是 (直接在标签中的设置样式,假设级别为1000)

(2)次优先级是(ID选择器 ,假设级别为100)  #myDiv{color:Red;}

(3)其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

(4)最后优先级是 (标签选择器,假设级别是 1)  div{color:Red;}

(5)那么后代选择器的优先级就可以计算了啊

比如 .divClass  span { color:Red;}  优先级别就是:10+1=11

2 盒子模型

标准盒子模型 = margin + border + padding + content (content =  width | height)

IE盒子模型 = margin + content (content = border + padding + width | height)

3 浏览器

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性IE使用的是Trident内核,Firefox 使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗,遨游,360等等。

4 编码

(1)GBK通常指GB2312编码 只支持简体中文字

(2)utf通常指UTF-8,支持简体中文字、繁体中文字、英文、日文、韩文等语言(支持文字更广)

(3)通常国内使用utf-8和gb2312,看自己需求选择

5 Bootstrap框架的网格系统工作原理如下:

(1)数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。

(2)在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。

(3)具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

(4)通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

6 H5新增标签:

article: 标签定义外部的内容。

aside:标签定义 article 以外的内容。

audio:h5新增音频标签。没有高宽属性。

canvas:h5新增画布标签。

command: 定义命令按钮(未测试)

datalist:标签定义选项列表。 datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。 details:标签用于描述文档或文档某个部分的细节。

figure:标签用于对元素进行组合。

figcaption:定义 figure 元素的标题。

footer:定义 section 或 document 的页脚。

header:定义 section 或 document 的页眉。

hgroup:用于对网页或区段(section)的标题进行组合。

keygen:标签规定用于表单的密钥对生成器字段

mark:标签定义带有记号的文本。

meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。

nav:定义document或section或article的导航。

output:定义不同的输出类型,比如脚本。 progress:定义任何类型的任务的进度。

rp:定义若浏览器不支持 ruby 元素显示的内容

rt:定义 ruby 注释的解释

ruby:定义 ruby 注释

section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。 source:audio和video的属性之一。为audio和video定义媒介源。

summary:为details定义标题。 time:定义日期或时间。

video:h5新增视频标签。具有高宽属性。

7 在样式表定义一个样式的时候,可以定义id也可以定义class。

(1)在CSS文件里书写时,ID加前缀"#";CLASS用"."

(2)id一个页面只可以使用一次;class可以多次引用。

(3)ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;

(4)从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

8 CSS的flexbox布局

Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex  containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。

9 浏览器的内核引擎,基本上是四分天下:

1)Trident: IE 以Trident 作为内核引擎;

2) Gecko: Firefox 是基于 Gecko 开发;

3) WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;

4) Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini

注:2013年2月Opera宣布转向WebKit引擎

注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

10 垂直居中对齐的标签定义是:<vertical-align:center>

11 Web Storage分类

Web Storage实际上由两部分组成:sessionStorage与localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

12 盒子模型的顺序

由内到位依次是content、padding、border、margin

13 ,设置一般用 set 开头, 获取采用 get 开头;

对于键值的话,一般都是 (key, value)的形式;

14 btn标签说法

btn-group该class用于形成基本的按钮组;

.btn-toolbar该 class 有助于把几组结合到一个中,一般获得更复杂的组件。

btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。

15 <label>标签用法input 元素定义标注

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

16 css的继承与不继承分类

不可继承的:

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。

17 bootstrap辅助类

.text-muted:文字的颜色换成灰色

/.text-primary:文字的颜色变成蓝色

/ .text-success:文字的颜色变成绿色

/.text-info:文字的颜色变成暗蓝色

/.text-warning:文字颜色变成暗黄色

/.text-danger:文字的颜色变成红色

18 html结构

<head>标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在 head 部分:<base>,<link>,<meta>,<script>,<style>,<title>,, 以及。

<title>定义文档的标题,它是 head 部分中唯一必需的元素。

19 超链接的访问过程

为了符合浏览器解析CSS所遵循的就近原则,将一般的放在上面,将特殊的放在下面。

a:link; a:visited; a:hover; a:active;

a:hover必须放在a:link和a:visited之后;

a:active必须放在a:hover之后。

a:link是未访问的链接;a:visited是已访问的链接;a:hover是鼠标悬停在链接上;a:active是被选择的链接

执行顺序是从上向下

20 margin-top、padding-top的值是百分比时,分别是如何计算

可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)

如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式,使其元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。

为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢?

CSS权威指南中的解释:

我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距时父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如果循环。

21  cookies作用

cookies一般是用于自动登录呀(如淘宝,京东一些可以勾选自动登录),这就相当于进行从登录页到主页的跳转了,页面之间传递着用户的信息,以键值对的方式存储着用户的信息,当然登录跳转也用到了其他以键值对存储的信息,如session(服务端保持,一些需要登录以后才可以访问的就需要session校验,如果是大项目开发的话会用到过滤器) cookies主要用于客户端保持,当然了,cookies怎么可能对数据库进行操作呢,cookies是保存在客户端的。

22 Doctype不存在或错误,浏览器默认混杂模式

23 HTML文档中的图像格式

常用的页面的图片格式有三种,GIF、JPG、PNG。GIF 意为Graphics Interchange format(图形交换格式);JPEG 代表Joint Photograhic Experts Group(联合图像专家组),这种格式经常写成JPG,JPG图片的扩展名为jpg;流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。

标签图像文件格式Tagged Image File Format,简写为TIFF)是一种灵活的位图格式,主要用来存储包括照片和艺术图在内的图像。TIFF文件格式适用于在应用程序之间和计算机平台之间的交换文件,它的出现使得图像数据交换变得简单。TIFF文件以.tif为扩展名。其数据格式是一种3级体系结构,从高到低依次为:文件头、一个或多个称为IFD的包含标记指针的目录和数据。

定义文档的标题,它是 head 部分中唯一必需的元素。

24 使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值

cellpadding 属性规定单元边沿与其内容之间的空白。

注释:请勿将该属性与cellspacing 属性相混淆,cellspacing 属性规定的是单元之间的空间。

从实用角度出发,最好不要规定 cellpadding,而是使用 CSS 来添加内边距

25 通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。

26 white-space 属性设置如何处理元素内的空白。

27 submit 和onsubmit 函数

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

onsubmit只是一种绑定事件的方式,如果不用这种事件绑定方式,比如addEventListener,eventType应该是submit而不是onsubmit。

onsubmit 事件会在表单中的确认按钮被点击时发生。

语法 onsubmit="SomeJavaScriptCode"

28 Bootstrap 栅格系统

(1)第一步:创建栅格系统的容器


解释:为了寄予栅格系统合适的排列和padding,要把每一行“row”包含在一个容器中,而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的

.container是固定宽度,居中显示:下面是Bootstrap中.container类的代码

.container-fluid是 100% 宽度:下面是Bootstrap中.container-fluid类的代码

(2)第二步:创建合适的栅格系统

解释:上面这段是我从Bootstrap官网复制下来的,每一个“row”代表一行,而内部的“col-md-数字”代表一个单元格;

Bootstrap把每一行分成12等份,“col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;

合理的选择单元格的数字配置,再往单元格中添加我们想要的内容,这样一个栅格系统就完成了!

(3)进阶:单元格的类还有其他选择,一共有四种:

.c0l-xs-  无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机;

.col-sm-  屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板;

.col-md-  屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器;

.col-lg-  屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;

以上的情况可以通过下面的代码清晰的理解:

屏幕大于992px时:.col-md-8 和.col-md-4 还处于 作用范围内,如下

屏幕在769px-992px之间时:.col-md-已失效,而.col-sm- 还处在 作用范围内,如下

屏幕宽度小于768px时,.col-sm-已失效  只有.col-xs- 不受屏幕宽度影响,这时候就由.col-xs-起作用,如下

29 bootstrap的表格属性

30 CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。

2.优点

(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

(2)CSS Sprites能减少图片的字节;

(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。

(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。

(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。

(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。

(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。

31 Canvas 对象的方法

1.html5中没有getContent()和getCanvas方法

2.调用canvas对象的getContext()方法来获取绘图环境

31 border-style:none和border-width:0的比较

1.效果

border-style:none;//无边框

border-width:0;//边框宽度为0px

2.区别

(1)性能差异

border:0;浏览器对border-width、border-color进行渲染,占用内存。

border:none;浏览器不进行渲染,不占用内存。

Chrome:

border:none;>> border:initial none initial;

border:0;>> border:0 initial  initial ;

Firefox、360:

border:none; >>border:medium none;

border:0;>> border:0 none;

计算出的样式:

border:0px none 元素color属性值;

(2)浏览器兼容

IE7-不支持border:none;

W3C提示:请始终把border-style属性声明到border-color属性之前,元素必须在改变颜色之前获得边框。

32 getCurrentPosition()获取用户当前位置放入一个值中保存,getLocation()地图定位

33 浏览器引擎

浏览器解析渲染页面原理

浏览器 最重要 最核心的部分是“解释引擎”,也就是“浏览器内核”: 负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。

网页的工作过程需要使用到两个引擎:渲染引擎和javascript引擎

什么是JavaScript引擎?简单来讲,就是能够提供执行JavaScript代码的运行环境

所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,排版引擎(Rendering Engine,也有称渲染引擎),渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核很多,如果加上所有的几乎没有什么人在用的非商业的免费内核,那么可能大约有10款以上甚至更多,不过通常我们比较常见的大约只有以下四种:

- Trident :[ˈtraɪdnt]

IE浏览器(遨游、世界之窗、腾讯TT…都是IE)Trident内核最慢

IE 以Trident 作为内核引擎 ,前缀为–ms。

- Gecko:[ˈgekəʊ]

- 开放源代码、以C++编写的网页排版引擎,是跨平台的

FireFox是基于 Gecko 开发;

-presto:[ˈprestəʊ]

目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎,Opera(欧朋浏览器),但由于市场选择问题,主要应用在手机平台–Opera mini

- Webkit:

苹果公司自己的内核,google的chrome也使用webkit作为内核。

是一个开源的浏览器引擎,同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,它拥有清晰的源码结构、极快的渲染速度,包含的 WebCore 排版引擎和 JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来。

许多网站都是按照IE来架设的,很多网站不兼容Webkit内核,比如登录界面、网银等网页均不可使用Webkit内核的浏览器。

Safari([səˈfɑri]), Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器 基于 Webkit 开发。

注:2013年2月Opera宣布转向WebKit引擎

注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

34 innerHTML 属性

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

Javascript知识点

1 call函数和apply函数

作用

在特定的作用域总调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。

window.color="red";

var o={color:"blue"};

function getColor(){

console.log(this.color);

}

getColor.call(this);

getColor.call(window);

getColor.call(o);

2.call()和apply()区别

接收参数的方式不同:

对于call(),第一个参数是运行函数的作用域,其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。

对于apply(),第一个参数是运行函数的作用域,另一个参数是参数数组,可以是Array实例或arguments对象。

function sum(num1,num2){

return num1+num2;

}

function callSum(num1,num2){

return sum.call(this,num1,num2);

}

function callSum(num1,num2){

return sum.apply(this,arguments);

}

function callSum(num1,num2){

return sum.apply(this,[num1,num2]);

}

2  js对象是否是Array,arr为要判断的对象

3 angularjs1中的服务实质上是

单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

单例模式的要点有三个;一是某个类只能有一个实例;二是它必须自行创建这个实例;三是它必须自行向整个系统提供这个实例。

angularjs的服务是一个单例对象或函数,对外提供特定的功能。

4 原生的js的禁用

①disabled和readOnly都是表单的公有属性,readOnly是只读,disabled是禁用。这里问的是禁用,所以是disabled。

②还有就是题目中的readOnly写成了readolny

③小知识点:setArrtibute在ie7以前是不能通过style和class设置属性的

5 JavaScript的prototype属性

prototype 属性使您有能力向对象添加属性和方法。

6 标准的JavaScript中,Ajax异步执行调用基于下面哪一个机制才能实现

(1)Event和callback

(2)多线程操作

(3)Deferral和promise

7 文本框事件的属性

click是点击时触发的方法;

change是改变文本框的内容时触发的方法

select是选中时触发的方法

bind是被选元素(class或id)添加一个或多个事件处理程序,并规定事件发生时运行的函数。

8 变量

javascript 一般使用var key = val;的形式复制,声明变量的时候也要用var key; 如果不用var关键字,声明的就是全局变量,一般不要这么做;

变量重复声明也不会错,js里有声明提前,如果两次声明都有赋值,如:var a=10; var a=100; 则变量a的值是100; 若var a=10; var a; 则变量a的值是10;第二次的var a;没什么用。

9 可以用作javascript异步模式的编程

回调函数、事件监听、发布/订阅、Promises对象

10 instanceof 运算符简介

instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

通常来讲,使用 instanceof 就是判断一个实例是否属于某种类型。

// 判断 foo 是否是 Foo 类的实例

function Foo(){}

var foo = new Foo();

console.log(foo instanceof Foo) //true

另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例

function Aoo(){}

function Foo(){}

Foo.prototype = new Aoo();//JavaScript 原型继承

var foo = new Foo();

console.log(foo instanceof Foo)//true

console.log(foo instanceof Aoo)//true

11 number 类

console.log(Number(""));//0

console.log(Number(null));//0

console.log(Number(undefined));//NaN

console.log(parseInt(""));//NaN

console.log(parseInt(null));//NaN

console.log(parseInt(undefined));//NaN

console.log(null== 0);//false

console.log(undefined == 0);//false

12 数组的返回类型

push返回数组的新的长度

reverse、sort返回数组本身

concat返回被连接数组的一个副本

13 Angular 提供了3种方法来创建并注册我们自己的 service。

Factory Service Provider

14 浏览器中使用js跨域获取数据的描述

1.CORS

CORS(Corss-Origin Resource Sharing,跨资源共享),基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部决定是否给予响应。

2.document.domain

将页面的document.domain设置为相同的值,页面间可以互相访问对方的JavaScript对象。

注意:

不能将值设置为URL中不包含的域;

松散的域名不能再设置为紧绷的域名。

3.图像Ping

var img=new Image();

img.onload=img.onerror=function(){

... ...

}

img.src="url?name=value";

请求数据通过查询字符串的形式发送,响应可以是任意内容,通常是像素图或204响应。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点:

只能发送GET请求;

无法访问服务器的响应文本,只能用于浏览器与服务器间的单向通信。

4. Jsonp

var script=document.createElement("script");

script.src="url?callback=handleResponse";

document.body.insertBefore(script,document.body.firstChild);

JSONP由两部分组成:回调函数和数据

回调函数是接收到响应时应该在页面中调用的函数,其名字一般在请求中指定。

数据是传入回调函数中的JSON数据。

优点:

能够直接访问响应文本,可用于浏览器与服务器间的双向通信。

缺点:

JSONP从其他域中加载代码执行,其他域可能不安全;

难以确定JSONP请求是否失败。

5.Comet

Comet可实现服务器向浏览器推送数据。

Comet是实现方式:长轮询和流

短轮询即浏览器定时向服务器发送请求,看有没有数据更新。

长轮询即浏览器向服务器发送一个请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据后,浏览器关闭连接,随即又向服务器发起一个新请求。其优点是所有浏览器都支持,使用XHR对象和setTimeout()即可实现。

流即浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据,页面的整个生命周期内只使用一个HTTP连接。

6.WebSocket

WebSocket可在一个单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议,未加密的连接时ws://;加密的链接是wss://。

var webSocket=new WebSocket("ws://");

webSocket.send(message);

webSocket.onmessage=function(event){

var data=event.data;

... ....

}

注意:

必须给WebSocket构造函数传入绝对URL;

WebSocket可以打开任何站点的连接,是否会与某个域中的页面通信,完全取决于服务器;

WebSocket只能发送纯文本数据,对于复杂的数据结构,在发送之前必须进行序列化JSON.stringify(message))。

优点:

在客户端和服务器之间发送非常少的数据,减少字节开销。

15 AngularJS1中页面中用于数据绑定的占位符是{{ }}

16 JavaScript 中包含以下全局函数

17 Angular关于服务的说法

Angular大大减少了对DOM的访问。

jQuery极大的丰富了DOM操作

依赖注入(Dependency Injection),是这样一个过程:由于某客户类只依赖于服务类的一个接口,而不依赖于具体服务类,所以客户类只定义一个注入点。在程序运行过程中,客户类不直接实例化具体服务类实例,而是客户类的运行上下文环境或专门组件负责实例化服务类,然后将其注入到客户类中,保证客户类的正常运行。

angular 指令的link函数中进行dom操作和事件绑定,服务主要是封装与后台交互的数据接口提供复用性。

18 下列不属于javascript内置对象的是

Arguments 函数参数集合、Array 数组、Boolean 布尔对象、Date 日期时间、Error 异常对象、Function 函数构造器、Math 数学对象、Number 数值对象、Object 基础对象、RegExp 正则表达式对象、String 字符串对象

19 说一说常见的请求头和相应头都有什么呢?

1)请求(客户端->服务端[request])

GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)

Accept: */*(客户端能接收的资源类型)

Accept-Language: en-us(客户端接收的语言类型)

Connection: Keep-Alive(维护客户端和服务端的连接关系)

Host: localhost:8080(连接的目标主机和端口号)

Referer: http://localhost/links.asp(告诉服务器我来自于哪里)

User-Agent: Mozilla/4.0(客户端版本号的名字)

Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)

If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)

Cookie(客户端暂存服务端的信息)

Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

2)响应(服务端->客户端[response])

HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)

Location: http://www.baidu.com(服务端需要客户端访问的页面路径)

Server:apache tomcat(服务端的Web服务端名)

Content-Encoding: gzip(服务端能够发送压缩编码类型)

Content-Length: 80(服务端发送的压缩数据的长度)

Content-Language: zh-cn(服务端发送的语言类型)

Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)

Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)

Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后,刷新,然后访问指定的页面路径)

Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)

Transfer-Encoding: chunked(分块传递数据到客户端)

Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)

Expires: -1//3种(服务端禁止客户端缓存页面数据)

Cache-Control: no-cache(服务端禁止客户端缓存页面数据)

Pragma: no-cache(服务端禁止客户端缓存页面数据)

Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)

Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息,解决跨域的一种方法

20 hasOwnProperty和isPrototypeOf的作用

hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

isPrototypeOf :是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false。

21 JavaScript RegExp 对象有 3 个方法:test()、exec() 和 compile()。

(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 true ,否则返回 false;

(2) exec() 方法用来检索字符串中与正则表达式匹配的值。exec() 方法返回一个数组,其中存放匹配的结果。如果未找到匹配的值,则返回 null;

(3)compile() 方法可以在脚本执行过程中编译正则表达式,也可以改变已有表达式。

22 JS中操作数组方法的比较

pop()方法用于删除数组的最后一个元素,并返回被删除的最后一个元素,这样的话数组就被改变了。

splice()方法可以对数组中已经存在元素进行删除,也可以添加元素到数组中。

sort()方法对数组中所有的元素都进行排序,如果没有提供比较函数compareFunction,则按照字符串的Unicode码的顺序进行排序。

所以以上三种方法都改变了数组。

而 concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本,返回一个新的数组。该数组是通过把所有的arrayX参数添加到arryaObject中生成的,如果要进行 concat()操作的参数是数组,那么添加的是数组中的元素,而不是数组。

23 操作符知识点

《JavaScript权威指南》的部分相关知识点

“==”运算符(两个操作数的类型不相同时)

如果一个值是null,另一个值是undefined,则它们相等

如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后的值进行比较。

如果其中一个值是true,则将其转换为1再进行比较。如果其中的一个值是false,则将其转换为0再进行比较。

如果一个值是对象,另一个值是数字或字符串,则将对象转换为原始值,再进行比较。

对象到数字的转换

如果对象具有valueOf()方法,后者返回一个原始值,则JavaScript将这个原始值转换为数字(如果需要的话)并返回一个数字。

否则,如果对象具有toString()方法,后者返回一个原始值,则JavaScript将其转换并返回。(对象的toString()方法返回一个字符串直接量(作者所说的原始值),JavaScript将这个字符串转换为数字类型,并返回这个数字)。

否则,JavaScript抛出一个类型错误异常。

空数组转换为数字0

数组继承了默认的valueOf()方法,这个方法返回一个对象而不是一个原始值,因此,数组到数学的转换则调用toString()方法。空数组转换为空字符串,空字符串转换为数字0.

24 History 对象属性

length 返回历史列表中的网址数

back() 加载 history 列表中的前一个 URL

forward() 加载 history 列表中的下一个 URL

go() 加载 history 列表中的某个具体页面

25 给网页添加javascript的方式有

(1) 使用script标签,将javascript代码写到<script></script>之间

(2)添加外部javascript文件

(3)使用行内javascript

26 javascirpt中的数字在计算机内存储为多少Byte

1.Javascript中,由于其变量内容不同,变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存,存储基本数据类型(数值、布尔值、null和未定义)的值,引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。

2.JS中的数字是不分类型的,也就是没有byte/int/float/double等的差异。

27 哪些函数能用来验证字符串的完整性

     md5()函数将一个字符串进行md5加密计算,md5()函数使用RSA数据安全,包括MD5报文摘要算法。 语法:md5(string,raw),第一个参数string必需,表示待处理字符串,第二个参数raw可选,布尔型数值,默认为false,false表示返回32位的十六进制字符串,true表示返回16位二进制数。         

       sha1()函数计算字符串sha-1散列,使用哈希安全算法。 语法:sha1(string,raw),同md5。  

       str_rot13()函数对字符串执行rot13编码。

       crc32()函数计算字符串的32位crc(循环冗余校验),该函数可以用于验证数据完整性。

28 数组

arr是个对象数组,reverse和sort只是改了arr的内容,返回的依然是arr对象本身,而concat返回的是新的对象,这里考的点是浅拷贝和深度拷贝,concat和slice常用来做深度拷贝

29 下列函数的用法

hover(over ,out):模仿悬停事件,即当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

keypress(fn):在每一个匹配元素的keypress事件中绑定一个处理函数

change():调用执行绑定到change事件的所有函数,包括浏览器的默认行为。

change(fn)是文本框的内容发生变化时执行的操作、给所有的文本框增加输入验证

select(fn)是文本框的内容被选择时执行的操作。

click():是点击时触发的方法;

bind():是被选元素(class或id)添加一个或多个绑定事件处理程序,并规定事件发生时运行的函数。

30 数组方法

push返回数组的新的长度

reverse、sort返回数组本身

concat返回被连接数组的一个副本。

31 Angular 的知识,没有$send.

$emit只能向parent controller传递event与data

$broadcast只能向child controller传递event与data

$on用于接收event与data

32 需要匹配包含文本的元素

text()是jQuery中的方法,可是设置或返回被选元素的文本内容

contains选择器,选取包含指定字符串的元素,字符串也可以是文本

input()选择器,选取表单元素

attr(name,value)属性操作,设置或返回被选元素的属性和属性值

33 promise三种状态

一个promise可能有三种状态:等待(pending)、已完成(fulfilled)、已拒绝(rejected)

一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态,不能逆向转换,同时“完成”态和“拒绝”态不能相互转换

promise必须实现then方法(可以说,then就是promise的核心),而且then必须返回一个promise,同一个promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致

then方法接受两个参数,第一个参数是成功时的回调,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个promise传入,也接受一个“类then”的对象或方法,即thenable对象。

34 AngularJS1元素过滤

filter的两种使用方法

1. 在模板中使用filter

我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

也可以多个filter连用,上一个filter的输出将作为下一个filter的输入

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:

app.controller('testC',function($scope,currencyFilter){

$scope.num = currencyFilter(123534);

}

在模板中使用{{num}}就可以直接输出 $123,534.00了!在服务中使用filter也是同样的道理。

ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:

app.controller('testC',function($scope,$filter){

$scope.num = $filter('currency')(123534);

$scope.date = $filter('date')(new Date());

}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

阻止事件的默认操作,用stopPropagation;而阻止浏览器的默认操作时preventDefault。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 23,637评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 1,690评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,113评论 1 91
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 4,992评论 0 2
  • 进来简书遇到第一个坑 markdown模式下 ``` public class hello{ public sta...
    别太匆匆阅读 45评论 0 0