2018年2月

字符串(String)
字符串是存储字符的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号。凡是用双引号或者单引号引起的都是字符串。用引号时,可以是单引号也可以是双引号,唯独不可以一个单引号一个双引号。可用.length看有几个字符。
转义:无法输出的字符,先输出/,在输出字符。("、\、换行等....)
字符串不可变:在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间 内被 垃圾回收器回收。
字符串拼接:如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。
实例:

var name="xiaoning";
var username='xiaoning';

数字(Number)

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

  • 十进制表示法(0~9):var num = 10;
  • 十六进制表示法(0-9,a(A)-f(F))表示数字,并且以0x开头:var num = 0x99a;
  • 八进制表示法(0-7),并且0开头:var num=077;
  • 科学(指数)计数法来书写:var num=123e5;

数值范围
由于内存的限制,ECMAScript 并不能保存世界上所有的数值
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity
NaN
NaN 非数值(Not a Number的简写)
Undefined和任何数值计算为NaN;
NaN 与任何值都不相等,包括 NaN 本身

isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
不是一个数字的标准,如果符合了那么就不是一个数字,不符合就是一个数字。
isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false

注意:
因为精度丢失问题,所以不判断计算后的两个浮点数是否相等。

布尔(Boolean)
布尔(逻辑)只能有两个值:true 或 false。际运算中true=1,false=0。
var x=true
var y=false

注意:

  • true:除0数字、“something”、Object(任何对象)为true。
  • false:0 、“”、undefined 、null为false。

数组
数组的定义及赋值

var arr=new Array();
arr[0]="xiao";
arr[1]="ning";
arr[2]="bo";
arr[2]="ke";

或者

var cars=new Array("xiaoning","boke");
var cars=["xiaoning","boke"];

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔.
如:

var person={
name : "Bill",
age  : 19,
id :1111
};

Null
变量未引用 ,值为空,内存中不存在 。可以通过将变量的值设置为 null 来清空变量。
Undefined
变量未初始化
定义了变量,没有给变量赋值,变量在内存中是存在的。Undefined 这个值表示变量不含有值。

null和undefined有最大的相似性。看null == undefined的结果(true)。但是null ===undefined的结果(false)。不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。

附录:判读变量类型typeof()
变量的命名规则
1.变量命名必须以字母或是下标符号"_"或者"$"为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格,首个字不能为数字。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)
6.汉语可以作为变量名。但是不建议使用。

JavaScript中的变量变量

变量是存储信息的容器。
定义变量:关键字:var,示例:var sum;
变量赋值:var sum;sum=3;或者var sum = 3;
变量的命名规则:

  • 变量必须以字母开头。
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)。
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)。
  • 不能以数字或者纯数字开头来定义变量名。
  • 不推荐使用中文来定义变量名。
  • 不推荐使用关键字和保留字来定义变量名。

注意: 一条语句,可以有多个变量。例如:var name="sam", age=56, job="CEO";

JavaScrip中的注释

  • 单行注释 //
  • 多行注释 /* */

  • alert()在页面弹出一个对话框,经常用于简单的js调试。
    20180221112857.png
  • confirm()在页面弹出一个对话框,与alert()相比,多了一个确定按钮,返回值为truefalse, 常配合if判断使用。
    20180221113018.png
  • console.log()将信息输入到控制台,用于js调试。
    20180221113233.png
  • prompt()弹出对话框,可以定义一个变量,用于接收用户输入的信息。
    20180221113347.png
  • document.write()在页面输出消息,可以输入html标签,如:
    document.write("<h1>小宁博客</h1>");输出
    20180221113554.png

JavaScript概述

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。js是一款运行在客户端的网页编程语言。
组成部分:js标准 (ecmascript);通过js操作网页元素(dom);通过api操作浏览器(bom)。
特点:简单易用;解释执行;基于对象。
常见应用:表单验证;轮播特效;开发游戏。

JavaScript的引入方式

