js基础第一天

js作用：网页特效（电梯导航）、交互、表单特效。就是可以用来控制结构和样式。

常用的三个输出语句都属于js的内置对象，提供我们直接使用的功能就是内置对象功能。

web三标准：结构、样式、行为。而js主要控制结构和样式。

<script></script>

alert() 弹出警示框（用的少，用户体验差）

window.alert(“执行语句”);也可以直接alert(“执行语句”);

console 控制台输出（用户看不见）

正常输出console.log(“你好”);

警告输出console.warn(“注意”);

错误提示console.error(“这里错了”);

document.write() 文档打印输出（直接在文档中显示，常用）

document.write(“今天下雪了”);

如何用js控制结构和样式？

首先要获取id，给一个id然后获取元素，获取方式:

var demo_huoqu=getElementById(“demo”);

意思是获取id为demo的元素放在demo_huoqu这个变量里。

然后更改样式：

document.getElementById(“demo”).style.backgroundColor=”red”;

意思是更改原样式中的颜色为红色。

js中样式的写法与CSS不一样

CSS：backgrount-color

js:backgroundColor(没有-，同时第二个单词首字母大写)

变量命名

变量名必须以字母或是下标符号_或者$开头；长度不能超过255字符；不允许使用空格；不使用脚本语言中保留的关键字及保留符号作为变量名；变量名严格区分大小写。

全局变量和局部变量

全局变量：外部设置变量、隐式的全局变量（在函数体内部但是没有声明var的也是全局变量）

result为全局变量，num也为全局变量。

局部变量：内部设置var变量

题：

输出为10，因为函数没有调用，没有fun()调用，所以为10

输出为global。a=”global”为全局变量，但是是局部调用的，所以局部执行，执行输出为global。

事件三要素（事件源+ 事件= 事件处理程序）

事件源.事件= function(){ 事件处理函数 }

事件源 事件 事件处理函数

被触发者 怎么触发这个事情 发生了什么事

先获取盒子和按钮的id，然后当按钮被按时发生了盒子的样式宽度改变。

鼠标事件

隐藏样式

display:none;隐藏（隐藏不占位置，使用后下面的会上浮）

display:block;显示，因为变为块级元素所以肯定会显示。

visibility:hidden;隐藏（隐藏但占位置，上面的位置存在，下面不会顶上来）

visibility:visible;显示

overflow:hidden;隐藏超出的部分

入口函数

window.onload=function() {

内部放js

}

这个函数的意思就是说，当我们页面结构样式加载完毕之后，才去执行函数体里面的js部分。所以这句话可以放到页面的顶端。同时一个页面只能写一次。

js 的书写位置

行内式

<button onclick="alert(‘你好吗‘)">点击我</button>

<a href=”javascript:;”></a>

<a href=”javascript:void(0);”></a>

当点击的时候，js执行一个空的函数，如果换成#，那么就会跳转。

内嵌式

写在页面中任何地方都可以<script type=”text/javascript”></script>

外连式

在head中写<script type=”text/javascript” src=”xx.js” ></script>

这对标签之中不可以写任何东西

用js 更换背景图片的方法

body {
     background: url(images/2.jpg) top center;

}

window.onload=function() {
var _li1=document.getElementById("li1");
var _li2=document.getElementById("li2");
var _li3=document.getElementById("li3");
var _bd=document.getElementById("bd");
_li1.onclick=function() {
_bd.style.backgroundImage="url(images/3.jpg)";
}
_li2.onclick=function() {
_bd.style.backgroundImage="url(images/4.jpg)";
}
_li3.onclick=function() {
_bd.style.backgroundImage="url(images/5.jpg)";
}
}

首先为什么要用backgroundImage 而不用background呢？其实也可以，但是前面的只换图片不换样式，如果想用后面的，还得再加上样式to center。其次还需要加url以及后面的内容才行，不能够直接images/5.jpg直接放上去，这种方法是直接引入图片，而现在则是在样式中的图片，所以要写全。

模态框

CSS样式部分

