JavaScript详解（一）

简介：

Javascript是一个脚本语言，弱类型的编程语言，简称js，被称为网站开发的行为。它的作用是增加页面特效、前后台交互以及应用于后台开发。它即可写在HTML的script标签里，也可写在外部js文件里。要注意的是JavaScript严格区分大小写，且以分号结尾，语句字符必须是英文。

html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等)

变量定义：由于是弱类型，故不用指定类型，使用关键字var定义变量。

注释：多行注释/* .....*/   单行注释 //

引入js文件：

弹窗与控制台打印：分别是alert()和console.log()，在代码调试中常常用到这个。

六大类型：数字(number)、字符串(str)、布尔(true,false)、空(null)、对象、未定义(undefine)。未定义就是一个变量声名但未赋予值。

取变量类型：typeof 变量名

运算符：

1. 括号：（） [ ] 中括号表示数组的下标
2. 逻辑反： !x
3. 自加自减： x++ ++x x-- --x   前加和后加的区别在于前加是运算前执行++，后加是运算后执行++
4. 算术运算符：* / % + -
5. 比较运算符：< > <= >= == === !=  与其他语言不同的是多了一个===，这是由它的弱类型造成的，==只比较他们的值，不管类型，而===同时比较他们的值和类型。
6. 逻辑运算符： &&  ||
7. 赋值运算符：=
8. 复合运算符：+=   -=   *=   /=  %=
9. 条件运算符：z?x:y    条件z成立，返回值x，否则返回y。

+号两边是数字和字符串，加号起拼接作用。-和*、/、%号两边是数字和数字的字符串，会将数字字符串看出一个数字。

js获取元素

对于具有唯一性的标签，如body、title、head可以直接获取。

var obox = document.title

对于不具有唯一性的标签还可通过id、class、tagname、name、上下文选择器来获取。

var obox = document.getElementsById("xx")
var obox = document.getElementsByClassName("xx")
var obox = document.getElementsByTagName("xx")
var obox = document.getElementsByName("xx") #常用于表单
var obox = document.querySelector("xx xx") //只获取一个
var obox = document.querySelectorAll("xx xx") //获取所有满足条件的

如果获取的元素是一个确切的元素，可以直接操作这个元素，若有多个元素，必须通过下标来操作这个元素。

可用以获取的对象来取代document，以缩小获取元素的范围。

获取的元素可通过innerHTML或innerText来修改标签里的内容，innerHTML可以解析标签，innerText不能。如：

document.body.innerHTML = " hello,world. “

js简单事件

所谓的事件就是指JavaScript捕获到用户的操作，并能做出正确响应。在事件函数里，有一个关键字this，它代表当前触发事件的这个元素的事件。

格式： 对象.事件 = function(){ xxxx  }

鼠标事件：

• 单击事件：onclick
• 双击事件：ondblclick
• 鼠标划入事件：onmouseenter
• 鼠标划出事件：onmouseleave

如：

obox.onclick = funtion() {
        this.innerText = "hello";
}

js操作属性

对于标准的属性如href、class、id、name、target等可以直接进行读取和修改。要注意的是class属性在操作属性里写作classname。

obox.target = "_self_;
obox.classname = "long" #操作class属性

对于不规范的的属性，读取和修改分开，读取用getAttribute(”属性“)方法，设置属性用setAttribute(”属性“，”属性值“)方法，移除属性用removeAttribute(”属性“)方法。这三种方法对于规范属性同样有效。

设置属性可以一次给一个属性设置多个值，一般只有class这个属性可以有多个值，多个值之间用空格分开。

js操作css样式

js操作样式有两种方式，一种是直接利用变量对象操作，一种是放在事件函数里操作。

直接操作：变量.style.属性 = ”xxx“。 要想一次改多个属性： 变量.style.cssText = "属性1：值；属性2：值” 。 操作复合属性有两种，一种是要去掉-号，-号后面的第一个单词大写。如oBox.style.marginLeft = "100px"；另一种不需要改动属性名，oBox.style["margin-left"] = "100px"。

放在事件函数里：就是将变量改成this。其方法与直接操作是一样的。