内嵌式
直接写在网页里面,在哪里都可以,JavaScript的代码需要写在<script type="text/javascript"></script>中间,建议在html标签后面。
例如:

<script type="text/javascript">
    alert("小宁博客");
</script>

外链式

  • 先创建一个外部.jS文件
  • 通过<script type="text/javascript" src="one.js"></script>
    将外部js调用。
    注意:
  • 写javascript代码的时候,分号不能省略,而且javascript区分大小写。
  • 将多个javascript文件合成为一个javascript文件,建议javascript在哪里调用就在那里引入javascript文件。

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,如下图所示,即为设置了圆角背景的导航。而且每个元素的大小都是不确定的,有内容来决定元素的大小,但是每个元素的边框都是一样的。这就引入看滑动门技术。
20180221085243.png

特点:
1 实用性,能够根据导航条菜单文本长度自动调节宽度;
2 简洁性,它可以用简单背景小图来实现炫彩的导航条风格,大大减少网页载入内容。
3 适用性,可以多层套用,实现双层滑动门炫彩风格,也可以实现网页其他模块的一些特殊效果。

案例:
图片1.png
对于这种两端都为圆角的滑动门效果,一共需要3部分,首先把图片分为3部分:
20180221085621.png20180221085635.png20180221085648.png
两端采用两个div,采用两个圆角图形作为背景,或者直接img引入两张圆角图形,中间div采用平铺背景矩形。
如果有鼠标经过的效果,可以定义a标签,借助span标签,转换成行内块,实现此效果。
html

<div class="left"></div>
<div class="con">测试滑动门技术</div>
<div class="right"></div>

css

 .left{
        width:10px;
        height:100px;
        background-image:url(left.png);
        float:left;
}
.right{
       width:10px;
       height:100px;
       background-image:url(right.png);
       float:left;
}
.con{            
         height:100px;
         background-image:url(con.png);
         background-repeat:repeat-x;
         float:left;
         line-height: 100px;
}

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。通过这些快捷键可大大提高我们的开发效率。
常用快捷键

  • 生成结构的快捷键:!+ tab,可以生成html5的结构代码。
  • 生成id名和类名:标签名.类名#id名+tab,或者没有标签名.类名+tab生成的是div
  • 生成同级元素:标签名+标签名+标签名 "+"tab
    -生成子类标签:标签名>子标签名>子标签名>子标签名+tab标签名>子标签名>子标签名>子标签名^^子标签名+tab(注意:^代表上一级)。
  • 带固定数量的标签:ul>li*5+tab
  • 带有序号名称:ul>li.abc$*3 + tab
  • 生成带有内容的标签:ul>li>a{item}*5
  • width:30px的快捷键w30+tab
  • Height:30px的快捷键h30+tab
  • Margin:30px的快捷键mg30+tab

原理:
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。
案例

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

CSS的隐藏

  • overflow:hidden; 溢出隐藏 ,超出元素范围的内容会被剪切掉。
  • visibility:hidden; 隐藏元素, 隐藏之后还占据原来的位置。
  • display:none; 隐藏元素, 隐藏之后不占据原来的位置。
  • display:block; 元素可见。
    注意:display:nonedisplay:block 常配合js使用。

    内容移除

    • 使用text-indent:-5000em;这样可以隐藏文字内容,使内容不显示在网页可见范围内,通常用于SEO优化。值一般不会超过7位,超出7位页面会出现bug。
    • 将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。如果想占据位置,可以通过设置盒子的内边距(padding)来控制。

vertical-align 其实就是垂直对齐的意思。

描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length-
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值
inherit规定应该从父元素继承 vertical-align 属性的值。

应用:
图片和文字垂直居中对齐

img{vertical-align:middle;}

标签包含规范

  • div可以包含所有的标签。
  • p标签不能包含div h1等标签。
  • h1可以包含p,div等标签,但不建议使用。
  • 行内元素尽量包含行内元素,行内元素不要包含块元素。

规避脱标流

  • 尽量使用标准流。
  • 标准流解决不了的使用浮动。
  • 浮动解决不了的使用定位。