<div di="mask">

</div>

<div di="box">
     <span>×</span>

</div>

#mask {/*模态框*/
     height: 100%;
     width: 100%;
     position: fixed;/*需要用固定定位，将模态框固定在屏幕永远不动*/
     background: rgba(0,0,0,.5);/*设置透明度*/
     z-index: 999; /*设置时要比前面的框低一级一般设为999*/
     display: none;

}

#box {/*弹出的表单框*/
     width: 400px;
     height: 250px;
     background-color: #fff;
     position: fixed;/*框固定到屏幕永远不动*/
     top: 50%;/*框上面的线到屏幕竖直居中的位置*/
     left: 50%;/*框左边的线到屏幕水平居中的位置，也就是正中央*/
     margin: -125px 0 0 -200px;/*由于以上面和左边的线为准，所以框会偏下右各一半，所以需要设置框margin的上为负高一半，左为负宽一半，最后正好居中央。*/
     z-index: 1000;/*设置层级比模态框高一级*/
     display: none;

}

#box span {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 15px;
     height: 15px;
     font-size: 15px;
     cursor: pointer;

}

js特效部分

login是您好请登录的a标签，mask是模态框，box是中间的白色表单，close_box是关闭框

<script type="text/javascript">
     window.onload=function() {
         var login=document.getElementById("login");
         var mask=document.getElementById("mask");
         var box=document.getElementById("box");
         var close_box=document.getElementById("close_box")
         login.onclick=function() {
             mask.style.display="block";
             box.style.display="block";
         }
         close_box.onclick=function() {
             mask.style.display="none";
             box.style.display="none";
         }
     }

</script>

padding 问题

给一个盒子长宽高颜色，如果给padding肯定会撑开盒子。而在这个盒子中包含一个小盒子，小盒子只设高，宽会继承父亲的宽。就算是加了padding-left值也不会撑开自己，因为自己没有设宽度值。当给小盒子设了宽度值例如width为50px或者为100%，那么再给padding-left时就会撑开自己比父盒子宽。同理因为给了高的值，所以如果加padding-top值是也会撑开自己比父盒子高。

数据类型

字符型string、数值型number、布尔型boolean、null、undefind（未定义）

输出类型方法，例如

var txt=”欢迎光临”;

console.log(typeof txt);

结果为string

转换为字符型：加双引号、String(); 转换字符S一定要用大写。字符型的可以减可以乘可以除。

布尔型：true和false。转换布尔型：！！、Boolean();

false、undefined、null、0、””等为false

“somestring”/[bobject]为true

转换数值型：减- 乘* 除/ 都可以转换，除了加+。利用Number();转换。

八进制：数值的前面带0代表八进制。

var num=020;

结果是16，八进制转为十进制。

算法0*8⁰+2*8¹=16

十六进制：数值的前面带0x代表十六进制。

var num=0xb;

结果11

取整

parseInt

parseInt(值，进制)；

parseInt(19.99); 是19

parselnt(“25px”); 是25

parselnt(“px25px”); 是NaN

parseInt(“10”,2); 10的2进制。意思是把10这个2进制转换为10进制。0*2⁰+1*2¹=2

parseInt(“110”,2) 0*2⁰+1*2¹+1*2²=6

转为整数：var num=parseInt(“str”)

读取字符串中的整数部分

从第一个字符向后读。

如果碰到第一个数字字符，开始获取数字，再次碰到不是数字的字符（包括小数点），停止读取。

如果开头碰到空格，忽略。

如果碰到的第一个非空格字符，不是数字说明不能转→NaN，NaN的意思是Not a Number。什么是NaN：不是数字（内容）的数字（类型）

转为浮点数：var num=parseFloat(“str”)

读取字符串中浮点数部分。

用法和parseInt完全相同

唯一差别：parseFloat认识小数点，仅认第一个。而且parseFloat如果能转成整数，就不会转为浮点数，例如25.0，那么就会转为25，.25转为0.25

原文：http://www.cnblogs.com/yiningfamily/p/4976372.html